Audio and Video in HTML5

Before HTML5, audio files were added to the page by integrating background sound with the help of <bgsound> tag. The file was being played while the page was being viewed, and the user couldn’t mute the sound. In HTML5 we can embed audio files using the <audio> tag, and there is no need to connect third-party plugins. The audio element can be controlled with HTML or Javascript and styled with CSS.

How to Add Audio on the Web Page

To add audio files on the web page, use the <audio> element. The URL of audio file is defined by the src attribute, and the controls attribute adds a control panel (launch button, scroll bar, volume regulator).

In the code, it looks like this:

<audio src="name.ogg" controls></audio>

Audio Codecs and Audio File Formats

As not all browsers support all audio formats, the audio file is encoded/decoded with an audio codec (a digital electronic device or computer-based software application that aids in the compression and decompression of a digital audio data). All formats of audio files are added simultaneously via the <source> with the src attribute.

When defining different file formats, we recommend to define MIME-type for each file, in order to let the browser localize supported file. The MIME-type is defined by the help of type attribute.

Example

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
     <source src="/build/audios/audio.mp3" type="audio/mpeg">
   </audio>
   <p>Click the play button</p>
 </body>
</html>

The most popular audio formats are the following ones:

MP3 – the most popular audio format, which uses lossy compression and permits to reduce the file size. Despite the popularity among the users, TV companies and radio stations use more modern codecs ISO-MPEG, like AAC or MPEG-H.

AAC (Advanced Audio Codec) — closed codec, MP3 analog, but comparing to the latter, it provides higher quality with the same or stronger compression degree.

Ogg Vorbis— free format with an open code, supported in Firefox, Opera and Chrome. Provides good quality sound, but not sufficiently supported by device players.

How to Add Video Files

In previous version of HTML videos were embedded into the site via third-party plugins, such as QuickTime, RealPlayer or Flash. HTML5 has a new <video> tag, which is used to insert a video into the web page.

In a code, it looks like this:

<video src="example.webm." controls></video>

The src attribute indicates the URL of the file, and the controls attribute is used to display control elements. (More about the attributes of the <video> tag).

Video Codecs and Video File Formats

Each browser supports certain codec, that’s why, in order to provide video playback in all browsers, the video file must be placed in a few formats. Like in the case of audio files, all formats of video files are included in the <source> element, starting with the most preferred one. Every video file must have its MIME-type, which is defined by the type attribute.

In order to make sure, that the browser is able to process video files, create a file .htaccess in the folder, where the web site is situated, which defines MIME-types for a video:

Example

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     video {
     width: 300px;
     height: 220px;
     border: 1px solid #666;
     }
   </style>
 </head>
 <body>
   <video controls>
     <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
     <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
   </video>
   <p>Some information about video</p>
 </body>
</html>

Today there are 3 basic video formats: MP4/MPEG-4, OGG and WebM +. For video data compression and their playback, we use codecs.

For a video file of the MPEG-4 format, the Н.264 video codec and ААС audio codec are used. If you want to use codecs, you must get a license.

For the Ogg video file, use the Theora video codec and the Vorbis audio codec with an open code.

For the video files of the WebM + format, use the VP8 video codec and the Vorbis audio codec. In this case, license isn’t required.

The <video> tag isn’t supported by all browsers; to play the video in Internet Explorer (9+) and Safari, installed plugins Microsoft Media Player and Apple QuickTime are required.

How to Add Subtitles and Headings

Subtitles and headings are added to audio and video files via the <track> element, which is used as a child element of <audio> and <video>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
      width: 300px; 
      height: 200px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

To align the video player on the page, place the <video> element into the <div> container, assign it a class, and then define the width and the height for it, corresponding to the size of your video.