Embedding Video in Web pages

Home

Search

Embedding Video in Web pages
with useful JavaScript snippets

Objective:

This article is the result of various attempts to include some video files of "Flame Pictures" from various stoves onto the Theale Fireplaces Web Site where you can see some of the results - the link will open in a new window so you can return easily.

Basic Requirements:

Firstly one should always start with some requirements before stating to write any code or web page. In this case I wanted the maximum number of customers to be able to see "Flame Pictures" of the stoves with minimum effort ie the should not be pestered to load extra software or wait long periods without being able to do anything else. If they were not able to see them then they should be told why and advised what to do if they really did want to update their software and the consequences.

Video is arguably one of the most difficult things to include on a web page for several reasons, firstly a lack of common standards, secondly the huge data rate requirement and thirdly the processing power. So why bother? The rationale was that a picture is worth a thousand words and in some cases, like flame pictures, a video is worth a score of pictures. Unfortunately the data required is in the same ratio. A picture will easily take 8 Kbytes, the same as a thousand words of text and a 320x240 video clip of even ten seconds can take 200 Kbytes, roughly a 20 fold increase over a similar size static graphic.

Compromises

It is clear that Video is going to need many compromises and it will not be possible to deliver it to everyone. The first stage was to look at the visitors to the Theale Fireplaces Web Site to get a feeling for the specifications of their machines, software and the Browsers. Initially I thought I would have to settle for a figure of say 50% in the expectation that it would rapidly increase with time as people progressively upgraded. I now believe the figure could be closer to 85% of visitors could be catered for in some way without loading extra software. One natural break comes with Internet Explorer 4 which was installed as part of Windows 98, now three years old and about the time machines would have a sufficiently high hardware specification. Those with Windows 95 are also likely to have been forced to upgrade to IE4 or greater to gain Internet access from most ISPs. The second break comes with Internet Explorer 5.0 (with Windows 98 SE and ME) which would have the Windows Media Player installed by default. In the case of Netscape the break is version 4.xx and most users who have chosen to install it will have upgraded progresively to at least 4.7x and will have probably installed RealPlayer by default and will be able to install Windows media Player if they chose.

Statistics useful to make compromises: The statistics for the Theale Fireplaces web site have been gathered over a period of 18 months using an "Intelligent Counter" from TheCounter.Com and show 83% using Internet Explorer 5 or higher with another 6% using IE4 and 5% using Netscape 4 or higher. Operating systems show Windows 98 66% followed by Windows 95 15% and NT/2000 12%. These figures are an average over the life of the site and almost certainly the current figures will be more biased towards IE 5/6 and Windows 98/2000. The conclusion is therefore to offer fully integrated video support for Internet Explorer 5+ and a way for those with IE4 and Netscape 4.7x to see the videos, even if not fully integrated. The expectation is that this approach will mean that initially 85% of visitors will be able to see fully integrated video and 95% should be able to see video in some form. This, of course, assumes that JavaScript is enabled - there is a trend towards disabling JavaScript to prevent popup adverts and users may need to be alerted to the need to re-enable JavaScript to see the Videos. Currently only 1% of Theale Fireplaces visitors have disabled JavaScript.

Media Players

We next have to consider which Media Players should be supported. There are three main contenders, The Microsoft Media Player (Versions 6.4 and 7.1), RealPlayer and Apple Quicktime. Microsoft Media Player is installed by default in the standard installations of Internet Explorer especially when an upgrade is carried out. The free version of RealPlayer (8 basic) is again usually included in the default configuration when Netscape Navigator is installed but not with Internet Explorer. Quicktime is primarily an Apple program but is available for the PC and is often installed with other software.

The choice is difficult as one does not want to provide even more support to the Microsoft monopoly and the last versions (7.x) of Media Player are gross in their stand alone versions. RealPlayer is little better and is intrusive in the way it changes attributions and has a potential "call home" feature revealing ones browsing etc habits when it is online. Apple Quicktime seems to just do the job but is less supported. My video package can output to a number of Media Player supported formats including .avi and .wmv and to RealPlayer .rm but does not have a direct output in Quicktime format. Media Player is, not surprisingly, the easiest to embed into pages for Internet Explorer as an ActiveX Object and Microsift claim it should be equally well supported as a plugin they supply for Netscape Navigator. The decision had to be for primary support to be for Media Player keeping options open to support RealPlayer formats at a latter stage. Whilst streaming video seems atractive there are advantages in initially working with ordinary video which can be held in cache to be replayed or repeated. Streaming video also requires additional software on the server which is not supported free of charge by many ISPs.

Methods of Incorporating Video into the web site.

There are three main options which, in order of simplicity, are: Firstly provide a simple link to the video file which will use any player associated in the system via the extension or MIME type. Secondly embed the video player in one or more pages of the site or thirdly embed the video player in a separate Popup Window. The first method is the simple and ideal fallback for systems running older software This is a Windows Media .AVI file and This is a RealPlayer .RM File. The web site designer has little control over the details of he way they are displayed which is dependent on the software loaded on the visitors machine, how they have configured the options and how the browser has passed over control but it is simple for the suer to download the file and work out how to best display it off-line.

The more professional approach is to embed the player which keeps some control over the display. I have tried both embeding into a normal page and into a popup window. The latter has the advantage that it can be left to download the video and then returned to when completed. To cut a long story short it is possible to leave the Popup Window minimised or behind other windows (blured in the jargon) and then bring it to the foreground (into focus) when the download completes using some clever JavaScript.

Embeding Media Player

Media Player is normally Embedded into a page for Internet Explorer as an ActiveX Control using the <OBJECT> TAG using the following magic incantation. In the case of Netscape it is incorporated using a plugin using the <EMBED> TAG. The EMBED tag can be put within the OBJECT TAG to allow the code to work for Internet Explorer and Netscape although I have found it not to work well for Netscape Navigator either way!

And the result is:

Controlling the Media Player using JavaScript and Forms

The little checkbox comes from some JavaScript which demonstrates how easy it is to control the Media Player in Internet Explorer. This is programmed using an onClick to detect a change in the tick box and then run some inline code (it is better practice to have this as a function) which checks the state of the tickbox and then sets the PlayCount to 1 or 999. You will note that PlayCount is a PARAM above and that the ID of the Media Player Object is MediaPlayer. I have also included a drop down box in the form to change the video which is being played. The code to extract the selected value from the Select Box looks quite complex but shorter versions fail in Netscape. FileName is changed to the new value when the onChange event fires. The full code is below:

<FORM name="MediaForm">
<SELECT NAME="VidChange" onChange="{document.MediaPlayer.FileName = document.MediaForm.VidChange.options[document.MediaForm.VidChange.selectedIndex].value}">
<OPTION VALUE="video/ceramica.avi">Select a New Flame Picture
<OPTION VALUE="video/pebble_and_driftwood.avi">Pebbles and Driftwood
</SELECT>
Loop:
<INPUT TYPE="checkbox" NAME="VidRepeat" onClick="{if ( document.forms.MediaForm.VidRepeat.checked == true){document.MediaPlayer.PlayCount = 999}else {document.MediaPlayer.PlayCount = 1 }}">
</FORM>

This way of setting parameters will fail or give a JavaScript error in Netscape which uses a different way of changing the parameters using get and set methods. The following examples are from the MSDN library show how to retrieve and set the FileName property from Netscape Navigator:

MediaPlayer.SetFileName("demo.avi");
var myTitle = MediaPlayer.GetFileName();

instead of the corresponding statements in Internet Explorer which are:

MediaPlayer.FileName = "demo.avi"
var myTitle = MediaPlayer.FileName

To write a script that works under both browsers one must check the browser type before accessing the properties. This page actually does it properly by calling a function when the onChange or onClick event happens which contains code to check if the Browser is Netscape then either change the value or call a SetXxxx() function. Rather than have too much confusing code on the page it is best to view the source to see what I have done.

More Media Player Documentation: There is a wealth of information on how to control the Microsoft Media Player on The Microsoft MSDN library site at http://msdn.microsoft.com/library/. The first caution is that it mostly refers to Version 7.1 whilst it is safer to code for Version 6.4. Version 7.1 uses a new and rather different Document Object Model via a different ClassID (CLSID) which is not compatible with 6.4 whilst it is safe the other way round if you use the older 6.4 CLSID which is given above which forces compatibility if 7.1 is installed. It is not possible to give a simple URL on MSDN - you currently need to navigate via menus to the MSDN Library -> Graphics and MultiMedia -> Windows Media Technology -> Windows Media Player 7.1 then back to 6.4.

Browser Detection

It is clearly not satisfactory to have code which can produce javaScript errors or even crash Netscape which is not very robust so the final code must use JavaScript to identify when the Browser is Netscape Navigator. Identification of the Browser could be the topic of a whole page in its own right but in this case we are only trying to restrict the page to the most common browsers. Again we have to resort to JavaScript and the properties of the the navigator object can be used. The following table shows the full set of navigator properties available for your browser.

Properties of the navigator object: The only property which is present in all browsers and which provides sufficient information to extract a version number is the appVersion property. For Internet Explorer one needs to extract the version from the characters following MSIE. The table of properties above is generated using a JavaScript for(var Property_Variable in object) {statements} loop for the navigator object - view the Source Code of this page to find out how to use this very useful technique for debugging or just listing the available properties of an object. I use the following JavaScript to pull out the full version of MSIE in use.

This delivers full_version as

for your browser which allows us to select only Internet Explorer Browsers which are greater than say 5.0.

We are now getting close to being able to deliver what is required. The secret is to use the JavaScript to identify the Browser and then selectively write the HTML code for the page using a series of document.writeln("HTML string") statements - remember to put a \ escape character in front of any " quotes to avoid some very strange problems!

Passing Parameters to the Popup Window.

This is the last leg in the creation of the Video Player for the web site. We now have sufficient code to write the popup page but we still need to be able to pass the name of the first video file to it. The secret here is to use the search property of the window location object which contains the string in the page address following a trailing ? ie http://www.pcurtis.page.htm?video_file.avi will have the value of window.location.search of video_file.avi which is just the mechanism we require. It should be noted that this only seems to work in the more recent browsers MSIE 5+ and Netscape 4+ so one needs to check before extracting the string. I am using code such as the following to extract the parameter and split it up into a filename and extension to allow different media formats to be selected in the future:

var full_file_name = ""
var file_type = ""
var file_body = ""
if (location.search) {
   full_file_name = location.search.substring(1)
   var ext_start = full_file_name.indexOf(".")
   if (ext_start != -1) {
      file_type = location.search.substring(ext_start + 1)
      file_body = location.search.substring(1 , ext_start + 1)
   }
}

The following table shows the properties of the location object:

Conclusion and Summary

The fragments of code above should be sufficient to allow someone who has a little familiarity with JavaScript to handle video files using the Windows Media Player. Click for the final result the Flame Pictures at Theale Fireplaces You will find one last trick is that it will come back into the foreground when it has finished loading but you will have to examine the code to find out how I did that!