Join Joseph Lowery for an in-depth discussion in this video Setting up the HTML, part of Creating Video Bumpers with HTML5.
Time to lay the foundation for our Video Bumper Project. In this lesson, we'll concentrate on the HTML necessary to set up the video tag properly. Not only will we enter the video tag in all the necessary attributes but we'll also add in all the required source tags. Before we start, I do want to give credit where credit is due. This project is based on an article written by Drew McLellan for 24ways.org. Awesome work from Drew as always.
In my code editor, I have the index.htm file from the Chapter 2_02_01 folder open. I'm going to scroll down to around line 66 and there you'll see a div with an ID of videoContainer. I'm going to place my cursor within the div and enter my video tag. As for attributes, I'll set the width and height first. The width is going to equal 480, no need to put the px or pixels measurement unit there, and then the height will be 272.
Next, I'll add the controls attribute. This will, of course, enable the Play, Pause, Control and others. Poster is the final attribute to add and I'll need a path to an image for that, that's going to be found in images/videoPoster.png. Okay, I can close the video tag. Within that video tag we'll add a series of source tags, one for each of the supported formats. So source, now if you're using Aptana, I do want to caution you not to attempt to close the tag at this point, Aptana automatically adds a actual closing tag, whereas source is an empty tag and doesn't take a tag pair.
So let's put in our attribute of source and set that equal to assets/ and here you'll see a listing of all the various assets. There are nine different files here, three for each of the segments that we have. So you'll see three for bumper-in, three for bumper-out and three for main. We're going to be putting in the main ones here; so I'll just hit m to scroll down to there and put in my first one, which is MP4, and we set the type="video/mp4", and then we'll close this tag after space.
Okay, let's do our second one; src is going to be also in the assets folder and this time we'll put in the webm format and give it a type=video/webm, close the tag; one last source tag. This time we pick up main.ogv.