Blog Objective

This is a blog that attempts to make life easier by noting down the author's accrued knowledge and experiences.
The author has dealt with several IT projects (in Java EE and .NET) and is a specialist in system development.

28 December 2012

How to Display/ Load Videos in Browsers

Here is everything you need to know about videos: http://diveintohtml5.info/video.html

Considerations

In general, these are the considerations when displaying/ rendering videos over the web:
  1. where is the video stored/ hosted? – On premise or in the cloud? Cloud-hosting can be a good option for load distribution if the videos are huge.
  2. what is the streaming/ downloading protocol? – The trend these days appears to be to stream videos using HTTP rather than specialised (and often expensive) protocols.
  3. who is the target audience and what browser/ platform are they using to view these videos?
    • what browser? – Chrome, IE, Firefox, Opera?
    • which version(s)? – still required to support IE6?
    • what operating systems/ environment? – do we have Unix/ Mac users?
    • need to support desktop/ tablet/ mobile? – some or all of these?
The challenge for the 3rd consideration is to be able to accommodate everyone (from IE6 on a desktop to the iPad safari browser). To do this, a number of “tricks” need to be employed:
  1. Since Adobe Flash penetration is deep, embed a Flash Video Player (think HTML4):
    1. For both commercial/ personal use, try FlowPlayer based on GPLv3.
    2. Flash version from 9.0.115 allows playing MP4 files on top of SWF
  2. HTML5-capable browsers should not be deprived their native/ optimised capabilities
  3. Firefox only plays Ogg or WebM (FF4+) for HTML5All these “tricks” are well-documented here.

Embedding a YouTube Video

If you are embedding a YouTube-hosted video, the best is to use an iframe. Using an iframe allows YouTube to determine the best viewing experience based on the client browser’s capabilities.
There are a number of parameters to configure for the optimum experience. To embed the iframe, all that is required is to determine the #width#, #height# and #videoID# of the YouTube video.
The HTML code follows:
   1: <iframe id="youtubeplayer" type="text/html" 
   2:  width="#width#" height="#height#" frameborder="0"
   3:  src="http://www.youtube.com/embed/#videoID#"/>
YouTube allows passing GET parameters to configure the video player. An example of what I may use to append to the URL could be:

?autohide=1&fs=0&loop=0&modestbranding=1&rel=0&showinfo=0&theme=light&autoplay=0.

For a complete description of the parameter, see here.

Embedding a Video Stored in a Web Server

Preparing the Files

  1. Encode at least 2 video file formats: MP4 and OGG. In case you need to fix the MP4 to correctly support streaming, you may need this.
  2. Create a poster image (either JPEG or PNG formats)
  3. Download the excellent Flash-based FlowPlayer.

Preparing the Server

Store the following files on the web server:
  1. MP4 (accessible via #http://somewhere.com/VIDEO.mp4#) and OGG (accessible via #http://somewhere.com/VIDEO.ogg#) Videos 
  2. Poster (accessible via #http://somewhere.com/POSTER.png#
  3. Flash Player files (flowplayer-3.2.15.swf & flowplayer.controls-3.2.14.swf)
Ensure that the correct mime-types for each file-type is configured correctly.
  • ogg to be served as video/ogg
  • mp4 to be served as video/mp4

HTTP Streaming

Ideally, the web server should support the HTTP/1.1 “Accept-Range” header to allow HTTP streaming (allows downloading of partial content instead of the entire file all-at-once). To confirm if the web server supports the feature, look for Accept-Ranges: bytes in the HTTP header for a HTTP/1.1 GET or HEAD. If the server returns Accept-Ranges: none, the feature isn’t be supported. To support (random) seeking, disable (gzip) compression for these video files.

The HTML Page

Next, create an HTML page with the following general structure:
  1. Create an HTML5-compatible page 
  2. Use HTML5 video tags (video/ source entities) 
    • Load the MP4 file first
    • Followed by OGG
  3. Fall-back onto embedded Flash Player to play the MP4 file 
  4. Fall-back further to allow downloading of both the MP4 and OGG files
An example generated from here:

<!DOCTYPE html><html>

  <head><meta charset="UTF-8" /></head>

  <body>

    <video controls="controls" poster="#http://somewhere.com/POSTER.png#" width="#width#" height="#height#">

      <source src="#http://somewhere.com/VIDEO.mp4#" type="video/mp4" />

      <source src="#http://somewhere.com/VIDEO.ogg#" type="video/ogg" /> 

 

      <!-- Fallback onto Flash Player -->

      <object type="application/x-shockwave-flash" data="flowplayer-3.2.15.swf" width="#width#" height="#height#">

        <param name="movie" value="flowplayer-3.2.15.swf" />

        <param name="allowFullScreen" value="true" />

        <param name="wmode" value="transparent" />

        <param name="flashVars" value="config={'playlist':['#http://somewhere.com/POSTER.png#',{'url':'#http://somewhere.com/VIDEO.mp4#','autoPlay':false}]}" />        

 

        <!-- Fallback onto download -->

        <img alt="My Video" src="#http://somewhere.com/VIDEO.png#" width="768" height="432" title="No video playback capabilities, please download the video below" />

      </object>

    </video>

    <p><strong>Download video:</strong> 

      <a href="#http://somewhere.com/VIDEO.mp4#">MP4 format</a> | 

      <a href="#http://somewhere.com/VIDEO.ogg#">Ogg format</a>

    </p>

  </body>

</html>

No comments: