Programming in HTML5 with JavaScript & CSS3 Training Guide
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.
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.
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.
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.
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.
The following is the list of attributes you can use to configure the <video>
element.
TimeRanges
object.anonymous
: Sends a cross-origin request without a credential.use-credential
: Sends a cross-origin request with a credential.<video>
elementTimeRanges
object indicating all the ranges of the video that have been played.none
: the video should not be preloadedmetadata
: indicates only metadata (e.g. length) is fetchedauto
: starts loading the video when the page loads<video>
element.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>
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.
default
per media element.subtitles
. The following keywords are allowed.
subtitles
captions
descriptions
chapters
metadata
.vtt
file). Attribute must be defined.kind
attribute is set then srclang
must also be defined.<!-- 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>
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.
<video>
element is new in HTML5.ogg
, .webm
, and .mp4
<video>
element, at a minimum you must provide a video source.autoplay
attribute is used to start playing immediately. Although this is often discouraged as being annoying to the user.autoplay
attribute to start playing immediately.poster
attribute to specify an image to display when not playing the videoThe 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.
The following are the most popular:
The following is an example of the <audio>
element.
<audio controls="controls">
<source src="song.mp3" />
You need a browser that supports HTML5!
</audio>
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>
The following is the list of attributes you can use to configure the <audio>
element.
TimeRanges
object.TimeRanges
object indicating all the ranges of the video that have been played.none
: the video should not be preloadedmetadata
: indicates only metadata (e.g. length) is fetchedauto
: starts loading the video when the page loads<audio>
element is new in HTML5..ogg
, .mp3
, and .wav
.<audio>
element, at a minimum you must provide an audio source.autoplay
attribute to start playing immediately.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.
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.
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.
AudioTrackList
object that has the available audio tracksTimeRanges
object that represents the buffered parts of the audio or videoMediaController
object representing the current media controller of the audio or videoMediaError
object representing the error state of the audio or videoTimeRanges
object that represents the played parts of the audio or videoTimeRanges
object that represents the seekable parts of the audio or videoDate
object representing the current time offsetTextTrackList
object that represents the available text tracksVideoTrackList
object that represents the available video tracksIn addition to the methods and properties of HTMLMediaElement
, the following is a list of the events that you can subscribe to.
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.
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.
<video>
and <audio>
elements inherit from the HTMLMediaElement object.play()
method to start playing the media and the pause()
method to pause the playing media.paused
property can be used to determine whether the media is playing.onplay
and the onpause
events can be subscribed to and provide notifications when the media is played or paused.