The previous task took us through the basics of how to embed video into a web page using the HTML5 <video> tag. However, there is a lot more functionality available with this tag, such as providing controls, controlling the height or width, and adding a "poster" image. In this task, we will take a look at some of this functionality.
For this task, you will need a copy of the code from the previous demo—we are going to alter it to provide a more functional player.
Open up a copy of the code from the previous demo in your usual text editor:
<!doctype html> <html> <head> <title>HTML5 Video Test</title> </head> <body> <video> <source src="trailer_480p.webm" /> </video> </body> </html>
The first change we're going to make is to specify a height and width for the video. So, make the following change to the code to set up a defined area for the video:
<video width="720" height="400" ><source src="trailer_480p.webm" /> </video>The next change concerns the lack of controls, which is easy to fix:
<video width="720" height="400" controls="controls" ><source src="trailer_480p.webm" /> </video>Another change we can make, which makes for a more rounded experience, is to add a poster image that will show whether the video is loading or the user has yet to click on play:
<video width="720" height="400" controls="controls" poster="trailer_480p.jpg"><source src="trailer_480p.webm" /> </video>
The code will work in a similar fashion to that of the previous task, but this time we've added a request to show the standard browser controls for the <video> tag as well as asking it to load an image as a "placeholder" before the video is played.
There are some more tags that can be used when embedding HTML5 video as shown in the following table:
|
Name of attribute |
Value |
Description of attribute |
|---|---|---|
|
autoplay |
autoplay |
Specifies that the video will start playing as soon as it is ready |
|
loop |
loop |
Specifies that the video will start over again every time it finishes playing |
|
muted |
muted |
Specifies that the audio output of the video should be muted |
|
preload |
auto metadata none |
Specifies if and how the author thinks the video should be loaded when the page loads |
It is worth noting that these are available for use, although it is unlikely that you will want to use them by default; a good example is the autoplay option, which can place an unnecessary drain on bandwidth if not used carefully! (This is particularly true on iPhones, which will ignore autoplay by default.)
You will also notice that although we've only added one command to display the controls, the colors and design used will differ between browsers:
From top to bottom of the preceding screenshot, we have Internet Explorer, Safari, Google Chrome, and Firefox.