Video on web pages

Introduction

When I created this page in November 2003 it was difficult enough to display video on web pages. When I first wrote this page, the best method seemed to be to use the "embed" tag. By the time I updated the page in February 2007, a new wave of video capable smart phones were hitting the market and catering to these devices added to the problems.

It wasn't all bad news though. In 2004, work started on the HTML 5 standard and the new "video" tag promised an easier way of providing video to all these new devices. There were several problems. The browser manufacturers couldn't or wouldn't agree to which video format to use with some plumping for MP4 ( H264 video codec and AAC audio codec), some for WebM (VP8 video codec and Vorbis audio codec) and others for Ogg (Theora video codec and Vorbis audio codec). Most browsers seem to moving in the direction of using MP4. In 2010, Apple announced it was dropping Flash support on all of its devices and in April 2010, Steve Jobs issued his now famous open letter regarding the decision.

Another problem is that despite the promise of an easier way of adding video to web pages the HTML 5.2 standard will not be ready for recommendation until at least 2016. Some people argue that the HTML 5 standard will never be finished and that this is not a bad thing. This is not much of a problem as most browsers have been incorporating at least part of the HTML standards, including the "video" tag since 2009.

A bigger problem is that there still a lot of users that cannot or will not upgrade to new browsers. In October 2014, I was writing a new video laden web page and one of the computers it had to run on was still loaded with Internet Explorer 8 which was launched on March 19, 2009 and Firefox version 12, which was launched on April 24, 2012. We have other computers that need to be installed with IE6 which was launched on August 27, 2001. IE is now on version 11 (October 17, 2013) and Firefox is on version 32 (September 2, 2014).

Cross browser compatible code

One of the best solutions I've found to embedding video on a web page that is cross browser compatible is on Kroc Camen's site, camendesign. This is HTML 5 with flash fallback. A version ' of the code that uses an internal Flash video player can be found on the Dev Metal site. There's also a useful video code generator on the Video for Everybody site.

Video Converters

Nowadays I use mostly Mira Video Converter. or a mixture of Format Factory and the VLC Media Player, which despite it's name includes a good video transcoder. I used to use Super Video Converter for almost everything but sometimes the program would crash or produce garbled output.

As with any software of this sort there are plenty of other converters around. About Technology lists 33 of them and Tech Radar tested 12 of them.

Whatever you use, remember that you will four formats, MP4 ( H264 video codec and AAC audio codec), some for WebM (VP8 video codec and Vorbis audio codec) and others for Ogg (Theora video codec and Vorbis audio codec) and SWF. You may be able to get away with just two, MP4 ( H264 video codec and AAC audio codec) and SWF.

Players

You may also need an internal flash player. I like JW Player, but again there are loads available, Instant Shift lists 21 of them.

JW Player used to be free. The last version that I know of that was free and not watermarked was 4.3.132. That can be downloaded here. This version was free for non-commercial use. If you want to use it for commercial use then you must buy the latest version from JW Player.

You may also want to investigate the swfobject project and the code generator.

Embedding

Most video hosting sites, such as YouTube, Vimeo and LiveLeak, provide a code to allow you embed videos hosted on their sites onto yours. It's quick and easy, you don't need any of your own coding, you don't have to create multiple transcodes of the video and you're using their bandwidth and server space. Most video hosts have an "Embed" or "Share" links somewhere near the video. Some sites have slightly more options than others. Vimeo for example will let you control the color of the player controls.

A Project

Here's a project I came up with. I want a block of videos as thumbnails. When the mouse is hovered over the thumbnails, a description of the files appears next to them. When a thumbnail is clicked on it opens and begins to play. The video description will appear alongside the playing video.

Search keywords for:

Method

1) Create MP4, WebM, Ogg and SWF versions of your videos

2) Create thumbnails of the videos. I used 200 x 133 pixels (image ratio 1.5:1). The images should have the same filename as the videos.

3) On the page 5 new elements. Two divs side by side. The left one is for playing the videos and I've given the ID of "play", the right one is for the description and I've ID'd that "desc". Under those two is a paragraph tag for a simple text box to as a search box. There are two buttons, one named "find" and the other named "Clear".Under that are another divs, one to hold the thumbnails, which I've given the ID of "thumbs" and another to hold the description of the video when the thumbnails are hovered over. I've given that the ID of "preview".

"play" has a width of 640px and the content is centered.
"desc" has width of 440px.
"thumbs" has a width of 660px and the content is centered.
"preview" has a width of 420px.

4) Create a JavaScript file, which is just a plain text file, which I called video.js, which can be created in Notepad and create a Javascript array of objects to hold information about the videos. I put it in a directory named "js". I just used the filename, title, width (at 320px height), keywords and a description. I called the function to load the array loadArray and the array itself vidArray.

Remember that if HTML is included in the JavaScript array then it must be delimited properly. Quotes are used in the array itself, so those cannot be used in the HTML. Use single quotes instead. Quotes that need to be printed can be replaced by " or " or escaped with / in front of it, such as \".

5) The HTML file needs to where to find the functions so the line

is added to the HEAD section of the HTML file.

6) The vidArray has to be loaded ready for the rest of the HTML page has loaded so the line

is added straight after the BODY tag.

7) The procVids function is called straight after the divs in the HTML are defined. You cannot call a script that references a HTML element until that element has been defined in the HTML. An error will result if this is tried. procVids is also called when the "Find" button for the search box box pressed. What the function does is check what text is in the search box then steps through the array looking for that text in the "keywords" object. If it is found, or the search box is empty then a boolean variable named "match" is set to true and the associated thumbnail is displayed.

When procVids writes the thumbnails it also provides several actions to the thumbnail and gives them a variable from the index number of the array. The actions are for onmouseover, onClick and onmouseout.

8) The function named vidDesc is called on onmousever and onClick. For onmouseover the video description is displayed in the video "preview" div next to the thumbnails. For the onClick action the video is displayed in the video "play" div and the description appears in the "desc" div next to that. The onmouseout event clears the video description from the "preview" div. In order for the functions to work properly they pass the index number of the current video in the array to each other.

9) The changeVideo function is the code to play the video in a JavaScript form. It is basically the code from Dev Metal and Video for Everybody sites using JavaScript and variables to pass the information from the array.

It is important you add the video tags in this order WebM, MP4, then Ogg because surprisingly, versions of Chrome have problems with some MP4 files, even though they are encoded the same way as MP4 files that will play.

10) It may sound complicated, but it really is not. All the functions keep track of what video clip is being processed by passing the array index of the clip. Everything else is really just using HTML in a form that can be written using JavaScript. Apart from the search feature, JavaScript has been used to simply replace reams of HTML. The JavaScript file is in js/video.js

Tips

When testing the code it is important to make sure the fallback is working properly. For this reason it is best that once complete all the <video> tag material is commented out and just the player code is shown. Once everything is working the <video> material can be uncommented and used again.

For some reason most of the JW Player controls stop working if a swf file is used in the flashvar section. For this reason I have used the mp4 file when using it. Although I am using version 4.3 here, this also happens to the licensed version 5.1 I use.

Also in the flashvar section it is best to specify the full path to the video file as it sometimes will not play at all.

This page as at February 10, 2007

This part of the page is merely for historical purposes. Google Chrome, on September 1, 2015, and both Microsoft's Internet Explorer and Edge stopped support for Netscape Plugin Application Programming Interface (NPAPI) plugins for security reasons. Firefox is due to stop support for NPAPI plugins by the end of 2016.

This file is played using the following code

<EMBED src="dodo.mpg" height="320" width="400" autostart="false">
<noembed>Your browser can't read the video file.</noembed>

The file below is played using the following code

<EMBED src="bad_day.mpeg" height="160" width="235 autostart="false">
<noembed>Your browser can't read the video file.</noembed>

Video