In the previous task, we had a look at how you would have had to embed videos before the advent of HTML5. In this task, we will update the code to use the HTML5 equivalent version.
For this task, you will need a copy of one of the videos we converted in Task 1 of the previous section.
For the purposes of this task, I'm going to use the WebM format version. You will also need a copy of the videotemplate.html file saved from the previous task.
Crack open your usual text editor, load up a copy of the videotemplate.html file, and then make the changes shown in the following code snippet:
<!doctype html> <html> <head> <title>HTML5 Video Test</title> </head> <body> <video> <source src="trailer_480p.webm" /> </video> </body> </html>
That's all you need to embed video—this will work perfectly in Firefox as shown in the following screenshot:
But as we will see later in this section, it won't work in all browsers!
The <video> attribute was designed as an attempt to standardize the HTML code required to embed videos within browsers; the source tags act as a form of browser sniffing, selecting the appropriate video format to play in the browser being used. In this instance, it will only display in Google Chrome, Opera, and Firefox. Other browsers will show nothing—although IE9 and Safari will play WebM format videos if third-party support has been added.