HTML5 Media

Programming in HTML5 with JavaScript & CSS3 Training Guide

Chapter 11 - HTML5 Media

Notes from Programming in HTML5 with JavaScript & CSS3 Training Guide by Glenn Johnson.

This is part of my study material for passing Microsoft’s Exam 70-480: Programming in HTML5 with JavaScript & CSS3 certification exam.

One of the most popular features of HTML5 is its support for multimedia. In the past, you needed to load a plug-in to play video or audio. This chapter examines the HTML5 support for playing video and audio.

1. Playing video

Currently the W3C does not specify which video formats browsers should support. Browsers can decide which format they want to support, so the developer must provide formats that are available across most browsers.

2. Video formats

The following are the most popular formats:

MPEG-4/H.264 is the most common format for most video-editing software. It provides the best performance when comparing data-stream size to picture quality.

3. Implementing the video element

The <video> element is used to play video. The following is a sample implementation of the <video> element.

<video width="320" height="240" controls="controls">
    <source src="movie.mp4" />
    You need a browser that supports HTML5!
</video>

In this example, the <video> element size is set to 320 pixels by 240 pixels. The controls attribute provides controls to start and stop the video, to view and set the video cursor location, and to maximize and restore the video size on the screen. The <video> element contains a <source> element that describes the video source as .mp4. The <video> element also contains text that is displayed on browsers that don’t support the <video> element.

4. Setting the source

When the developer provides multiple formats, the browser can choose the format it can use to display the video, which provides the most compatible experience to users.

<video controls="controls" height="480">
    <source src="eagle.webm" type="video/webm" />
    <source src="eagle.ogv" type="video/ogg" />
    <source src="eagle.mp4" type="video/mp4" />
</video>

The position of the <source> elements is important because a browser starts looking at the top and stops when it finds a file it can display.

The recommended order is to start with th e.webm file because it’s royalty free and open source. Next, use the .ogv file because it is also royalty free, but the quality is not as good as the .webm file. Finally, use the .mp4 format for the browser that don’t support .webm or .ogv files.

5. Configuring the video element

The following is the list of attributes you can use to configure the <video> element.

6. Accessing tracks

The W3C has developed a new standard, called WebVTT (Web Video Text Tracks), that provides the ability to display captions on the video.

The WebVTT file format is simple and easily readable by browsers and developers.

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
</video>

7. Configuring the track

The HTML <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), to handle subtitles, captions, descriptions, chapters, or metadata.

The following is a list of attributes you can use to configure the <track> element.

<!-- Video with subtitles -->
<video src="foo.webm">
  <track kind="subtitles" src="foo.en.vtt" srclang="en"
    label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv"
    label="Svenska">
</video>

8. Using the WebVTT format

WebVTT format is very simple. The file starts with a declaration of the WebVTT file, a line is skipped, and a cue is defined. The cue is composed of a timespan on the first line, and the caption follows on the next line or lines. After that, a new line separator is provided, and the next cue is defined. The following is a WebVTT file.

WEBVTT FILE

00:00:07.500 --> 00:00:08.750
He's fidgety.

NOTE I think the timing should be adjusted to span to the end of the video
00:00:09.000 --> 00:00:12.000
There he goes!!!

You an include comments by using the word NOTE followed by a space or a new line, as shown above.

9. Video Summary

10. Playing audio

The W3C introduced the <audio> element for the purpose of playing music and sounds. Liek the <video> element, the intent was to offer a standard way to play media without requiring a plug-in.

Much of the content is similar to that of the <video> element since they both inherit from the `HTMLMediaElement.

11. Audio formats

The following are the most popular:

12. The audio element

The following is an example of the <audio> element.

<audio controls="controls">
    <source src="song.mp3" />
    You need a browser that supports HTML5!
</audio>

13. Setting the source

At a minimum, you need to set the src attribute to the URL of the audio.

<audio controls="controls" height="480">
    <source src="kittycat.oga" type="audio/ogg" />
    <source src="kittycat.wav" type="audio/wav" />
    <source src="kittycat.mp3" type="video/mpeg" />
</audio>

14. Configuring the audio element

The following is the list of attributes you can use to configure the <audio> element.

15. Audio Summary

16. HTMLMediaElement object

The <audio> and <video> elements inherit from an HTMLMediaElement object, so they inherit the properties, methods, and events that are defined on the HTMLMediaElement object.

17. HTMLMediaElement methods

You can use the members of the HTMLMediaElement object to control the video and audio playback. You can also get notifications of status changes. The following is a partial list of <video> element methods.

18. HTMLMediaElement properties

In addition to the methods that enable you to control playback, you can use many properties to view or set the state of teh audio or video element. The following is a list of properties.

19. HTMLMediaElement events

In addition to the methods and properties of HTMLMediaElement, the following is a list of the events that you can subscribe to.

20. Controlling the media

Given that HTMLMediaElement has many methods, properties, and events, you can provide custom controls for the media and a custom means to start and stop playback.

11-2

The following is an example of using the methods, properties, and events. Consider the following HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Video Prototype</title>
    <link href="media/default.css" rel="stylesheet" />
</head>
<body>
    <div id="container">
        <video id="media" controls="controls">
            <source src="media/eagle.webm" type='video/webm; codecs="vorbis, vp8"' />
            <source src="media/eagle.ogv" type='video/ogg; codecs="theora, vorbis"' />
            <source src="media/eagle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <track id="englishtrack" kind="subtitles" src="media/captions.vtt" srclang="en" label="English" default />
            You need an HTML5 compatible browser.
        </video>
        <br><br>
        <button type="button" id="play">Play</button><br>
        <span id="message"></span>
    </div>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="media/default.js"></script>
</body>
</html>

This document contains a <video> element with three child <source> elements and a <track> element. The <source> elements are for .webm, .ogv, and .mp4 video files. The subtitle file is in WebVTT format. We’ve also included a button set to id='play'.

The play button behavior is detailed in the default.js file.

$(document).ready(function () {
    $('#play').on('click', playStop);

    $('#media').on('play', function() {
        $('#play').html('Pause');
        $('#message').html($('#media')[0].currentSrc);
    });
    $('#media').on('pause', function() { $('#play').html('Play'); });
});

function playStop() {
    var media = $('#media')[0];
    if (media.paused) {
        media.play();
    } else {
        media.pause();
    }
}

Here the document ready method is added with code to subscribe to events. The click event on the play button executes the playStop() function. The playStop() function toggles play/pause on the media control. The button label is updated based on subscribing to the play and pause media events.

21. HTMLMediaElement Summary