A video file can be inserted in a html page in two ways. The first way would be using the <embed/> tag. This tag does not need an ending/finishing tag. It works, mostly, the same as a tag for a photo.
<embed src="example.mpeg" autostart="false" height="30" width="144" />
Also, you can insert a video file using a link.
<a href="example.mpeg" title="Download movie">film name</a>
Supported extensions for the embed tag
- .swf – made by Macromedia Flash
- .wmv – Microsoft Windows Media Video
- .mov – Quick Time Movie, belongs to Apple
- .mpeg – created by Moving Pictures Expert Group.
The most used are .mpeg and .swf, because of the compact format.
Attributes of the embed tag
- autostart – sets whether the file will run automatically after the page is loaded. Can have the true or false value
- hidden – sets whether the buttons are hidden or not. Can have the true or false value.
- volume – can have any value from 0 to 100
- loop – sets whether the file will be replayed after it is finished. Can have the true or false value.
- playcount – this establishes how many times the file will be replayed. For example playcount=”2″ means it will be replayed two times and after it will stop.
Inserting a YouTube video using embed tag
You can do that very easy, because YouTube has on every page the needed HTML code.
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1"></param> <param name="allowFullScreen" value="true"></param> <embed src="http://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"> </embed> </object>
Although everything you see is quite chaotic, the good part is that you only have to copy it from the YouTube, and paste it in your site, and you will have your video. Although lately YouTube is provides a simple iFrame for sharing proposes.
I will mentione that embed scripts on youtube are not XHML valid. To generate valid codes for videos on youtube XHML I recommend this tool that generates valid XHTML YouTube embed codefor videos. Just enter the URL where you found the video and you’ll get a valid XHTML code for you.
HTML5 video tag
With the introduction of HTML5, the video tag spread out very quickly with a good support by modern browsers. Video tag is used to add a video to the html page. At the moment the HTML5 video tag, supports 3 types of video files:
- mp4 – MIME-type video/mp4
- webm – MIME-type video/webm
- ogg – MIME-type video/ogg
<video width="320" height="240" controls> <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4"> <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
At the moment the video tag is supported very well by major modern browsers.