Join Joseph Lowery for an in-depth discussion in this video Embedding video without a plug-in, part of Dreamweaver CS5: Getting Started with HTML5 .
- View Offline
One of the main reasons HTML5 has gotten the jumpstart it has is the new video tag, which allows for plug-in-free video playback. The basic code for applying the video tag is simplicity itself. Let's dive in to Dreamweaver and I'll show you what I mean. So I have the trails.htm file open here, and you can see over on the right-hand side under my Trail News section I have a new video that I want to put in right here. So I'll just select a little bit of this text, and when I go to Split view, that will bring me right to that section.
Here, you can see I have a comment, "Video goes here." I'll delete that and start entering in the video tag. And again, once I start typing, you can see that code hints is right there for me. There is a video. So I will go ahead and hit Return once that's highlighted, and now there is a series of attributes to enter in the video tag--the primary one being of course the source for the video tag. So that's src. And now we have our browse capability. I'll hit the Return or Enter and then go over to my site root and then open up the _video category.
The one we want initially is the explore_promo.mp4. Go ahead and choose that. Now, let's go ahead and add some controls to this, so that there are some on- screen play and pause controls and so forth. So the way you do that is just enter in the word controls, and it's a Boolean, so you can enter in just controls or if you're following XHTML syntax you would enter in controls=controls.
The other two attributes we want to enter are the width and height. I am going to go ahead and give it a width of 420 pixels and then a height of 236. And once we have that, we close the opening tag and then complete the tag with a /video. Okay. So let's go ahead and take a quick look at that in Live view, and here you'll see a space for the video and what appears to be perhaps the first frame of the video, but no video controls.
This is one of the drawbacks of the current implementation of Dreamweaver. With the HTML5 video, you can't actually preview it here. So let me go ahead and save this file, and then let's preview it in Safari. And there you see the video with the video controls. I'll go ahead and hit Play. (video playing) (Male Speaker: Beautiful scenery) And our video is up and running and looking pretty smooth. All right, so let's jump back to Dreamweaver.
Now, this would be great if all browsers were just like Safari, but of course they're not. And if we try to preview this in say Firefox, we'll get our box indicating that there's something there, but there is an X there, indicating it doesn't know what it is. So we have to add a number of different codecs, so it's cross-browser compatible. So let's head back to Dreamweaver and go back into Split view, to the code, and now we're going to alter the video tag to add in a variety of different other sources.
So I am going to open up this video tag a bit, and I am going to press Tab just to show that it's nested here, and we're going to put in a source tag. So this allows us to specify different codecs. The first source tag I am going to put in is the mp4. So I am actually going to go over and pull that right from the initial video tag and drop it in there. Clean up a little extra white space here. And then we need to put in a type attribute, and the type that we have here starts off with video/mp4.
Now, source is an empty tag, so I need to put in the /> there. Now, this is just the first of three different codecs that we'll need to put in, so let's go ahead and repeat that again. So let's go ahead and put in another source tag, and this one will have a different src attribute. This time we're going to put in webm video, and that has a type of video/webm.
And then the third and final one we're going to put in is for Ogg Theora, which is a new format specifically made for HTML5, and you can see it has a file extension of .ogv, so explore_ promo.ogv. We'll choose that. And we need to put in its type as well, which of course is video/ogg for Ogg. All right, so let's close out that source tag.
One thing I do want to point out. When you are doing this you have to make sure that the MP4 codec comes first, and that's because the IOS devices-- iPhone and iPad--have that requirement. That may change in the future, but that's the way it works right now. Okay, so let's go ahead and Save. We still can't preview in Dreamweaver, but we should be able to preview now in Firefox, so let's head there. And now you can see the controls showing up. I'll go ahead and hit Play. (Male Speaker: Beautiful scenery. Plenty of places to ride.) And we'll close on that nice scenic sunset there.
So now we have it working in Firefox. Let's head over to Safari. I'll hit Refresh just to make sure we're getting the same page, and this time I'll go ahead and seek it out a little bit. Oh, I hit that sunset right on target there. (Male Speaker: Beautiful weather.) That's all working swell. We can even go full-screen. (Male Speaker: It just doesn't get any better than this.) I couldn't have said it better myself. Well, keep in mind that the video situation is still very much in flux.
Make sure to test thoroughly to ensure you've got all your video bases covered.
- Updating Dreamweaver CS5 to support HTML5
- Developing for mobile devices and tablets
- Understanding enhanced structural tags
- Creating a basic page layout
- Drawing with the canvas tag
- Implementing CSS3 type effects
- Setting up styles