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>

Comments

Post a Comment

Popular posts from this blog

Understanding ITIL Service Management the UML way…

-
Image
I originally had a great deal of difficult reconciling the differences amongst ITIL Change Management, Incident Management, and Problem Management. Having researched on the subjects and understanding them better now, I’ve tried to put the concepts together using a UML class diagram to capture my understanding and to keep it imprinted. Similarly, I wanted to differentiate the various categories of changes (Standard, Emergency, Normal) using an easy to understand & self-explanatory manner – a UML Activity Diagram!
Read more

How to depict (Professional-Looking) Logical Network Diagrams in Astah

-
Image
I have always had to create (professional-looking) UML diagrams using Visio-like icons. You’ve got to admit that showing a bunch of boring UML boxes hardly interests anyone less technical (like anyone whose designation has the words “manager” or “director”). This is actually possible in Astah! I’ve created a template for future projects that allows me to produce logical network diagrams that look like the following: To create this diagram, you need to do the following: Assign various icons to stereotypes. I created the following for my use: Create a new UML Deployment Diagram Every element in the diagram is created as a Node The nodes are subsequently assigned the appropriate <<stereotype>>. E.g. Internet is <<internet>>, WebZone FW is <<firewall>>, Web LB is <<loadBalancer>> Ensure the “Icon Notation” is set to “Customized Icon” for each node Instead of the boring boxes, the corresponding icons automatically gets displayed!
Read more