Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Introducing audio and video to HTML pages

Tuesday, November 12th, 2013 by Servage

In the earliest days of the World Wide Web (I know, I was there), it was possible to add a MIDI file to a web page for a little beep-boopy soundtrack (think early video games). It wasn’t long before better options came along, including RealMedia and Windows Media, that allowed all sorts of audio and video formats to be embedded in a web page. In the end, Flash became the de facto embedded multimedia player thanks in part to its use by YouTube and similar video services.

What all of these technologies have in common is that they require thirdparty, proprietary plug-ins to be downloaded and installed in order to play the media files. Until recently, browsers did not have built-in capabilities for handling sound or video, so the plug-ins filled in the gap. With the development of the Web as an open standards platform, it seemed like time to make multimedia support part of browsers’ out-of-the-box capabilities. Enter the new audio and video elements and their respective APIs.

The good news is that the audio and video elements are well supported in modern browsers, including IE 9+, Safari 3+, Chrome, Opera, and Firefox 3.5+ for the desktop and iOS Safari 4+, Android 2.3+, and Opera Mobile (however, not Opera Mini). But lest you envision a perfect world where all browsers are supporting audio and video in perfect harmony, I am afraid that it is not that simple.

Although they have all lined up on the markup and JavaScript for embedding and controlling media players, unfortunately they have not agreed on which formats to support. Let’s take a brief journey through the land of media file formats. If you want to add audio or video to your page, this stuff is important to understand.

When you prepare audio or video content for web delivery, there are two format decisions to make. The first is how the media is encoded (the algorithms used to convert the source to 1s and 0s and how they are compressed). The method used for encoding is called the codec, which is short for “code/ decode” or “compress/decompress.” There are a bazillion codecs out there (that’s an estimate). Some probably sound familiar, like MP3; others might sound new, such as H.264, Vorbis, Theora, VP8, and AAC. Fortunately, only a few are appropriate for the Web, and we’ll review them in a moment.

Second, you need to choose the container format for the media…you can think of it as a ZIP file that holds the compressed media and its metadata together in a package. Usually a container format can hold more than one codec type, and the full story is complicated. Because space is limited in this chapter, I’m going to cut to the chase and introduce the most common container/codec combinations for the Web. If you are going to add video or audio to your site, I encourage you to get more familiar with all of these formats. The books in the For Further Reading: HTML5 Media sidebar are a great first step.

Resources and further reading

W3 Schools

Site point

Introducing audio and video to HTML pages, 3.3 out of 5 based on 4 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.