Audio and Video in Web Pages

Overview

We can do a lot of interesting and useful things with web pages using just text and images. Sometimes, however, it would be nice to include a sound byte or video clip to better explain a concept or demonstrate a principle - or perhaps simply to entertain. Embedded multimedia is now an integral part of the online presence of many broadcasters, news publishers, manufacturers, retailers, academic and scientific institutions - in fact just about any kind of large organisation.

Today, almost anyone can include audio-visual content in their web pages thanks to the availability of low-cost sound recording equipment, camcorders, and digital cameras. There is also a huge range of free and open source sound and video editing software available online. If you don't have the time or resources to create your own media, there are plenty of online sources that allow you to download copyright free audio-visual materials. In this page, we will show you how to embed audio and video files in your web pages.

In the early days of the World Wide Web, media files could not be displayed in web pages. Images were accessible on the web, but only via hypertext links. A linked-to image would typically be downloaded to the user's computer and viewed using a separate image viewer application. Then, in 1992, Marc Andreessen and Eric Bina completed development of the Mosaic web browser, which was released by NCSA in 1993. Mosaic introduced the <img> tag, which allowed images to be displayed inline with the text content of a web document.

Since that time, advances in web technology and the availability of high-speed Internet connections have made it possible to embed other forms of multimedia content, like audio and video, directly within a web page. Thanks to media streaming technology, web clients can now simultaneously download and play large media files without having to wait for the download to complete.

Before HTML 5 came along, it was necessary to install various "plug-ins" like Adobe's Flash Player or Apple's QuickTime in order to be able to play the media files embedded in a web page. The HTML 5 specification, which was first exposed to public scrutiny in 2008 and achieved "W3C Recommendation" status in 2014 after some fairly major changes, introduced the <audio> and <video> elements. Browsers implementing these elements had to be able to display audio and video content without the assistance of plug-ins.

This long-awaited development was driven partly by concerns over bugs and security vulnerabilities in the plugins themselves, and partly by the philosophy that the availability of web content should not be dependent on third-party software. Whether or not as a direct consequence, Adobe has announced it will end support for Flash Player in 2020 and Apple have already ceased support for the Windows version of QuickTime as of 2016.

Most industry players, including browser vendors, have now pledged their support for open HTML standards. Current versions of all popular browsers support the HTML 5 <audio> and <video> elements, and provide support for a number of audio and video file formats. Web developers still face potential problems in this respect, however, due to significant differences between the major browsers in terms of the audio and video codecs they support.

We will revisit the question of browser support for audio and video formats throughout this page. For now, you should simply be aware that not all browsers currently in use support the <audio> and <video> elements. Even if they do, they may not support your first choice of audio or video format. Your HTML code should therefore provide fallback options to cover this kind of situation, and we will discuss how this can be achieved.

Audio in web pages

It has been possible to play sounds in web pages for many years. When Microsoft released Internet Explorer 4.0 in 1997, one of the new features implemented was the <bgsound> element, which allowed developers to embed a background sound in a web page that would play when the page was opened. Apart from probably being not a very good idea in the first place, the <bgsound> element was never a part of the HTML specification, and was only ever properly implemented by Microsoft.

The <bgsound> element would typically be used to play a MIDI (short for Musical Instrument Digital Interface) file in the background when a web page was downloaded by a user. Somewhat surprisingly, and despite the fact that this element has long been considered obsolete, it appears to still work with Internet Explorer 11. We successfully tested the following code using IE 11 in Windows 10:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Background Sound</title>
  </head>

  <body>
    <bgsound src="https://www.technologyuk.net/assets/demo-audio/star-wars.mid">
    <div style="text-align: center;">
      <p>
        This page plays the Star Wars theme midi file in Microsoft Internet Explorer
      </p>
    </div>
  </body>
</html>

Needless to say, this doesn't work with any other browser, and it certainly wouldn't get past an HTML validator. Another (admittedly somewhat unsatisfactory) approach to playing a sound file from a web page is to include a hypertext link to the file in the page. The following code works in all the browsers we tested:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Linked Sound File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <p>
        Link to Star Wars theme midi file:
      </p>
      <p>
        <a href="https://www.technologyuk.net/assets/demo-audio/star-wars.mid">Star Wars theme (midi)</a>
      </p>
    </div>
  </body>
</html>

Google Chrome and Opera simply downloaded the midi file when we clicked on the link. Mozilla Firefox, Microsoft Internet Explorer, Microsoft Edge and Safari all asked us whether the file should be opened or saved. Choosing to open the file caused it to be played using the operating system's default media player (in our case, this was Windows Media Player). In short, the result of clicking on the link will be dependent on the browser and operating system in use. The illustration below shows the result of clicking on the link in Firefox.


Firefox asks the user what action it should perform

Firefox asks the user what action it should perform


The behaviour described is understandable, since the MIDI file format is not natively supported by any of the browsers we tried. What happens, though, if we use (almost) the same code as for the previous example, but this time set the link to point to an MP3 audio file? Here is the revised code:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Linked Sound File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <p>
        Link to JFK "Landing a man on the Moon" sound bite:
      </p>
      <p>
        <a href=https://www.technologyuk.net/assets/demo-audio/landing-man-on-moon.mp3 target="_blank">JFK "Landing a man on the Moon"</a>
      </p>
    </div>
  </body>
</html>

In this instance, Internet Explorer and the Windows version of Safari both behaved as they did previously. The remaining browsers (Firefox, Chrome, Edge and Opera) all opened the file in a separate tab (because we added target="_blank" to the link), each using its native audio control interface. The illustration below shows the result of clicking on the link in Chrome.


Chrome plays the audio track and displays its audio control interface

Chrome plays the audio track and displays its audio control interface


Another way to include audio in a web page is to use either the <object> element or the <embed> element, both of which you will find in the HTML 5 specification. If you look at the available online information available on the <embed> element, you will doubtless come across phrases like "new in HTML 5 . . ." This is true enough, although somewhat ironically the <embed> element was first introduced in 1995 with the release of Netscape 2.0.

Netscape's <embed> element was intended to specify an arbitrary data object. This could be just about any kind of data object - a sound file, a Java applet, a 3D animation, or even a spreadsheet - to be embedded within an HTML document. Despite also being supported by Internet Explorer 3+, however, the <embed> element never actually became part of the official HTML specification.

The <object> element was introduced in 1997 as part of the HTML 4.0 specification. Its purpose was to enable the inclusion of objects such as images, audio and video clips, Java applets and Flash animations in web pages. It was intended, among other things, to replace Microsoft's <bgsound> element and Netscape's <embed> element. Consider the following HTML code:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Embedded Sound File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <h1>Embedded Sound File (using <object>)</h1>
      <h2>JFK "All men are equal"</h2>
      <object type="audio/mp3" data="https://www.technologyuk.net/assets/demo-audio/all-men-are-equal.mp3">
        <param name="src" value="https://www.technologyuk.net/assets/demo-audio/all-men-are-equal.mp3">
        <param name="autostart" value="false">
      </object>
    </div>
  </body>

</html>

We tested the above code in various browsers and the results are interesting. The Windows version of Safari simply responds with the message "Missing Plug-in". Of the remaining browsers, Firefox, Chrome, Opera and Edge all display their audio control interface and play the sound immediately.


Firefox, Chrome, Opera and Edge display their audio control interface and play the sound

Firefox, Chrome, Opera and Edge display their audio control interface and play the sound


Internet Explorer 11 also displays its audio control interface, but does not start playing the audio file until we click on the start button. Essentially, IE ignores the <object> element's attributes and instead obeys the directives contained within the <param> elements enclosed within the <object> element. The other browsers simply ignore the <param> elements.


Internet Explorer 11 displays an audio control interface but does not immediately play the sound

Internet Explorer 11 displays an audio control interface but does not immediately play the sound


Now consider the following code, which employs the "new" HTML 5 <embed> element:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Embedded Sound File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <h1>Embedded Sound File (using <embed>)</h1>
      <h2>JFK "All men are equal"</h2>
      <embed type="audio/mp3" src="https://www.technologyuk.net/assets/demo-audio/all-men-are-equal.mp3" autostart="false">
    </div>
  </body>

</html>

What we have done here, essentially, is to replace the <object> element with the <embed> element. Notice that, unlike the <object> element, the <embed> element is empty (or void). When we tested the code with various browsers, however, we got exactly the same results as we did with the <object> element. Safari reported a missing plug-in, all of the other browsers opened their native audio control interface.

Once again, all of the other browsers except Internet Explorer started to play the audio file immediately. Interestingly, IE appears to obey the autostart="false" directive, despite the fact that the autostart attribute is not actually supported by HTML 5 for the <embed> element. If you remove this attribute, IE will behave just like the other browsers and play the audio file immediately.

The <audio> element

Now let's do things the HTML 5 way! We will use the <audio> element, which is new in HTML 5, to download and play a sound file. This is the preferred way of doing things, and produced the results we expected in the tests we carried out (on a Windows 10 machine) with all current versions of the browsers we have previously mentioned. Admittedly, we had to "tweak" the code a little for Internet Explorer 11. We also had to download and install the latest version of QuickTime for Windows in order to get Safari for Windows to respond appropriately to the presence of the <audio> element.

The code below creates a web page that displays an image and some text describing the Thrush-Nightingale (that's a small bird, for the non-ornithologists among you). It also displays an audio control interface that should enable the user to play an audio track consisting of a recording of the Thrush-Nightingale's song.

<html lang="en">

  <head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <title>AV Demo 01</title>
    <style>
      p {text-align: left; width: 80%; margin: 1em auto;}
      p.citation {font-style: italic;}
      p.credit {text-align: center; font-size: 83%;}
    </style>
  </head>

  <body>

    <div style="text-align: center;">
      <h1>The Thrush-Nightingale</h1>
      <p>
        According to Wikipedia:
      </p>
      <p class="citation">
        "The thrush nightingale (Luscinia luscinia), also known as the sprosser, is a small passerine bird that was formerly classed as a member of the thrush family Turdidae, but is now more generally considered to be an Old World flycatcher, Muscicapidae . . . It, and similar small European species, are often called chats. It is a migratory insectivorous species breeding in forests in Europe and Asia and overwintering in Africa. The distribution is more northerly than the very closely related common nightingale, Luscinia megarhynchos, which it closely resembles in appearance. It nests near the ground in dense undergrowth. The thrush nightingale is similar in size to the European robin. It is plain greyish-brown above and white and greyish-brown below. Its greyer tones, giving a cloudy appearance to the underside, and lack of the common nightingale's obvious rufous tail side patches are the clearest plumage differences from that species. Sexes are similar. It has a similar but more powerful song than that of the nightingale."
      </p>
      <br>
      <img src="https://www.technologyuk.net/assets/demo-images/thrush-nightingale.jpg" alt="Picture of Thrush-Nightingale">
      <p class="credit">Photograph: <a class="inline" href="https://unsplash.com/photos/Jo6hD4IvC9c" target="_blank">Andy Holmes</a> on Unsplash</p>
      <audio controls src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.webm" type="audio/webm">
        Your browser doesn't support HTML5 audio.
      </audio>
    </div>

  </body>
</html>

Copy and paste this code into a new file in your HTML editor, save the file as av-demo-01.html, and open the file in a web browser. You should (depending on your browser) see something like the following:


This page displays an audio control interface

This page displays an audio control interface


If you are using current versions of Google Chrome, Mozilla Firefox, Microsoft Edge or Opera you should see an audio control interface like the one in the illustration. The screenshot above was obtained using Firefox. If you are using one of the other browsers mentioned, the control interface might look somewhat different, but the basic functionality should be the same. The sound does not play automatically, but you will be able to play, pause, adjust the volume, and move the "read head" to a different part of the audio track using a slider.

We will be looking shortly at the important bits of code and see what they do (or at least, what they should do). Don't worry too much if the page is not working in your own browser yet. We'll tell you in due course how to make the necessary changes to the code to ensure that it will work.

Before we do that, we should perhaps point out that both the sound file and the image file used for this example were obtained from online sources, and are free of copyright or any other restrictions on their use, including the need for attribution. This raises a couple of issues concerning your use of materials obtained from online sources.

We suggest that you don't use media that you have downloaded from an online resource in your web pages unless you are absolutely sure that you are legally entitled to do so. We would also suggest that you credit the creator of the work if you can, even if it is not a strict requirement. This is a matter of common courtesy. It also encourages content creators to continue to contribute materials to free online repositories.

The audio clips used for the examples in this page were downloaded from Freesound, who describe themselves as ". . . a collaborative database of Creative Commons Licensed sounds." You can start downloading audio files from the Freesound database once you have set up a (free of charge) user account. You can also upload your own audio files to the site if you feel they would be of interest to others, although there is no compulsion to do so.

Let's look at what the HTML code actually does here. This is the critical block of code as far as our audio content is concerned:

<audio controls src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.webm" type="audio/webm">
  Your browser doesn't support HTML5 audio.
</audio>

The first thing to note is the use of the <audio> element. This element is new in HTML 5 and is what you should be using to embed audio content in web pages. We have used three attributes with the <audio> element. The first of these is the controls attribute. Use of the controls attribute causes the browser to display an audio control interface that allows the user to start, stop, or pause playback, move the playback head, or adjust the playback volume.

The src attribute takes as its value the the URL of an audio file - in this case a file called thrush-nightingale-birdsong.webm, which is hosted on the TechnologyUK web server. The .webm file extension indicates that this is a WebM file audio file. WebM is a relatively new media format for audio and video content intended specifically for the web. It seems to work with Firefox, Chrome, Opera and Microsoft Edge. Unfortunately, it is not supported by Microsoft Internet Explorer. Neither, by default, is the <audio> element. If you open the page with Explorer you will probably see something like this:


Microsoft's Internet Explorer does not support the HTML audio element by default

Microsoft's Internet Explorer does not support the HTML <audio> element by default


Note that Internet Explorer displays the message "Your browser doesn't support HTML 5 audio.", which is the message we hard-coded into our HTML, to be displayed in the event of the user's browser not supporting the <audio> element. We can fix the problem with Internet Explorer not handling the <audio> element by uncommenting the following line of code, which you can find inside the <head> element at the top of the document:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This code tells Internet Explorer to run in the highest mode available to that version of IE (as opposed to a compatibility mode). The IE=edge mode provides the highest level of support available for established or emerging industry standards, including HTML5.

Before opening the page with the Windows version of Safari, make sure that the QuickTime plugin is installed. All being well, you should see an audio control interface displayed, but you will not be able to play the audio file because Apple's QuickTime player codec does not support the WebM audio format.

You will find that you have the same problem with Internet Explorer, because IE doesn't support the WebM format either. We can do something about that by specifying fallback content. Before we do that, let's look briefly at some of the audio formats available to us.


Internet Explorer does not support the WebM audio format

Internet Explorer does not support the WebM audio format


Audio formats

The HTML 5 specification initially recommended that the HTML <audio> element should be restricted to supporting the free, open and royalty-free Vorbis audio compression codec used by the Ogg and WebM file formats, mainly because it was not the subject of a patent. The recommendation was abandoned in 2007 because, although Mozilla, Opera and Google supported these file formats, Apple and Microsoft would only support the Advanced Audio Coding (AAC) format and the MP3 audio coding format it was intended to replace.

Before we go any further, we should probably clarify the meaning of the terms: audio codec, audio coding format (or audio compression format), and audio container. An audio coding format is a specific way of representing audio data when it is stored (e.g. in a file) or transmitted (e.g. in a data stream). Most audio coding formats, though not all, also include some form of data compression.

An audio codec (the word codec is a contraction of coder-decoder) is a specialised hardware device or software program that converts audio data from one format to another. Hardware audio codecs are used to convert an analogue audio signal into a digital signal (for example in a recording studio), or to convert a digital data stream into an analogue sound wave (this is essentially what a CD player does).

Software audio codecs typically convert digital audio data from one digital format to another. A software audio codec will typically be used to encode raw digital audio data into a compressed audio format before it is written to file or transmitted as an audio data stream. The same audio codec is used to decode the compressed file or stream data.

An audio container is a file in which audio data is stored. A particular file format is usually designed to accommodate a particular audio coding format, although the same audio coding format may be found in more than one type of audio file. As well as the encapsulated audio data, the container will usually contain metadata (for example, the title of the audio track and the name of the artist or creator).

There are essentially three different kinds of audio coding format: lossless; lossy, and uncompressed. Uncompressed formats tend to be used with low-level audio application programming interfaces and digital-to-analogue conversion hardware because the encoding and decoding overhead for uncompressed formats is significantly less than that of compressed formats. The number of bits used to encode the audio data remains constant over time, even if there are prolonged periods of silence.

A lossless compressed format reduces the size of the audio data without losing any of the original information, which means that the compressed audio data can be restored to its original form. Data compression is achieved because periods of silence can be encoded using a relatively small number of bits, reducing the size of the audio file significantly (file size is typically about half that of uncompressed data formats).

A lossy compressed format reduces the size of the audio data in a variety of ways. One of the techniques used involves discarding some of the sound frequencies that the human ear can't normally detect. Other measures include converting very low frequencies to mono signals that take up less bandwidth, and discarding very quiet sounds that the listener is unlikely to notice. The overall effect is to reduce the overall number of bits needed to represent the sound.

As you might expect, lossy compression techniques necessarily involve a trade-off in which a greatly reduced file size is achieved at the cost of some loss of audio quality. The degree of compression achieved is usually proportional to the bit rate used - lower bit rates provide a higher compression ratio at the cost of a greater degradation in sound quality.

Lossy compression is essentially a one-way process, since some of the audio data has been discarded. The compressed audio can be uncompressed for playback purposes but the discarded data is gone forever; the audio file cannot be restored to its previous state. Nevertheless, lossy audio formats are invariably used for consumer audio because the greatly reduced file size means that far less bandwidth is required for their distribution (for example as MP3 files or as streaming audio).

We do not intend to provide a comprehensive list of audio file formats or provide details of the support provided for each format by various browser versions. This information is constantly changing, and is available from various online sources (including of course Wikipedia). The table below displays the results of the limited testing we carried out using current versions of popular web browsers running on a Windows 10 desktop computer.


Audio coding
format
Compression type Container and
MIME type
Browser Test
result
Linear Pulse Code
Modulation (LPCM)
Uncompressed WAV
(audio/wav)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
Free Lossless
Audio Codec
(FLAC)
Compressed (lossless) FLAC
(audio/flac)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
Ogg Vorbis Compressed
(lossy)
Ogg
(audio/ogg)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
MPEG-1 Audio
Layer III or
MPEG-2 Audio
Layer III (MP3)
Compressed
(lossy)
MP3
(audio/mp3)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
Advanced Audio
Coding (AAC)
Compressed
(lossy)
MP4
(audio/mp4)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
Opus Interactive
Audio Codec
(Opus)
Compressed
(lossy)
WebM
(audio/webm)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari

Browser versions used:

Google Chrome - 71.0.3578
Mozilla Firefox - Quantum 64.0
Opera - 57.0.3098.106
Microsoft Edge - 42.17134.1.0
Microsoft Internet Explorer - 11.472.17134.0
Safari - 5.1.7 (7534.57.2) with Quick Time plug-in version 7.7.9 (Windows versions)

As you can see from the table, if we want to be reasonably certain that our audio tracks will be played in current versions of all of popular browsers, we can use the MP3 or MP4 audio file formats. These are not the most compact file formats available however. If we want to ensure the most efficient possible results in terms of bandwidth consumption, and also be reasonably sure that our audio can be played (one way or another) in older browsers, we need to think about fallback content.

Fallback content (audio)

There are in fact two separate issues that we need to deal with when it comes to implementing fallback code for audio content. The first is the fact that not all browsers support the same audio coding formats, as we have seen. The second is that, although current versions of all of the major browsers support the HTML 5 <audio> element, there are still some older versions of these browsers in use that do not.

There are a number of things we can do to ensure that our audio content is available to all of our potential visitors. Let's consider the code we used in our Thrush Nightingale demo page:

<audio controls src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.webm" type="audio/webm">
  Your browser doesn't support HTML5 audio.
</audio>

We have specified the URL of the audio file we wish to play directly in the opening tag of the <audio> element, using the element's src attribute. This is OK if the user's browser supports both the HTML 5 <audio> element and the WebM audio file format. The file thrush-nightingale-birdsong.webm is relatively small and will download quickly.

Unfortunately, as we have already seen, Safari and Internet Explorer don't support the WebM format. Perhaps we should use the MP3 version of the file instead, since the MP3 file format is compatible with all modern browsers:

<audio controls src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" type="audio/mp3">
  Your browser doesn't support HTML5 audio.
</audio>

This code should work with the current versions of all popular browsers. But what about older browsers that don't support the HTML 5 <audio> element? At this point we should probably draw your attention to the text that appears between the opening and closing <audio> tags. This text will only display if the user's browser doesn't support the <audio> element.

This text constitutes one of our fallback options, because it at least allows us to inform the user that there is a problem, i.e. that their browser won't play HTML audio. We can do better than that though. We can offer the user a direct link to the file as follows:

<audio controls src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" type="audio/mp3">
  Your browser doesn't support HTML 5 audio, but you can still download the audio file <a href=" https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" target="_blank">here</a>.
</audio>

If the user's browser doesn't support the <audio> element, the user can at least download the file to their computer and listen to it using the system's default media player. For now, let's assume that the vast majority of our visitors are going to be using a browser that does support HTML 5 audio. That doesn't guarantee that it will support our chosen audio format.

It would be nice to be able to offer user agents a choice of formats, but the way we have written our code doesn't allow us to do this. Fortunately, there is an easy solution. Instead of using the <audio> element's src attribute to specify the URL of a single audio file, we can use multiple <source> elements between the opening and closing <audio> tags.

Each <source> element can be used to specify a different audio file, allowing us to specify a number of alternative sources for our audio content. The user's browser will look at each <source> element in turn, and load the first audio file whose format it supports. Our code will now look something like this:

<audio controls>
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.webm" type="audio/webm">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp4" type="audio/mp4">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" type="audio/mp3">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.ogg" type="audio/ogg">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.flac" type="audio/flac">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.wav" type="audio/wav">
  Your browser doesn't support HTML 5 audio, but you can still download the audio file <a href=" https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" target="_blank">here</a>.
</audio>

The available audio files are listed in order of file size, with the smallest (thrush-nightingale-birdsong.webm) at the top of the list, and the largest (thrush-nightingale-birdsong.wav) at the bottom of the list. Browsers that support the <audio> element will load the first file whose audio file format it supports. If not, it will simply display the fallback text, which offers the user a hypertext link to the MP3 version of the file.

Providing so many versions of the same audio file is probably way over the top. Remember that each audio file you add will take up disk space on your web server and involve you in extra work. The general consensus seems to be that all current browsers (and nearly all older browsers still being used in significant numbers) will support either MP3 or Ogg Vorbis. If this really is the case, we can safely reduce our code to the following:

<audio controls>
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" type="audio/mp3">
  <source src="https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.ogg" type="audio/ogg">
  Your browser doesn't support HTML 5 audio, but you can still download the audio file <a href=" https://www.technologyuk.net/assets/demo-audio/thrush-nightingale-birdsong.mp3" target="_blank">here</a>.
</audio>

To summarise, our fallback solution offers two versions of the same audio file (.mp3 and .ogg), at least one of which should be supported by the user's browser. If the user's browser doesn't support the HTML <audio> element (and we are probably talking about a tiny majority of users here), it will display the fallback text and the text-based link we have provided, letting the user know what the problem is and enabling them to download the MP3 version of the audio file.

Controlling audio playback

The majority of browsers in use today do support the HTML 5 <audio> element. Our examination of how to control audio playback will therefore concentrate on the attributes available for use with the <audio> element, most of which are related in one way or another to the appearance and behaviour of the audio control interface. The table below lists the attributes, and gives a brief description of each.


Attribute Description
autoplay If the Boolean autoplay attribute is specified, audio playback will begin as soon as possible after the page loads. Playback can start before the audio file has finished downloading.

We strongly recommend that you do not set this attribute; users often find it annoying when sound starts playing immediately after a page has loaded, especially if they are not expecting it.

If you feel you must use it, make sure you provide an audio control interface so that they can either reduce the volume or stop playback.
controls If the Boolean controls attribute is specified, the browser will display its default audio control interface to allow the user to control audio playback.

The user can typically adjust the volume, start, stop or pause playback, and move to a different position in the audio track.

It is also possible to create a custom audio control interface using client-side scripting (a discussion of how to do this is beyond the scope of this article).
loop If the Boolean loop attribute is specified, the audio track will be played indefinitely (when playback reaches the end of the track, it will automatically start again from the beginning).
muted The Boolean muted attribute indicates that the audio track should initially be muted (i.e. have its volume set to zero). If the muted attribute is not specified, its default value is false.
preload The preload attribute is used to specify whether or not the audio track is downloaded immediately after the HTML document is opened (i.e. preloaded). The preload attribute can take the following values:
  • none - the audio track should not be preloaded
  • metadata - only the audio file's metadata is preloaded
  • auto – the audio track should be preloaded
Using the preload keyword on its own has the same effect as using preload="auto". If the preload attribute is omitted altogether, the default behaviour is dependent on the browser implementation.

The W3C specification recommends that the default behaviour is set to preload="metadata". Note however that if the autoplay attribute has been specified, the audio file will be preloaded regardless of any value assigned to the preload attribute.
src The src attribute can be used to specify the URL of the audio file to be embedded in the document. This attribute is optional. You can instead specify audio files using one or more <source> elements between the opening and closing tags of the <audio> element.
type The type attribute specifies the MIME type or Internet Media Type of the audio file. It is used to tell the browser what kind of file is being specified.

For the Thrush-Nightingale demo page, the <audio> element's controls attribute tells the browser to display its default audio control interface, which we feel is perfectly adequate in most use cases. A more sophisticated user interface could of course be implemented using CSS and client-side scripting, but a discussion of how to do this is beyond the scope of this article.

In the original version of our code, we used the <audio> element's src attribute and type attribute to specify the URL and MIME type respectively of a single audio file. In the fallback version (see above), we removed these attributes from the <audio> element and instead specified the src and type attributes separately for each <source> element.

Video in web pages

As with sound, it has been possible to play video in web pages for many years. The main difference is that any file container used for video can contain both audio and video data. This complicates things somewhat, since each video clip we wish to embed in our web pages will potentially require two separate codecs - one for the audio (if present), and one for the video.

There is no video equivalent of Microsoft's <bgsound> element. We can however enable users to access video content from a web page simply by including a hypertext link to the video file. The following code works in all of the browsers we tested.

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Linked Video File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <p>
        Link to "Stones, Waves and Water" video file:
      </p>
      <p>
        <a href="https://www.technologyuk.net/assets/demo-video/stones.mp4">Stones, Waves and Water (.mp4)</a>
      </p>
    </div>
  </body>
</html>

The result of clicking on the link depends on the user's browser and operating system. On a desktop computer running Windows 10, current versions of Google Chrome, Mozilla Firefox, Opera and Microsoft Edge all open the video file in the current browsing context and play it. Microsoft Internet Explorer and Safari ask us whether the file should be opened or saved. If the user chooses to open the file, it will usually be played using the operating system's default media player.

The illustration below shows the result of clicking on the link in Firefox. Note that the video is displayed using the full width of the browser window, while the height is scaled accordingly. Chrome, Firefox, Opera and Edge all provide their own native video control interface. In each case, the controls are briefly displayed when playback begins, but are then hidden from view until playback is complete, unless the user moves the mouse pointer over the video.


Firefox opens the video and runs it in the current browsing context

Firefox opens the video and runs it in the current browsing context


We have already seen that audio files can be embedded in an HTML document using either the HTML <object> element or the revamped <embed> element, which according to some sources is "new in HTML 5" but which first appeared in Netscape 2.0, released in 1995. We can also use these tags to embed video files. Consider the following HTML code:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Embedded Video File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <h1>Embedded Video File (using <object>)</h1>
      <h2>"Countdown to Rocket Launch"</h2>
      <object type="video/mp4" data="https://www.technologyuk.net/assets/demo-video/rocket.mp4" height="270" width="480">
        <param name="src" value="https://www.technologyuk.net/assets/demo-video/rocket.mp4">
        <param name="autostart" value="false">
      </object>
    </div>
  </body>
</html>

We tried the above code in various browsers. The Windows version of Safari responded with the message "Missing Plug-in". Of the remaining browsers, Firefox, Chrome, Opera and Edge all displayed their video control interface and played the video immediately. Internet Explorer 11 displayed a video control interface, but would only play the video file when we clicked on the "Start" button.

As we have already seen, IE ignores the <object> element's attributes and instead obeys the directives contained within the <param> elements enclosed within the <object> element. The other browsers simply ignore the <param> elements.


Internet Explorer 11 only plays the video when the 'Start' button is clicked

Internet Explorer 11 only plays the video when the "Start" button is clicked


Now consider the following code, which employs the "new" HTML 5 <embed> element:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Embedded Video File</title>
  </head>

  <body>
    <div style="text-align: center;">
      <h1>Embedded Video File (using <embed>)</h1>
      <h2>"Countdown to Rocket Launch"</h2>
      <embed src="https://www.technologyuk.net/assets/demo-video/rocket.mp4" autostart="false" height="270" width="480">
    </div>
  </body>

</html>

Once again, we have done replaced the <object> element with the (empty) <embed> element. When we tested the code with various browsers, we got exactly the same results as we did with the <object> element. Safari reported a missing plug-in, all of the other browsers opened their native audio control interface, and all of the other browsers except Internet Explorer started to play the audio file immediately.

The <video> element

The recommended way of embedding video in a web page in HTML 5 is to use the <video> element which, like the <audio> element, is new in HTML 5. In fact, we can use the <video> element to download and play a movie clip in almost exactly the same way we used the <audio> element to download and play a sound file.

In the tests we carried out on a Windows 10 desktop computer, we found it to work with all current versions of the browsers we have previously mentioned. As with audio content, we had to "tweak" the code a little for Internet Explorer 11. It is also necessary for the latest version of QuickTime for Windows to be installed before Safari for Windows will respond appropriately to the presence of the <video> element.

The code below creates a web page that displays some text describing Panthera leo (otherwise known as the lion). It also includes a video control interface that should allow the user to play a short video showing a lioness taking a drink of water.

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AV Demo 02</title>
    <style>
      p {text-align: left; width: 80%; margin: 1em auto;}
      p.citation {font-style: italic;}
    </style>
  </head>

  <body>

    <div style="text-align: center;">
      <h1>"Lioness Drinking Water"</h1>
      <p>
        According to Wikipedia:
      </p>
      <p class="citation">
        "The lion (Panthera leo) is a species in the family Felidae; it is a muscular, deep-chested cat with a short, rounded head, a reduced neck and round ears, and a hairy tuft at the end of its tail. The lion is sexually dimorphic; males are larger than females with a typical weight range of 150 to 250 kg (330 to 550 lb) for the former and 120 to 182 kg (265 to 400 lb) for the latter. Male lions have a prominent mane, which is the most recognisable feature of the species. A lion pride consists of a few adult males, related females and cubs. Groups of female lions typically hunt together, preying mostly on large ungulates. The species is an apex and keystone predator, although they scavenge when opportunities occur. Some lions have been known to hunt humans, although the species typically does not."
      </p>
      <br>
      <video width="480" height="270" controls src="https://www.technologyuk.net/assets/demo-video/lioness.webm" type="video/webm" poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
        Your browser doesn't support HTML5 video.
      </video>
    </div>

  </body>
</html>

Copy and paste this code into a new file in your HTML editor, save the file as av-demo-02.html, and open the file in a web browser. You should (depending on your browser) see something like the following:


This page displays a video control interface

This page displays a video control interface


If you are using current versions of Google Chrome, Mozilla Firefox, Microsoft Edge or Opera you should see a video control interface like the one in the illustration. The screenshot above was obtained using Firefox. If you are using one of the other browsers mentioned, the control interface might look somewhat different, but the basic functionality should be the same. The video does not play automatically, but you will be able to play, pause, adjust the volume, move the "read head" to a different part of the video track using a slider, and put the video into full-screen mode.

We will be looking shortly at what the code does (or at least, what it's supposed to do), after which we'll examine some of the reasons why the code might not work for everyone, and see what we can do to make it work. Before we do that, we'd like to draw your attention to a couple of things. The first point we'd like to make is that although the video file used for this example were obtained from an online source, it is free of copyright and other restrictions on its use, including the need for attribution.

We have mentioned this before but please, don't use media in your web pages that has been downloaded from an online source unless you are sure that you are legally entitled to do so. If possible, credit the creator of the work, even if it is not a strict requirement. This is common courtesy, and encourages content creators to continue to make their work freely available.

The video clips used for the examples in this page were downloaded from Pexels Videos, who state in the "About Us" section of their website ". . . with Pexels Videos we . . . have a library with many great free videos you can use everywhere" You can start downloading video files from the Pexels database immediately, free of charge. You can also upload your own video files to the site if you feel they would be of interest to others, although there is no compulsion to do so. You will need to set up a (free-of-charge) user account before you can upload videos.

Let's look at what the important bits of code do here. This is the critical block of code as far as our video content is concerned:

<video width="480" height="270" controls src="https://www.technologyuk.net/assets/demo-video/lioness.webm" type="video/webm" poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
  Your browser doesn't support HTML5 video.
</video>

The first thing to note is the use of the <video> element. This element is new in HTML 5 and is what you should be using to embed video content in web pages. We have used several attributes with the <video> element. The controls attribute, as we have seen, causes the browser to display a video control interface that allows the user to start, stop, pause playback, move the playback head, adjust the playback volume or put the video into full-screen mode.

It is important to use the width and height attributes with the <video> element in order to be able to control the on-screen dimensions of both the video itself and the video control interface. These attributes are used to specify the width and height of the video's display area in pixels.

The src attribute specifies the URL of a video file - in this case a file called lioness.webm, which is hosted on the TechnologyUK web server. WebM, as we have seen, is a relatively new media format for audio and video content on the web that seems to work with Firefox, Chrome, Opera and Microsoft Edge. Unfortunately, it is not currently supported by Internet Explorer or Safari. If you open the page with IE you will probably see something like this:


Microsoft's Internet Explorer does not support the WebM media format

Microsoft's Internet Explorer does not support the WebM media format


The message "Your browser doesn't support HTML 5 video." is displayed if the user's browser doesn't support the <video> element. We have used the same "tweak" here that we used with the <audio> tag to make sure that Internet Explorer recognises the <video> element and will display a video control interface, even if it doesn't support the WebM video format. Here is the relevant code, which is located in the head of the HTML document:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The poster attribute specifies the URL of an image to be displayed before video playback starts, or in the event that the browser does not support the video's file format. You can essentially think of it as a kind of placeholder. It is an elegant way of dealing with browsers that cannot display the video itself; the image is displayed rather than just presenting the user with a blank video area.

The image we used for this purpose was created by taking a screenshot of the video and resizing it to match the size of our video area (480 × 270 pixels). This at least gives the user some idea of what the video is about, even if they cannot play the video itself. If you comment out the code for the poster attribute and then open the page in Internet Explorer once more, you will see something like this:


Using the poster attribute to specify a placeholder image prevents this kind of thing

Using the poster attribute to specify a placeholder image prevents this kind of thing


The Windows version of Safari will also display a video control interface providing you have the QuickTime plugin installed, but it won't play the video because Apple's QuickTime player codec does not support the WebM video format. We therefore need to find some other way of making our video content available to Internet Explorer and Safari users. Before we do that, let's take a brief look at some of the video formats available to us.

Video formats

The HTML 5 specification initially required there to be at least one video format that all user agents should support - preferably one that was free of any licensing constraints (the video format they had in mind was Theora, partly because it was not subject to any known patents). Unfortunately, browser vendors could not achieve a consensus on which video formats to support, and W3C subsequently abandoned the requirement, leaving browser vendors free to support whatever video formats they chose.

Coping with multiple video formats is complicated enough, but remember that we are now dealing with both audio and video coding formats in the same container, which means that we could potentially be dealing with any number of possible permutations. Fortunately, we can usually narrow our choices down to three widely used video file formats - MP4, Ogg and WebM.

A detailed analysis of browser support for the various video file formats is beyond the scope of this article. We will however share with you the results of testing our "Lioness Drinking Water" example using current versions of popular web browsers running on a Windows 10 desktop computer. The results are shown in the table below.


Audio and video
coding formats
Container and
MIME type
Browser Test
result
H.264 or MPEG-4 Part 10,
Advanced Video Coding
(MPEG-4 AVC)/
Advanced Audio Coding
(AAC)
MP4
(video/mp4)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
VP8 / Ogg Vorbis,
VP9 / Opus
WebM
(video/webm)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari
Ogg Theora /
Ogg Vorbis
Ogg
(video/ogg)
Chrome
Firefox
Opera
Edge
Internet Explorer
Safari

Browser versions used:

Google Chrome - 71.0.3578
Mozilla Firefox - Quantum 64.0
Opera - 57.0.3098.106
Microsoft Edge - 42.17134.1.0
Microsoft Internet Explorer - 11.472.17134.0
Safari - 5.1.7 (7534.57.2) with Quick Time plug-in version 7.7.9 (Windows versions)

As you can see from the table, if we want to be reasonably certain that our video will play in current versions of all popular browsers, we could just use the MP4 video file format, which is currently more widely supported than the Ogg file format (but not as compact as the WebM file format).

There is however another factor to consider, which is that even though the current version of a browser supports a particular video file format, future versions may not. We will look at why this is the case in a little more depth later. For now, let's take a brief look at the available video file formats in slightly more detail.

Fallback content (video)

As with audio, there are two issues we need to think about when it comes to implementing fallback code for video content. The first is that not all browsers, as we have seen, support all video coding formats. The second is the question of what we do in the case of older browsers that don't support the HTML 5 <video> element.

Let's deal with the question of video coding formats first. Just to remind you, here is the code we used in our "Lioness Drinking Water" example:

<video width="480" height="270" controls src="https://www.technologyuk.net/assets/demo-video/lioness.webm" type="video/webm" poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
  Your browser doesn't support HTML5 video.
</video>

As you can see, we have specified the source file for the video directly within the opening <video> tag. This will work for browsers that support the WebM video file format, but as we have seen that doesn't currently include Internet Explorer or Safari. We can get around this problem quite easily, however, by specifying multiple video file formats using the <source> element inside the <video> element - just as we could do with audio content.

The current consensus seems to be that the MP4 and Ogg video file formats cover all bases. On the other hand, the WebM format usually produces significantly smaller files, which means faster download times and lower bandwidth consumption. We will use the following modified version of our HTML code to offer all three options:

<video width="480" height="270" controls poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.webm" type="video/webm">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.ogv" type="video/ogg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.mp4" type="video/mp4">
  Your browser doesn't support HTML5 video.
</video>

This approach works in all current versions of the browsers we have previously mentioned, although providing three versions of the same video could be considered somewhat inefficient. Most sources we have come across suggest that offering MP4 and Ogg is sufficient to cover all current browsers and any older browsers still being used in significant numbers, so we could reduce our code to the following:

<video width="480" height="270" controls poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.ogv" type="video/ogg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.mp4" type="video/mp4">
  Your browser doesn't support HTML5 video.
</video>

Keep in mind that each additional video file you provide will take up disk space on your web server. Creating multiple versions of your video files could also involve a lot of extra work, especially if your website features a large number of video clips.

This text we have placed inside the <video> element constitutes another fallback option. It will be displayed if - and only if - the user's browser doesn't support the HTML 5 <video> element. This at least allows us to inform the user that their browser won't play HTML video. We can do better than that, however. As we did with the <audio> element, we can include a hypertext link within the text that enables the user to download the video file:

<video width="480" height="270" controls poster="https://www.technologyuk.net/assets/demo-images/lioness-poster.jpg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.ogv" type="video/ogg">
  <source src="https://www.technologyuk.net/assets/demo-video/lioness.mp4" type="video/mp4">
  Your browser doesn't support HTML5 video, but you can still download the video file <a href=" https://www.technologyuk.net/assets/demo-video/lioness.mp4" target="_blank">here</a>.
</video>

In the increasingly unlikely event that the user's browser doesn't support the HTML 5 <video> element, the link will automatically be displayed, allowing the user to download the video file and play it using the system's default media player.

Controlling video playback

The majority of browsers in use today do support the HTML 5 <video> element. Our examination of how to control video playback will therefore concentrate on the attributes available for use with the <video> element, most of which are related in one way or another to the appearance and behaviour of the video control interface. The table below lists the attributes, and gives a brief description of each.


Attribute Description
autoplay If the Boolean autoplay attribute is specified, media playback will begin as soon as possible after the page loads. Playback can start before the video file has finished downloading.

We strongly recommend that you do not set this attribute if the video has an audio track; users often find it annoying when sound starts playing immediately after a page has loaded, especially if they are not expecting it.

If you feel you must use it (for example, if you want your page to feature a background video), either provide a video control interface so that the user can reduce the volume or stop playback or use the muted attribute.
controls If the Boolean controls attribute is specified, the browser will display its default video control interface to allow the user to control video playback.

The user can typically adjust the volume, start, stop or pause playback, mute the sound, move to a different position in the video, or display the video in full-screen mode.

It is also possible to create a custom video control interface using client-side scripting (a discussion of how to do this is beyond the scope of this article).
height Sets the height of the video display area (in pixels). Note that the video's original aspect ratio will be maintained, even if the width and height attributes specify a different aspect ratio. The browser will use either the height attribute or the width attribute to size the display area, depending on which of the two produces the smallest display area. If neither height nor width is specified, the video display area will match the actual dimensions of the video.
loop If the Boolean loop attribute is specified, the video clip will be played indefinitely (when playback reaches the end of the video, it will automatically start again from the beginning).
muted The Boolean muted attribute indicates that the video's soundtrack (if present) should initially be muted (i.e. have its volume set to zero). If the muted attribute is not specified, its default value is false.
poster The poster attribute is used to specify the URL of an image that will be displayed before the video is played, or that will be displayed instead of the video if the specified video file is missing, or is encoded in a format that the browser does not support. Ideally, the image should be a still image taken from the video, or at least be related to the video's content in some way.
preload The preload attribute is used to specify whether or not the video is downloaded immediately after the HTML document is opened (i.e. preloaded). The preload attribute can take the following values:
  • none - the video should not be preloaded
  • metadata - only the video file's metadata is preloaded
  • auto – the video should be preloaded
Using the preload keyword on its own has the same effect as using preload="auto". If the preload attribute is omitted altogether, the default behaviour is dependent on the browser implementation.

The W3C specification recommends that the default behaviour is set to preload="metadata". Note however that if the autoplay attribute has been specified, the video will be preloaded regardless of any value assigned to the preload attribute.
src The src attribute can be used to specify the URL of the video file to be embedded in the document. This attribute is optional. You can instead specify video files using one or more <source> elements between the opening and closing tags of the <video> element.
width Sets the width of the video display area (in pixels). Note that the video's original aspect ratio will be maintained, even if the width and height attributes specify a different aspect ratio. The browser will use either the height attribute or the width attribute to size the display area, depending on which of the two produces the smallest display area. If neither height nor width is specified, the video display area will match the actual dimensions of the video.

In the original version of our "Lioness Drinking Water" page, we have used the width, height, src, poster and controls attributes with the <video> element.

The controls attribute instructs the browser to display its default video control interface, which is perfectly adequate in most cases. The size of the video display area is set using the width and height attributes, and the poster attribute specifies an image file (lioness-poster.jpg) to be used as a placeholder (or "poster") for the video.

The src attribute defines the URL of the video file. Note, however, that we later removed it from the <video> element's opening tag in favour of specifying alternate video source files inside the <video> element using the <source> element. This allows us to provide fallback content for browsers that do not support our first-choice video coding format.

A more sophisticated user interface could of course be implemented using CSS and client-side scripting, but a discussion of how to do this is beyond the scope of this article.

Using video as a background

Using a video as a background for a web page can sometimes be quite effective. In a way, it's very much like using an image as a background, except that the image in this case is moving. A well-chosen video background can set the tone for your web page and will almost certainly get your visitors' attention. There are however a few things to consider before you proceed.

First of all, although video could work really well as a background for your home page, or for the first page in a particular section of your website, it would be counter-productive to use it in a page that is high in informational content. If you want your visitors to concentrate on your deathless prose or astoundingly inciteful scientific analysis (or whatever), you don't really want to distract them with a video, even if it does look rather good!

When you feel that a background video would really add something to your web page, choose a video clip that is relevant to the content of your page or the overall theme of your website. There are also a few practical guidelines you should follow:

The following HTML code creates a web page that has as its background a video of water lapping over pebbles. The page displays the poem "Sea Pebbles: An Elegy" by Dana Gioia. We have used styles here to make sure that the video always fills the entire screen, and also to ensure that the <div> . . . </div> tag set that encloses the page content completely overlays the background video.

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AV Demo 03</title>
    <style>
      #bgvid {position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%;}
      #wrapper {position: fixed; right: 0; top: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5); color: #ffffff; overflow-y: auto; text-align: center;}
      a {color: #ffffff;}
      a:hover {color: #ccccff;}
    </style>
  </head>

  <body style="padding: 0; background-color: #000000;">
    <video autoplay muted loop id="bgvid">
      <source src="https://www.technologyuk.net/assets/demo-video/stones.mp4" type="video/mp4">
      <source src="https://www.technologyuk.net/assets/demo-video/stones.ogv" type="video/ogg">
    </video>

    <div id="wrapper">
      <h1>Sea Pebbles: An Elegy</h1>
      <h2>By <a href="https://www.poetryfoundation.org/poets/dana-gioia" target="_blank">Dana Gioia</a></h2>
      <p style="font-size: 1.5em;">
        My love, how time makes hardness shine.<br>
        They come in every color, pure or mixed<br>
        gray-green of basalt, blood-soaked jasper, quartz,<br>
        granite and feldspar, even bits of glass,<br>
        smoothed by the patient jeweller of the tides.<br>
        <br><br>
        Volcano-born, earthquake-quarried,<br>
        shaven by glaciers, wind-carved, heat-cracked,<br>
        stratified, speckled, bright in the wet surf—<br>
        no two alike, all torn from the dry land<br>
        tossed up in millions on this empty shore.<br>
        <br><br>
        How small death seems among the rocks. It drifts<br>
        light as a splintered bone the tide uncovers.<br>
        It glints among the shattered oyster shells,<br>
        gutted by gulls, bleached by salt and sun—<br>
        the broken crockery of living things.<br>
        <br><br>
        Cormorants glide across the quiet bay.<br>
        A falcon watches from the ridge, indifferent<br>
        to the burdens I have carried here.<br>
        No point in walking farther, so I sit,<br>
        hollow as driftwood, dead as any stone.<br>
      </p>
    </div>
  </body>
</html>

The background colour of the <div> element has been set to a semi-transparent black, which has the effect of toning down the background video so that the foreground text stands out against it. In case the video cannot be loaded for some reason, we have set the background colour of the <body> element to black for the same reason.

Copy and paste this code into a new file in your HTML editor, save the file as av-demo-03.html, and open the file in a web browser. You should see something like the following:


We can use a video as a background for a web page

We can use a video as a background for a web page


More about standards

Browser vendors were at first slow to support the HTML 5 <audio> and <video> elements because they could not agree amongst themselves about which audio and video coding formats to support. To a great extent, and despite the fact that the <audio> and <video> elements now enjoy almost universal browser support, there is still no agreement on this issue.

The W3C HTML 5 specification initially required user agents, as a minimum, to support the Theora video and Vorbis audio coding formats, with Ogg as the common container format. Once it became apparent that this was not going to happen, W3C dropped the requirement from the HTML 5 specification. Browser vendors are thus free to choose which audio and video formats they support.

This means that there is no guarantee that a particular file format will be supported by future versions of a particular browser, even if it is supported by the current version of that browser. Google chrome, for example, announced in 2011 that they would be discontinuing support for the H.264 video coding format "within months". Although this has not happened yet (January 2019), there is a real possibility that future versions of Chrome will not be able to play MP4 video files.

From W3C's viewpoint, the ideal outcome would be agreement among key industry players on a set of open, non-patented and royalty-free audio and video codecs that meet a minimum set of technical requirements in terms of compression ratios, streaming characteristics, and sound and image quality. Unfortunately, we are still a long way from seeing the realisation of this goal.

The introduction of the <audio> and <video> elements in HTML 5, rather than encouraging browser vendors to seek common ground, seemed instead to polarise them into two opposing camps. Microsoft and Apple initially threw their weight behind ISO/IEC-defined (but patented) formats, including H.264, AAC and MP3. Mozilla and Opera opted for open and royalty-free formats such as Ogg Theora and Ogg Vorbis. Google was the only major player to support all of these coding formats almost from the outset.

The entire debate essentially boils down to a question of open versus proprietary standards. The proprietary standards in question have been around for longer, and are therefore well supported by hardware and software vendors. On the other hand, they are subject to numerous patents and are not free at the point of use for those involved in the business of media creation and distribution.

Open standards are arguably catching up with their proprietary counterparts in terms of quality and hardware and software support. The fact that they appear to be patent-free also makes them an attractive proposition. Apple and Microsoft argue, however, that these standards may not be as free and open as they seem. They suggest that "submarine patents" might yet emerge that could render commercial users liable to costly law suits in the future.

All of which is not particularly helpful to developers. We can only suggest that, when it comes to audio and video content, you continue to offer fallback options based on current best practice - which is to say that you essentially need to keep track of what browser vendors are up to in terms of their support for audio and video formats. It's also a good idea to browse the web development forums from time to time to get an idea of current trends.