Video on Web Pages

Introduction

When I created this page in November 2003 it was difficult to embed objects just as video and audio on web pages. This page takes a look back at how embedding was done and why and how it has changed.

Embedding Today

Embedding objects on web pages today is easy, especially for audio and video files. The most popular tags for doing this are:

Audio: MP3 is usual audio format used, but modern browsers also support FLAC, OGG, and WAV formats - W3C Wiki, MDN Web Docs, W3Schools

Iframe - Almost anything can be shown in an iframe but this is the default method for embedding video from YouTube and Vimeo. MDN Web Docs, W3Schools.

Most video hosting sites, such as YouTube, Vimeo and ItemFix, 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.

Video - MP4 is usual audio format used, but modern browsers also support the WebM format - MDN Web Docs, W3Schools

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 27 of them.

Whatever you use, remember that you will have three 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).

Some History

When I first wrote this page in 2003, the best method was to use the "embed" tag (MDN Web Docs, W3Schools). This relied on a program external to the browser to play or run the embedded content. One of the most common of these external programs was Apple's Quicktime that supported a number of audio and video formats. Other programs to play other file types were also required such as Java Jar and Class files, Active X, and Shockwave Flash (SWF) files.

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.

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. As browsers became more capable and flaws in the external programs were found, the embed tag was depreciated and should no longer be used. Netscape Plugin Application Programming Interface (NPAPI) plugins which had been around since 1995, were being phased out beginning in 2013 and gone from major browsers in 2015.

Another problem was 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.

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 (Internet Archive).

Microsoft Silverlight was another framework for creating and streaming multimedia, graphics, and animation. It was introduced in 2007 and Micrisoft removed support for it in 2011. No major browser has supported it since 2017.

A bigger problem is that there still a lot of users that could or would 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). Since the biggining of 2023, I no longer fully support Internet Exploter version 11 as Microsoft released Edge in 2015, replacing all versions of Internet Explorer in 2023.

None of the above matters much now in December 2023, as the HTML 5 sub-versions were all scrapped in January 2021 and HTML became a "living standard."

In 2003, this would have worked provided the page visitor had the appropriate video plugin installed, such as Quicktime as that supported mpeg files...:

As seen below, it no longer does because mpegs are not natively supported by browsers, and instead gives a "This plugin is not supported" message:

Your browser cannot read the <a href="bad_day.mpeg" target="_blank">video file</a>. Click the link to view it.

In December 2023, although depreciated and shouldn't be used, the embed tag still works without plugins of any type if the audio or video file is of a type natively supported by the browser. In reality that means MP3 files for audio and MP4 for video as there are still compatability problems with other formats.

This piece of HTML seems to work fine:

Your browser cannot read the video file.

Cross-browser Compatible Code

Starting in 2010, several pages appeared offering cross browser compatible video playing. One was 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 was also a useful video code generator on the Video for Everybody site.

Players

In December 2023, I haven't used an embedded video player for some years, and this section was written in 2003. You may also want to investigate your own video player on your website. I liked JW Player, but again there are loads available, Instant Shift listed 21 of them in 2010.

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. Before it was purchased by Google in October 2006, YouTube videos were streamed using JW Player. 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 now abandoned swfobject project. Flash itself was depreciated and then abandoned because of security concerns in 2020.

A Project

Here's a project I came up with, unfortunately it is not very responsive, and may overflow small screens. 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: <script type="text/javascript" src="js/video.js"></script>; 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: <script type="text/javascript">loadArray();</script>; 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.