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: