HTML 5: Video Coding

From TechMentor

<google uid="C01"></google>

Adding the video tag and sources

Not all browsers support the same video formats. It is best to provide H.264, Ogg, and WebM to cover all the bases. 

<!-- specify "controls" to enable play controls -->
<video controls>
    <source src="sample.mp4" type="video/mp4" /> <!-- mp4 appears first for iOS support -->
    <source src="sample.webm" type="video/webm" /> <!-- WebM next because it is higher quality than Ogg -->
    <source src="sample.ogv" type="video/ogg" /> <!-- Ogg last because it is the lowest quality -->
<!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

The sources are parsed in order, so it is best to include the highest quality format first. Note, there us a bug in iOS that it only attempts the first source. So, if planning to support iOS devices, always have mp4 as the first source.

Adding the audio tag and sources

For audio, only mp3/mp4a and ogg are required. 

<audio controls>
     <source src="../_audio/podcast-audio.m4a" type="audio/mp4" />
     <source src="../_audio/podcast-audio.oga" type="audio/ogg" />
<!-- Fallback content follows --> 
     <p>Your browser does not support HTML5 audio.</p>
</audio>

Additional Attributes

Preloading

Preloading means the that browser will start loading the audio/video as soon as the page loads, instead of waiting for the user to click play. The downside is that the media is loaded every time the page is loaded, regardless of if the user ever plays it. This can waste bandwidth. This is especially not good for users with mobile devices. Preload has 3 options:

  • none (all the user sees are the controls)
  • auto (browser choice. All desktop browsers load the entire video. iOS browsers load only the meta data)
  • metadata (User gets metadata such as first frame, size, and duration. The user sees the first frame and controls. Unfortunately only the current version of Firefox properly supports this. All other browser preload the full video.)

If the primary focus of the page is the video set preload to auto, otherwise specify none. Example code: 

<!-- specify "controls" to enable play controls -->
<video controls preload="none">
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

Autoplay

Autoplay is a boolean attribute that starts the audio/video playback as soon as the page finishes rendering. Example code: 

<!-- specify "controls" to enable play controls -->
<video controls preload="none" autoplay>
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

Note: Autoplay is disabled on iOS devices.

Loop

Loop is a boolean attribute used to auto loop audio/video. This is not a commonly used attribute. Example code: 

<!-- specify "controls" to enable play controls -->
<video controls preload="none" autoplay loop>
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

Note: Loop is not currently supported by Firefox. Looping can also be forced using JavaScript. First load the jquery library in the header 

<head>
...
<script src="../_scripts/jquery-1.5.1.min.js"></script>
<script src="../_scripts/jquery-ui-1.8.10.custom.min.js"></script>
...
</head>

Then use the following code to loop: 

   <video id="myVideo" controls preload="auto" autoplay>
     <source src="../_video/clouds.mp4" type="video/mp4" />
     <source src="../_video/clouds.webm" type="video/webm" />
     <source src="../_video/clouds.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
   </video>
   <script>
      $("#myVideo").bind("ended", function(){
        this.play();
      });
   </script>

Poster Frame (video Only)

A poster frames displays an image, as a placeholder for the video. This can be a GIF, JPG, or PNG. It is often a frame pulled from the specific video. Example code: 

<!-- specify "controls" to enable play controls -->
<video controls preload='none' poster="poster.jpg">
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

Note:

  • Safari replaces the poster with the first frame, if the video is preloaded.
  • iOS 3 does not support this attribute and including it may make the video non-playable for iOS 3 devices.

Width and Height (video Only)

As expected, width and height specifies the size of the video. This should be the actual size of the video. Example code: 

<video width="480" height="300" controls preload="none" poster="poster.jpg">
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <p>Your browser does not support HTML5 video.</p>
</video>

Width (Using CSS for audio)

The width of the audio play can be set using CSS. Example code: 

<audio controls preload="none" style="width:400px;">
     <source src="../_audio/podcast-audio.m4a" type="audio/mp4" />
     <source src="../_audio/podcast-audio.oga" type="audio/ogg" />
     <p>Your browser does not support HTML5 audio.</p>
</audio>
</video>

Captions and Subtitles

While captions and subtitles are planned, they are not yet supported by any current HTML5 browser. However, they can be implemented with JavaScript. The videojs library is complex, but commonly used for this.

Creating a Flash Player Fallback for Video

osmf.org provides a code generator that can wrap a video into a Flash player, the code generated can be used as a fallback for non-HTML5 browsers. Example Code: 

<video width="480" height="300" controls preload="none" poster="poster.jpg">
    <source src="sample.mp4" type="video/mp4" />
    <source src="sample.webm" type="video/webm" />
    <source src="sample.ogv" type="video/ogg" />
    <!-- Fallback content follows --> 
    <object width="480" height="300"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf">
    </param><param name="flashvars" value="src=http%3A%2F%2Fsample.com%2Fvideo.mp4&poster=http%3A%2F%2Fsample.com%2Fvideoposter.jpg">
    </param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" width="480" height="300" 
    flashvars="src=http%3A%2F%2Fsample.com%2Fvideo.mp4&poster=http%3A%2F%2Fsample.com%2Fvideoposter.jpg">
    </embed></object>
</video>

Creating a Flash Player Fallback for Audio

WordPress Audio Player has a standalone audio Flash player than can be used for audio files. The website has plenty of example code to help.

Complete Video Example

Here is a complete example that not only includes a fallback to Flash, but also includes a fallback to simply an image, with download links: 

    <video width="480" height="300" controls preload="auto" poster="../_video/podcast-poster.jpg">
     <source src="../_video/podcast.mp4" type="video/mp4" />
     <source src="../_video/podcast.webm" type="video/webm" />
     <source src="../_video/podcast.ogv" type="video/ogg" />
     <object width="480" height="300" type="application/x-shockwave-flash" data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf">
       <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
       <param name="flashvars" value="src=http%3A%2F%2Fwww.sample.com%2F_video%2Fpodcast.mp4&poster=
        http%3A%2F%2Fwww.sample.com%2F_video%2Fpodcast-poster.jpg"></param>
       <param name="allowFullScreen" value="true"></param>
       <param name="allowscriptaccess" value="always"></param>
       <img src="../_video/podcast-poster.jpg" alt="No Video Support" title="No Video Support">
     </object>
   </video>
   <p>
     <strong>Download Video:</strong>
     <a href="../_video/podcast.mp4">MP4</a>,
     <a href="../_video/podcast.ogv">OGG</a>,
     <a href="../_video/podcast.webm">WebM</a>
   </p>

<google uid="C02"></google>

Retrieved from "http://techmentor.com/tmwiki/index.php?title=HTML_5:_Video_Coding&oldid=124"