Video on web pages using HTML

Playing video on a page is one of the more troublesome disciplines. At the moment, there is no agreement on a format that all browsers should be able to play, and no browser can play all formats without the use of plug-ins (plug-ins, for those who don't know this, are small separate programs that are installed as ad-ons on the browser). On top of this, some browsers have restrictions on which formats they can play, even with plug-ins, e.g. the Flash format that, as a general rule, can't be played on several browsers due to problems with security.

Because of the may discussions about format and because some companies have restrictions on their software, the most robust solution is having the video uploaded in several formats and have a page set-up for the browser to find a format it can play. In native mode (i.e. without the aid of plug-ins), if no required plug-in has been installed. It is, however, a somewhat time and server space consuming solution, and thus only a viable solution if you only have a few videos on the site. For most pages, deciding on one format is the most sensible solution, leaving the visitors to use plug-ins, if necessary.

For embedding video, three tags are available: IFRAME, EMBED and VIDEO. The VIDEO tag came with HTML 5 and has some advantages compared to IFRAME and EMBED, because it is specifically for video, whereas IFRAME and EMBED are general frames for inserting files. On the other hand, it does have some issues in regards to older browsers. Choosing one or the other tag is a matter of what you need, but for most users, IFRAME will be the most convenient solution by far.

If we start with the VIDEO tag, it consists of VIDEO and SOURCE, where SOURCE is where you specify file name and file type. The tag has the advantage that you can put in several file formats, so if the browser can't play the first format being specified, it goes on to try the next format on the list. The tag also allows for an error message, ig the browser can't read any of the availble formats. For the video TestMovie, available in the three formats .avi, .ogv and .mp4, the code looks like this:



Internet Explorer version 8 and before can't read the VIDEO tag, so for these browsers you will see the message "The video can't be played on this browser". These earlier version if Internet Explorer aren't used very much now, but if you want to, you can make a small workaround for handling this. For this we will use a slightly dirty trick, mixing some not-quite-standard-code into the VIDEO tag.

Internet Explorer is one of the browsers supporting a conditional code called <!--[if ]>, where you can place your code between your if and endif, only to be executed if the conditions are met. In this case we will use the tag EMBED, and only if it is Internet Explorer 8 or earlier. Then the code looks like this:



Right now we are stuck with the VIDEO tag not understanding EMBED and thus with Internet Explorer 8 and before, you will see the error message that the video can't be played while the user is watching the movie. Therefore, it is not a pretty solution, but at least it does allow showing the movie on old browsers, if you want to be able to do that, while using the VIDEO tag.


The two tags IFRAME and EMBED are really simple to work with, and for a lot of people, this will be an excellent solution. For the file TestMovie.avi, the two solutions looks like this:



Of the two options, IFRAME is recommended in general, as EMBED is being phased out, but until this happens, there is no practical difference between the use of IFRAME and EMBED as a solution.

One way of getting around the problem with videos is uploading the video to sites like YouTube and Vimeo use widgets. Basically you make an IFRAME containing a link to the video, and then the site where you have the video will take care of choosing player etc.

An example on YouTube's code for embedding looks like this:


The code doing the same thing Vimeo will look like this:


Here you should be aware that the two widget generators are making a mistake, as IFRAME in HTML 5 does not support the attribute FRAMEBORDER. Both that and HEIGHT and WIDTH have to be specified using STYLE, so the two codes looks like this:


The choice between widgets or not, depends on your general set-up. You relinquish some control over the videos, but gain some additional exposure on sites like YouTube and Vimeo, and if you have the videos on one or more sites for video sharing already, it makes good sense to take advantage of the reduction in time and server space requirements by using a widget.