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:

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.
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.
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:

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
HTML5-capable browsers should not be deprived their native/ optimised capabilities
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

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.
Create a poster image (either JPEG or PNG formats)
Download the excellent Flash-based FlowPlayer.

Preparing the Server

Store the following files on the web server:

MP4 (accessible via #http://somewhere.com/VIDEO.mp4#) and OGG (accessible via #http://somewhere.com/VIDEO.ogg#) Videos
Poster (accessible via #http://somewhere.com/POSTER.png#)
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:

Create an HTML5-compatible page
Use HTML5 video tags (video/ source entities)

Load the MP4 file first
Followed by OGG

Fall-back onto embedded Flash Player to play the MP4 file
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>

Search This Blog

SOFTware is HARD