Join Tom Green for an in-depth discussion in this video Exploring the HTML5 video tag, part of Learning HTML5 Video.
In this lesson, we finally roll up our sleeves and get covered in code up to our elbows. Before we start, I should point out I will be using Dreamweaver CC for this portion of the lesson. The reason is the code panel allows me to enlarge the fonts, so you can clearly see the code you need to know. As well, the live view, the little globe right up at the top corner, here, lets me preview the page containing the video in those modern browsers that will display HTML5. If Dreamweaver CC is not your preferred choice, feel free to use a stand-alone code editor, such as the Edge Code Editor from Adobe, Coda or any other tool that you prefer. And to get yourself started, open the index.html file located in your chapter three video one folder.
When it opens click the Code button to open the Code panel. When phased with wiring up their first HTML5 video, it is common for people to approach this task with a high degree of trepidation. Quite understandable because well, it's video, and video is not exactly easy. This truly is not the case with the HTML5 spec. HTML5 defines a new element, which specifies a standard way to embed a video or movie on a web page. The video element.
The process is fairly simple, you click once on line 47 of the code right after the comment and add the video tag. Close the tag and away you go. And you have to close the tag for a couple of reasons. The first is all of the stuff that relates to the video and how it plays goes between these two tags. The second is, you need a place to provide fallback content in the off chance the user is using a browser that doesn't support HTML5. To show a video in HTML5, here is all you need to do to tell the browser, which video is to be played.
This is done through the source attribute. Click once after the word video in the Video tag. And enter src = "video/CableCar.mp4" and there you go. You've now said what the source of the video is. Because we're using an MP4, let's test this in Chrome. So, what you do is you go up to Preview in browser and we'll preview it in Google Chrome.
It's going to ask me to save the changes. That's fine. And there's the video in the browser, but it doesn't (LAUGH) do much else. It's just sitting there. The reason is simple. We haven't given the user any way to control the video. Let's return to our code editor and solve this issue. So, we're going to close Chrome, and back to our code and we're going to add one word after our video source. Controls. Save the file and test again in Chrome. And there are the controls.
(MUSIC) And the video plays. And on behalf of lynda.com, I'd like to welcome you to the wild, wacky and wonderful world of HTML5 video. Though this is the absolute minimum code. You need to know to play video. Don't stop here. The common best practice that has emerged is not only to give the browser the physical dimensions of the video but to also include a type attribute. So, the browser knows exactly what type of video is being called. If it doesn't recognize the MP4 file, it will let you know. To accomplish this, delete the content between the video tags, and enter the width.
So, we're going to use a width attribute. And we know the video is 720, and it needs a height attribute. 480 and it needs the controls. And we can close off that tag. Now, what we're going to do, is we're going to use a source tag. So, we type that car, source, src equals video, which is the location of the folder, /cablecar.mp4, type = "video/mp4.
Close the partition mark. Close the tag, and I've got an extra close tag here, so let's get rid of that. And here we go. So, what we've done is we've said edit the videos width is 720 by 480. Show the controls, and the source of the video is CableCar.mp4, and the type of the video is an mp4. Let's save this, Ctrl+S or Cmd+S. And Preview in Google Chrome. And you can see, it looks exactly the same. I'm going to close the video here. By setting the height and width attributes the space required for the video is reserved when the page is loaded.
However, without those two attributes, the browser doesn't have a clue what the size of the video is and can't set aside the appropriate space for it. The effect will be that the page layout will change during loading while the video loads. Another best practice is to insert text content between the video tags for browsers that do not support the video element. This means there will at least be something to tell the user what is going on. In this case, I would enter a Return at the end of the source attribute and type in Your browser doesn't support HTML5. So far, so good.
Let's save the file. And this time I'm going to open the file or the page in Firefox. And you can see that we get a rather nasty error message telling you not only can't it find the supported format, but it also can't find the mime type. What this tells you is the MP4 video in the source tag won't play in Firefox and for that matter, it's won't play in Opera. In fact, Opera will only show the controls and if you inspect the element you will see Opera has totally ignored the source tag.
This is not a good thing. Now, that you've had a chance to explore the code you need to know, you have also discovered that your video will only play in certain browsers. This is not a huge issue and we'll deal with this in the next video.
- Understanding web video delivery challenges
- Understanding video containers or codecs
- Exploring bitrate
- Creating MP4 and WebM videos
- Using the video tag
- Preloading video
- Working with multiple formats
- Setting up autoplay