BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Embedding Video Using The HTML5 Video Element

Embedding Video Using The HTML5 Video Element

HTML5 brings with it large number of new elements and attribute to the webmasters arena. One of the most exciting and hotly anticipated is the video element.

Until now embedding video within a web page has only been possible with the addition of external plug ins like the hugely popular Flash player. The disadvantage of this method is that users must have downloaded the relevant plug in software before they are able to play such media.

The aim of the HTML5 video element is to provide a definitive way for webmasters to add video files to a web page without the need for anything more than a standard compliant browser. In fact the process is almost as easy as adding an image or hyper link to the page and as browsers come together the process will only get simpler.

Note About Browser Compatablity

As always with new web features there are a few browser inconsistencies which will hopefully improve in the future. In fact, compared to other issues the browsers have done a descent job of complying with the video element. The main issue is the format the video files need to be in to play on the various browsers.

Internet explorer and Safari have currently chosen to use the MP4 format as they already pay a license fee for this software. Other browsers like Firefox, which do not specifically have any commercial interests i.e. do not make vast amounts of money, have chosen to use free open source software like Theora and WebM.

Although it is highly likely that one file type will win out over the others until this happen it is necessary to include three different file types to achieve full browser compatibility. The various browsers and their chosen file types are shown here for ease of comparison.

Video File Types By Browser
Browser File Type Extension
Internet Explorer .mp4
Firefox .ogv / .webm
Opera .ogv
Chrome .ogv / .webm
Safari .mp4

So your first task is to convert your video file to the appropriate formats, to do this you need a video converter program. There are many around some are free and some you will need to pay for I tend to use the Miro Video Converter its free, very easy to use and is capable of encoding your video into all the necessary formats.

Once you have chosen your video converter you will need to create three videos each in a different format as shown below.

mp4
Stands for MPEG-4, based on Apples QuickTime format.
ogv
Stands for Ogg video, video layer provided by Theora, audio layer often provided by Vorbis.
webm
Stands for Web Media, video layer provided by VP8, audio layer often provided by Vorbis.

To embed your video files into a web page is very simple using the video tag. Your code should look like that shown below.

HTML5
<video>
<source src='videos/my_vid.mp4' type='video/mp4'></source>
<source src='videos/my_vid.ogv' type='video/ogg'></source>
<source src='videos/my_vid.webm' type='video/webm'></source>
</video>

As you can see the video tags surround three source elements each pointing to one of your different format video files. Also each source element contains the type attribute which should take the value of video/format. The type attribute tells the browser what sort of file the source is pointing to. Browsers will simply choose the first file type that they recognize and use that as the source file there by giving full browser support.

After each of the source elements there is a short message stating that the browser does not support the video element. This is what will be seen in browsers that do not support the video tag and provides a means to notify the user that their browser is outdated. It works simply because browsers that do not recognize the video tags will simply ignore them and therefore treat anything within them as regular HTML code.

Additional Video Attributes

The above code is all you need to display videos using HTML5 but there are many optional attributes which a webmaster can add to the video tags to provide additional functionality and style, they include.

src
The destination of a video file, currently only suitable for single browser compatability.
width
The width of the video display window, as the video size is vital to user viewing the size should not be dictated by CSS.
height
The height of the video display window, as the video size is vital to user viewing the size should not be dictated by CSS.
controls
States whether the video should display the default control bar. Play, pause and volume for example.
poster
The destination of an image file to be displayed when the video is not playing, by default the first frame of the video file will be displayed.
autoplay
Dictates whether the video should auto play when the page loads up or wait for user prompt.
autobuffer
States that the video file should start to download on page load. Suitable when the video is almost certain to be played, unnecessary when autoplay is present.
loop
What is to be done when the video file finishes playing.

So with all the above optional attributes potentially your video code would look something like this.

HTML5
<video width='100' height='75' controls='controls' poster='my/poster/source/file.gif' 
autoplay='autoplay' autobuffer='autobuffer' loop='loop'>

<source src='videos/my_vid.mp4' type='video/mp4'></source>
<source src='videos/my_vid.ogv' type='video/ogg'></source>
<source src='videos/my_vid.webm' type='video/webm'></source>

<p>Your browser is outdated and does not support the video element.</p>

</video>

Thats about it, as you can see the code is really very simple and as browsers progress the support for this element will increase. For webmasters who absolutely must have video support no matter what browser their users are using a fall back flash file can be include in place of the simple text prompt for un-supported browsers.

Remember if you do include a flash fall back option this really defeats the purpose of the video element, giving browsers no incentive to progress and users no incentive to upgrade. The choice is yours.

Important

Many people within the internet community have been complaining that they are having problems getting videos to display consistently. The issue here is most likely with the respective servers and the mime types of the video files ogg, mp4 and webm.

Because these file types are new and are not being automatically recognized by all browsers the video files are not displaying properly, Firefox seems to be the main culprit.

If you are having difficulty getting the videos to play particularly in Firefox and you are sure that you have the correct code as shown above. Try copying the code below and adding it to your .HTACCESS file.

HTML5
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

The above basically adds the various file types to the server and should solve this issue, hope this helps some of you.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus