How to Play an AVI on Your Website

Save

Getting video content on a website used to be a challenge for Web developers. Since the adoption of HTML5, however, inserting an AVI video takes just a few keystrokes. The same code can be used for MP4, AVI or any other videos your visitors' browsers support. The basic code specifies the height and width of the video. If you use CSS, you can modify this code to have the video appear in different sizes for different screens.

  • Open a page for your Website using your HTML editor or a text editing app. Look at the first line to ensure it is written in HTML 5. The first line should be <!DOCTYPE HTML> to indicate to the browser that you are using HTML5. Save the file, and close it if you are not going to place the video in the index file.

  • Decide where you want to place your .avi video file in your Web page. At this location, type: <video height=”” width=”” controls></video> . In between the quotation marks, insert the height and width values of your video. This will tell the browser how to render your video file.

  • Enter the following code on a new line, replacing "FOLDER/FILENAME.AVI" with the online location and name of your AVI file:
    <source src=”FOLDER/FILENAME.AVI” type =”video/avi” />

  • Type the closing video tag "</video>" on the following line. Your entire code should look like this:
    <video height=”620” width=”480” controls>
    <source src=”FOLDER/FILENAME.avi” type =”video/avi” />
    </video>

  • Save your HTML page and upload it to your website.

References

  • Photo Credit Jose Luis Pelaez Inc/Blend Images/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!