This involves hosting video on the same Web server that hosts the Web page in which the video is embedded. Although this involves more work and may even cost more, for example, in terms of paying for more bandwidth, it provides better control of what is delivered. Like other types of media, video is added to a Web page by linking and embedding, and linking is done by using the <a> element and embedding with the <video>, <embed>, or <object> element.
1. Linking to Video
The <a> element is used to link to a video file in the same way as it is used to link to any other file. Figures 7.12 and 7.13 show how it is used and also depict the result. As normal, clicking the link opens a media player to play the specified file. As with audio, the advantage of this is that the player is separate from the Web page, and so, it continues playing even if the user navigates to another page, as opposed to an embedded plug-in that stops.
2. Embedding Video
Like embedded audio, embedded video uses plug-in that is an integral part of a Web page. As noted earlier, the elements used to embed video is <video>, <embed>, or <object> element.
2.1. <video>.. .</video>
Just like the <audio> element is optimized for embedding audio, the <video> element is designed for embedding video in a page. The specific attributes that it supports are listed in Table 7.7, and Figures 7.14 and 7.15 show a basic use of it and depict the result. The content between the <video> tags is the message that is displayed when a browser does not support the element and is known as fallback content.
Notice that it is the poster (“garden.jpg”) that is displayed in the example, not the video. The poster can also be used to display messages to users, such as “Please wait, media downloading … It could also be a short animation to entertain while the video loads. Other image file formats that are commonly used for poster include PNG and GIF.
Again, like the <audio> element, the <video> element can be combined with the <source> element to provide to the browser multiple choices of video file formats and encoding standards. This improves the chances of a browser finding a file format that it supports and therefore increases the chances of the video being accessed by as many users as possible. The attributes that it supports are listed in Table 7.8. Figure 7.16 shows how it is used with a code that produces the same result as Figure 7.15.
In the code, the first value of the codecs parameters is the one for the video and the second value is the one for the audio component. Note that like with the <audio> element, where codecs parameters are specified, they are one of the values of the type attribute and need to be in double quotes, while all the values of the attribute are enclosed in single quotes. Again, like with the <audio> element, it is worth knowing that, although the codecs parameters help the browser decide whether or not it can play a video file without having to load it first, the downside is that if it is not correctly specified, the browser will generate an error, even if it can play the file. On the other hand, if the parameters are not specified, the browser will load the file anyway and discover that it supports the file and play it. The message “Your Web browser does not support HTML video element” is displayed only if a browser does not support the <video> element. The formats and codecs that the major browsers support are listed in Table 7.9. Although H.264 and VP8 now have successors H.265 and VP9, respectively, they are yet to be as widely supported by browsers as of time of writing.
This means that to ensure your video works with the <video> element, it must be encoded in the codecs and saved in the file formats. There are several free and cheap video file format converters available on the Web, including on-line converters, which can be used to convert existing media files to these formats. A commonly used one designed specifically for converting to HTML5 media formats is Miro Video Converter.
2.1.1. Adding Captions and Subtitles
The addition of subtitles and captions to videos is worth mentioning, not least because of its importance to accessibility. The element used to achieve it is the <track> It allows you to specify a timed text track (a file) that is played along a video delivered using the <video> element. The element is incidentally also used with the <audio> element. The format of the timed text track supported is WebVTT (Web Video Text Tracks), which carries a .vtt extension. Figure 7.17 shows an example of the content of a WebVTT file. It says to display the caption “First caption” at timecode 00:00.000 of the video and remove it at 00.01.980 and so on for the remaining captions.
Essentially, the browser plays a video and overlays the caption on it but only if the caption or subtitle function is enabled. This is typically done via the captioning (CC) menu of the media player, which is usually displayed at the bottom of the window. A WebVTT file can be created using one of the various tools, including free ones on the Web. An example is HTML5 Video Caption Maker, which allows a video to be opened in it and automatically inserts start and end time codes for every caption added (either via typing or via pasting). Before creating a caption file, naturally, a video first needs to be transcribed, which involves writing down the dialog and commentary in the video and the time codes of where they start and end.
Table 7.10 lists the attributes supported by the <track> element, and Figure 7.18 shows an example of how it is used.
2.2. <embed> and <object>.. .</object>
Since the <embed> and <object> elements are designed to be used for dynamic media, they can also be used to embed video in a Web page; however, it is most commonly used to embed Flash video and animation (discussed later in the chapter). The attributes supported by the <embed> element were listed earlier in Table 7.4, and those supported by the <object> element in were listed in Table 7.5. Figure 7.19 shows both elements used together. The <embed> element is used as fallback, so that if the browser does not support one element, for example, it can try the other.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.