Video

The abundance of audio and video material on the internet grew over time as bandwidth improved and storage space became cheaper and ubiquitous. Through this time, many approaches were brought forward to facilitate enjoying the material. Software, file extensions, browser add-ons and more attempted to fill the void. Now, HTML5 has added both audio and video tags to make it easier to integrate media into our pages. These tags make embedding media easier, but (so far) are limited in the number of file formats they support.

Our new video tag supports a number of features through attributes like automatically playing (autoplay), looping the file (looping), on screen controls (controls), preloading the video before it is played (preload), error handling (onerror), and even displaying an image when the file is not in use (poster) and also includes width, height, and source attributes of the file.

The video files we wish to use must be in the OGG format, which is an open source video format. We define our video very similarly to other elements we take into our page. An initial video that simply plays when the page is loaded can be completed by adding the following:

<video src="ourfile.ogg" width="200" height="150" autoplay>

Take note that this is a pretty rude solution in many cases, as the file will start to play as soon as enough of it is ready, and the user is left with no means of control except closing the page entirely (think about the lovely ads we have all been subject to that use this type of technique). To address this, we will add some more attributes:

<video src="ourfile.ogg" width="200" height="150" autoplay controls preload="auto" poster="videoImage.png">

Now we see a splash screen and controls. Our other options for preload (auto lets the browser decide) are none and metadata. None will stop all preloading activity, while metadata loads information about the video like length and dimensions. Audio files are actually identical to this approach (even the use of .ogg files) with exception to the ability to define the width and height. All we need to change is our vocabulary, using the word audio instead of video in our tag.

Audio

<audio src="ourAudio.ogg" autoplay controls preload="auto">

The use of audio in a site can add a number of effects, from background music (be kind—allow the user to stop it if they want), to little noises that aid in navigation (these might interfere with screen readers) to embedded players that allow the user to select and play a particular audio file.

Like image formats, audio files can be encoded in a variety of formats that provide different levels of quality. The two formats most commonly found are .mp3 and .wav, standing for motion picture extract group (3rd set of standards) and wave, respectively. The difference lies in their method of compressing and storing the information needed to reproduce the sound. MP3 files are more compressed, meaning they are smaller and require less time and space to transmit, but contain less information and as such have a lower audio quality. Wave files, on the other hand, are typically much larger and sound better. This means they are more taxing on a website as they require more storage space and will take longer to load.

Which format you use will obviously depend on what is more important to you—speed of delivery and space, or quality of sound for the user. Some things to take into consideration are that most users report hearing little difference in quality between the formats, especially when the file is played on a mobile device or computer with basic entry-level speakers attached. If you have ever purchased a digital album or single online, you may have been presented with the option between these or other formats to accommodate the more discerning audiophiles among us.