HTML - Video

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.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Also, you can insert a video file using a link.

html<a href="example.mpeg" title="Download movie">film name</a>

Supported extensions for the embed tag

These are:

  • .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.

html<object width="425" height="344" data="https://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1"></object>
html<embed src="https://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1" allowfullscreen="true" width="425" height="344">
html<iframe  width="425" height="344" src="https://www.youtube.com/v/F9Bo89m2f6g&hl=en&fs=1" frameborder="0" allowfullscreen></iframe>

Demo

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 code for 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. If after reading all this you are still not confortable in creating your own player using the HTML5 video tag, you can use simple yet powerfull generator, to create a video tag for the player.

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
html<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>

Demo

At the moment the video tag is supported very well by major modern browsers.

BrowserMP4WebMOgg
Internet Explorer
Chrome
Firefox
Safari
Opera (Opera 25+)