6.7    Playing Videos Using the HTML Element <video>

The video element allows you to play a video in the web browser without any special extension. All modern browsers can handle the video element.

...
<video width="720" src="Dancing.MP4" controls autoplay>
   Your web browser does not support the video tag.
</video>
... 

The /examples/chapter006/6_7/index.html example is based on the assumption that the web browser supports the MP4 format. If you want to be on the safe side and provide additional formats in case of nonsupport or have a certain format be used preferentially, then you should include additional video files via the source element for this purpose. In practice, you can do this as follows:

...
<video width="720" controls autoplay>
  <source src="Dancing.webm" type="video/webm">
  <source src="Dancing.MP4" type="video/mp4">
  <source src="Dancing.ogg" type="video/ogg">
  Your web browser does not support the video tag.
</video>
... 

Figure 6.19     Playing a Video Is Hardly a Problem Anymore Thanks to the <video> Element

Inside the video element in /examples/chapter006/6_7/index2.html, you can insert video files via multiple source elements using the standalone <source> tag. In <source>, you can use the src attribute to note the video file you want to play. For src, the usual rules for referencing in HTML apply. You can use the type attribute to indicate the video format. For a list of media types for video formats, see Table 6.6.

Depending on what video format the web browser can handle in the source elements, it will play the first known video file. For example, if a web browser knows all the video formats provided, the Dancing.webm video will be played in this example. If you want to prefer a video format, you must write it with the <source> tag in a higher position between <video> and </video>.

Table 6.6     Video Formats for <video> and the Corresponding Media Types

6.7.1    HTML Attributes for the HTML Element <video>

Most attributes of <video> are Boolean attributes and can be used by means of attribute names. In the first example in this chapter, the controls and autoplay attributes were used, which means that a control (play, pause, volume, etc.) for the video gets displayed, and the video starts automatically after loading. See Table 6.7 for an overview of common HTML attributes you can use for the video element.

Table 6.7     HTML Attributes for the <video> Element

6.7.2    Adding Subtitles to a Video Using <track>

Now that HTML makes it possible to render a video consistently, you may want to add more resources to the video. For this purpose, HTML provides <track> as an option to define additional tracks. These tracks don’t belong to the part of the video or audio track, but simply represent separate text information you can deposit as video subtitles at the exact time of the information contained there for different languages (or for people with a hearing loss/impairment).

...
<video width="480" controls>
  <source src="video/Dancing.mp4" type="video/mp4">
  <source src="video/Dancing.ogg" type="video/ogg">
  <source src="video/Dancing.webm" type="video/webm">
  <track default src="subtitles/subtitles_en.vtt" kind="subtitles"
         srclang="en" label="English">
  <track src="subtitles/subtitles_de.vtt" kind="subtitles"
         srclang="de" label="German">
  Your web browser does not support the video tag.
</video>
... 

When trying to reproduce the example, you should note that it won’t work on a local machine, but must be run online on a web host. You must write the standalone <track> tag inside a video or audio element for which you want to use the additional track. Table 6.8 provides an overview of the individual attributes of <track> and their meaning.

Table 6.8     HTML Attributes for <track>

You can see the example with English subtitles in Figure 6.20 during execution.

Figure 6.20     A Video with Subtitles: You Can Choose from the Offered Languages “German” and “English”

Here are a few lines about the WebVTT format, which is used to add additional tracks to a video or audio resource. However, the topic is only briefly touched on here so that you can add your own simple subtitles to a video. For a comprehensive study of the WebVTT format, you should refer to the documentation at https://www.w3.org/TR/webvtt1/.

The WebVTT format is saved with the .vtt extension. The files can be edited with a simple text editor and saved with UTF-8 character encoding. For instance, the example containing subtitles.vtt looks as follows:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
The <i>first line</i> of text is displayed for the first 4 seconds.

2
00:00:06.000 --> 00:00:16.000
Now a second line gets
displayed for <b>10 seconds</b>.

3
00:00:17.000 --> 00:00:20.000
This is the final subtitle ... 

Listing 6.15     /examples/chapter006/6_7/subtitle/subtitles.vtt

The first line contains WebVTT followed by a blank line. After that, you can write the content of the file by means of cues. Each cue consists of an identification number, a time, a text, and a blank line. The time specification has the following format:

hh:mm:ss.mmm --> hh:mm:ss.mmm 

This specifies that from the time hh:mm:ss.mmm to (-->) hh:mm:ss.mmm, the insertion of the text following it takes place. The time specifications must have a leading 0 if the specification is smaller than 10. mmm represents a specification of milliseconds. The other indications are hh for hours, mm for minutes, and ss for seconds. Thus, the meaning of the following lines should be clear:

1
00:00:01.000 --> 00:00:05.000
The <i>first line</i> of text is displayed for the first 4 seconds.
... 

From second 1 to second 5, the text following behind it is displayed, as you can see in Figure 6.20. You can see from <b> or <i> that you can also design the text visually. Line breaks are also reproduced. There are a lot of other ways to style the text, which I won’t go into here. A comprehensive overview of the WebVTT format can be found, as already mentioned, at https://www.w3.org/TR/webvtt1/.

6.7.3    Playing Videos via YouTube

In this regard, it’s a good idea to play the video from YouTube and display it on your website. To do that, you just need to upload the video to YouTube and include the HTML code or link you get from YouTube in the HTML document. Here, you have the choice of using the iframe element, the object element, or the standalone embed element for this purpose. The following example shows all three options in practice, but it only works live on a web server:

...
<iframe width="400" height="225"
  src="https://www.youtube-nocookie.com/embed/H8OYVuyBSNA" allowfullscreen>
</iframe>

<object width="400" height="225"
  data="https://www.youtube-nocookie.com/embed/H8OYVuyBSNA" ></object>

<embed width="400" height="225"
  src="https://www.youtube-nocookie.com/embed/H8OYVuyBSNA" >
... 

You can see the example at execution in Figure 6.21.

Figure 6.21     Playing a YouTube Video: Examples with <iframe>, with <object>, and with <embed>