Displaying Video - Advanced HTML5 - HTML5, 20 Lessons to Successful Web Development (2015)

HTML5, 20 Lessons to Successful Web Development (2015)


LESSON 19 Displaying Video


To view the accompanying video for this lesson, please visit mhprofessional.com/nixonhtml5/.

Adding HTML5 video to your pages is almost as easy as adding audio, but there are some differences, and I’ll point out the things you need to concern yourself with.

The main thing to realize, though, is that HTML5 video is still in its infancy and that specifications and codecs may change over time, as may the best ways to code and display your video. Still, following the advice in this lesson, you’ll be able to add video to any HTML5-enabled browser that supports the <video> tag, and also some other or earlier browsers that do not (as long as they support the Flash plug-in).

The Video Codecs

As explained in the previous lesson, the term codec stands for enCOder/DECoder and describes the functionality provided by software that encodes and decodes media such as audio and video.

For video, though, codecs are placed within containers, which may be any of the following:

MP4 A license-encumbered multimedia container format standard specified as a part of MPEG-4, supported by Apple, Microsoft and, to a lesser extent Google, since it has its own WebM container format.

OGG A free, open container format maintained by the Xiph.Org Foundation. The creators of the OGG format state that it is unrestricted by software patents and is designed to provide for efficient streaming and manipulation of high-quality digital multimedia.

WebM An audio-video format designed to provide a royalty-free, open video compression format for use with HTML5 video. The project’s development is sponsored by Google.

In the HTML5 <video> tag there are currently a number of different sets of codecs available, depending on the browser used:

H.264 A patented proprietary video codec for which playback is free for the end user, but which may incur royalty fees for all parts of the encoding and transmission process.

Theora This is a video codec unencumbered by patents, and which is free of royalty payments at all levels of encoding, transmission, and playback. This codec is supported by Google Chrome, Mozilla Firefox, and Opera.

VP8 This video codec is similar to Theora but is owned by Google, which has published it as open source, making it royalty-free. It is supported by Google Chrome, Mozilla Firefox, and Opera. There is also a newer VP9 codec.

The following list details the major operating systems and browsers, along with the video containers and video types they support by default:

Apple iOS MP4 / H.264

Apple Safari MP4 / H.264

Google Android 2.3+ MP4, OGG, WebM / H.264, Theora, VP8

Google Chrome MP4, OGG, WebM / H.264, Theora, VP8/VP9

Internet Explorer MP4 / H.264

Mozilla Firefox MP4, OGG, WebM / H.276, Theora, VP8/VP9

Opera OGG, WebM / Theora, VP8

As with HTML5 <audio>, there is no single container and/or codec for the <video> tag common to all browsers and platforms. However, the dominant format is MP4 / H.264, so if you encode in that and then OGG / VP8 too, you’ll cover all the major browsers.

The <video> and <source> Tags

In the following example three different video formats are offered to the browser, as shown in Figure 19-1:



FIGURE 19-1 Playing an HTML5 video


If you don’t have access to any, you can search the Internet for a range of free and paid video conversion and compression tools.

The <video> and <source> Tag Attributes

In the preceding example I applied the attribute with the name controls to the <video> tag. This had the effect of causing a set of controls to appear, as displayed in Figure 19-1. If that attribute is omitted, then the controls will not display (and you’d either have to use the autostart attribute, or use some JavaScript to make the video play).

Here’s a list of video attributes supported by HTML5:

autoplay Causes the video to commence playing as soon as it is ready.

controls Causes the Control Panel to be displayed.

height Specifies the height at which to display the video.

loop Sets the video to play over and over.

poster Lets you choose an image to display prior to playback.

preload Hints at how much buffering (or preloading) to use to provide the best user experience.

src Specifies the source location of a video file.

type Specifies the codec used in creating the video.

width Specifies the width at which to display the video.

By selecting the attributes you require and encoding video in the right formats, you can ensure that it will play on all HTML5-compatible browsers, and you’ll never have to worry about loading in a Flash or other video player again, unless you intend to also support older browsers, as follows:


Using the code in the <object> and </object> tags, you can ensure that non-HTML5-enabled browsers can still play your MP4 videos as long as they have the Flash plug-in loaded. The flowplayer.swf files required to do this are included in the examples.zip file on the accompanying website, but you can check for newer versions at the flowplayer.org website. If you download a newer version, ensure you match the code to the filenames, which will have numeric extensions such as -3.2.7, and so on.

The preceding code displays like Figure 19-2 in browsers that do not support the <video> tag, but do have Flash installed.


FIGURE 19-2 Displaying the same video using a Flash player


The flowplayer.swf file restricts the playing of files directly from a local folder on a computer, therefore you must supply it with the full Internet URL of a file, as in the example.


Now that you’ve completed this lesson, you will have all the audio and video tools you need in order to play media in your web pages, whether or not the browser supports HTML5 (but as long as it at least supports Flash). You have now learned almost everything that is currently usable in HTML5. In the next lesson I’ll explain the features that are included in HTML5 but which have so far been poorly implemented (if at all), but which you should know about because they will probably be adopted by the major browsers over the coming months and years.

Self-Test Questions

Test how much you have learned in this lesson with these questions. If you don’t know an answer, go back and reread the relevant section until your knowledge is complete. You can find the answers in the appendix.

1. Which HTML5 tag embeds video in a document?

2. Name the three types of video format supported by HTML5 browsers.

3. Which two video formats used together will ensure that your video will play on all major browsers and platforms?

4. What is the purpose of the <source> tag?

5. Which two attributes does the <source> tag require?

6. Which attribute makes video play on page load?

7. How can you control whether or not the video controls are displayed?

8. How can you set a video’s width and height?

9. How can you display an image of your choice as a placeholder for where the video will play?

10. How can you support older browsers that do not recognize HTML5 video?