Post # 059 The HTML Video Tag

HTML 5 (Video Tag )

HTML 5 is the next version of HTML, the markup language used on the web.
So says this BBC Blog item. A simple objective of HTML 5 Video is to play video and audio files via a web browser without plugins. It seems to work on this BBC site ok

So no plugins, fine but two non standard file types:-

Either

• .OGG or
  
• .OGV
  

A free tool to do the work and more is called Super Many video formats are accommodated:-
Input Video format: avi, fli, flc, flv, mpg, mov, m4v, mp4, qt, swf, ts, viv, vob, wmv and many more.

Compatability, what's that?

Two file types are available for HTML 5 video, both .MP4 and .OGG. Both are included on my pages. This is to satisfy different browsers, I understand that the code will work on Safari, Chrome, and Firefox browsers. It should also work in MobileSafari on iPhone OS.

• Safari and Chrome play the .MP4 video,
  
• Firefox plays the .OGG.
  
• Chrome supports both formats, and plays the one listed first.
  
• The video and audio quality of the .MP4 format are noticeably superior.
  
  My .MP4 files are 360 wide and the .OGG files 720 wide.
  
  Even so the .OGG files are smaller.
  
• Only Firefox honours the convention that if autobuffer is not coded
  
  the video file will not load. This means that the poster attribute will only work in firefox.
  
• I have not used the Poster attribute but have linked to the video page instead and used Autoplay on that page.
  

The procedure

Convert  VOB => AVI using Super converter
Edit the AVI, as required
Then convert to two different file types:-

• AVI to OGG 720 x 480
  
• AVI to MP4 360 x 240
  

If the files are to be uploaded to the web it is important that both file types are included. MP4 files are required by Apple systems but are twice as big as the OGG files.
If saved onto a CD to be played on a computer, only the OGG is required and the Chrome Browser.
Next write a HTML video page using the following code:-

<video width="320"  height="240"   controls autoplay loop playcount="3" >
        <source src="01.mp4" type="video/mp4" />
        <source src="01.ogg" type="video/ogg" />
        <img src="01.png" width="50%">
     <p>
Your browser does not support the video element so you will

not be able to view the video file here.
</video>

Add any contextual text as required.
Now write a menu page to give the user a method of choosing the videos. Include snapshot from the video on this page. The native format from the VLC player is PNG which is OK.
Not all browsers support the poster attribute so the snapshot on this page will serve the same purpose.
If the end user will view the files on a computer then burn the whole lot to a Data CD

• Original AVI
  
• .OGG and MP4
  
• HTML Video and Menu pages
  
• Any MP3 audio files
  

Or burn the OGG files onto a DVD using Sothink software

---

This page was updated on 5  March 2010 by
Terry Rawkins