HTML - Video

» HTML » HTML Tutorial - Inserting video into html pages

A video file can be inserted into an 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 easily because YouTube provides you with the HTML code.

html<object width="425" height="344" data="https://www.youtube.com/embed/yUtUHfwHI9I"></object>

html<embed src="https://www.youtube.com/embed/yUtUHfwHI9I" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/yUtUHfwHI9I" frameborder="0" allowfullscreen></iframe>

Demo

I will mention that embed scripts on youtube are not XHTML valid. But don't worry, give it a search and you will find plenty of tools to generate valid XHML codes for videos on youtube.

You can also find here a good tutorial about inserting YouTube videos into a CMS like WordPress, Joomla or Drupal, PowerPoint presentations, Gmail and some other cool things

HTML5 video tag

With the introduction of HTML5, the video tag spread out very quickly with good support from modern browsers. If after reading all this you are still not comfortable in creating your own player using the HTML5 video tag, you can use a simple yet powerful 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>