Audio & Video in HTML5

Audio

With HTML5 came the introduction of tags designed to free the web developer of their previous reliance on plugins and secondary websites. One of these elements is <audio>. The <audio> tag allows a web developer to inherently embed audio files hosted on their own server. This new element gives the developer a wide range of properties to be taken advantage of such as 'controls' giving the embedded player more GUI options for the visitor of the site to use. Other properties include 'preload', allowing the audio file to load during the initial loading of the page, and 'autoplay'. Autoplay has been widely used in the past but is now, however, looked down upon and viewed as little more than a nuisance apart from in very specific circumstances.

The <audio> element must contain a source ('src') for the specified audio file, and several sources may be given in different file formats to support a wide variety of browsers (and operating systems in some cases). Audio, in its raw form, takes a substantial amount of data, and codecs (coder-decoders), designed to reduce file size, removes specific frequencies from audio files which the human ear finds difficult to notice. File formats are split into two different groups - lossless and lossy. A lossless format such as FLAC at a high bitrate is a suitable choice for achive purposes and music downloads, but in a lot of cases a lossy format such as an AAC file will be more suitable for the average user. Lossy formats such as AAC and MP3 are also more suited to streaming thanks to their faster download rate, reaching a wider audience.

Video

The <video> element was also introduced in HTML5 and has many of the same advantages as stated above. Video files in their raw state are, however, ridiculously large when it comes to file size, and codecs are essential for home use. Video media containers also have a track for audio. An MP4 container along with an AVC codec is a popular choice for the <video> tag, as it reaches a wide audience, but recently open-source and royalty-free containers such as WebM and Ogg have been gaining popularity. These containers, along with codecs such as VP9 and Theora will most likely become default standards for the future because of their flexibility and efficiency, but for now it is sensible to provide a fallback. Specialised codecs such as AV1 are great for professional use and home cinema purposes but, with all new technology, the main issue is compatability and isn't fully supported across browsers.

Embedded Audio and Video

Before <audio> and <video> elements were introduced the <iframe> was prevalent. The <iframe> element has its positives - it's easy, doesn't take up storage on the web developer's own web server, and encoding and compatibility issues have often already been handled. It is however, in essence, a 'window' into another web page and problems that arise with this secondary web page will affect the primary web page. Issues such as permissions and royalties are also possibly problems.

A youtube video embedded using the <iframe> element. (Krossing, 2017, November 27)