HTML Video and Audio

The abundance of audio and video material on the internet grew over time as bandwidth improved and storage space became cheaper and ubiquitous. HTML5 has added both audio and video tags to make it easier to integrate media into web pages.

Video

The video files you wish to use must be in the OGG format, which is an open source video format.

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.

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

Audio

The use of audio in a site can add a number of effects, from background music, to little noises that aid in navigation to embedded players that allow the user to select and play a particular audio file.

<audio src="/my_audio.mp3" autoplay controls preload="auto">

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.