Working with HTML5 video is incredibly easy inside of Dreamweaver CC.
I'm working with this document index.html which is available inside the Chapter 8 folder of your exercise files folder.
What I'd like you to do is scroll down towards the center of the document and underneath the Blog post here, what I'd like you to do is place a blinking cursor.
With the blinking cursor here, what we want to do is insert HTML5 video.
And in order for us to do that, we have a couple of different options.
You can come over to the Insert panel and from the Insert panel under the Media category, you'll find an HTML5 Video button.
Additionally, if you come over to the Common section, you'll find that same HTML5 Video option.
Finally, if you come over to the Insert menu, under the Insert menu, you can choose HTML5 Video, or you can mash your hands on the keyboard, through this keyboard shortcut.
Either way, what will happen once you select that command is a video placeholder will be placed within the document.
If you want to take a look at the Split view, you'll see that we've added nothing more than a video element with the controls attribute automatically applied.
The controls attribute is applied.
If you didn't want the controls attribute applied, you can come over and deselect this option here in the Properties panel.
Adobe has done a great job of making all the options available to you for video available here within the Properties panel.
So, you can work in a very visual way.
If you have an ID or Class that you want to assign to this video object, go ahead and assign those here.
What we want to do first however, is probably the most important attribute which is the Source attribute, the location of the video file that we actually want to play.
So, what I'd like you to do is click the folder icon to the right of the text field to open up the Select Video dialog box.
You'll notice inside our directory, we have an html5-video folder.
And in there, we have three different video formats.
These are the three different video formats that you need to deliver a consistent experience across all browsers.
For our purposes right now, we're going to choose bentley.mp4, but notice, we have an .ogv file and a .webm file, and they're named exactly the same as the MPEG-4 file.
So, with that selected, you can come over and click Open and once you click Open, not only does the Source get populated but Alt Source 1 and Alt Source 2 also get populated, again because we had the same file name with the different extensions for the different formats.
You'll also notice that your code is updated appropriately.
One of the things that you'll notice that's missing is the width and the height.
Now, if you don't know the width and the height, you need to figure it out, so you can plug it in, but chances are you want a poster frame.
A poster frame is an image that represents what the video will play.
Now, the poster frame should be the same dimensions as your video and it just so happens that I created a poster frame for us.
So, what I'd like you to do is come over and click the folder icon to the right of that text field, inside that same directory, you'll find a file called poster.png.
Go ahead and select that.
You'll notice the dimensions are 426 x 240.
If you click Open, the Width and the Height are set to those same dimensions.
Now, there are some additional options over here down towards the bottom left hand corner.
We have controls which we discussed earlier.
We can loop the video which means the video will play once it's done playing, so it'll go back to the beginning and play all over again.
You can auto play the video.
Typically, that's not a good idea.
People don't like when video automatically plays on a web page.
If you do select this option, it's my recommendation to choose the Muted option, so at least they don't hear the audio.
The video will play but it won't be as distracting because they won't be able to hear anything.
I'm going to keep both of those deselected.
Then there's a Preload menu.
None is the default, but you'll notice that the Preload attribute isn't assigned to the video element at all.
So, if you really wanted the None preload attribute to be assigned, you'd have to come over and choose one of these other options and then come back and choose None.
If you choose None, no preloading will take place and that's typically not going to deliver the best experience.
What you should do at least is choose "metadata".
That way, things like the duration and the dimensions will be preloaded.
So, the end user will have a better understanding of what to expect from that video.
You could also choose "auto" which the browser would then control whether it wants to preload content or not.
So, I'm going to come over here and choose "metadata".
So, those are all the basic attributes.
We'll come back and take a look at the Flash Fallback attributes, but before we do that, what I'd like to do is come back into the Design view and then go ahead and click on the Live view.
By clicking on the Live view, that video element should render properly here inside of Dreamweaver CC, and you should be able to preview it.
So, I'll come over and click the Play button.
And sure enough the video is playing.
Now, it is my recommendation to test this page in Firefox, Chrome and Internet Explorer to make sure that you are getting the desired results.
But as you can see with these new features inside of Dreamweaver CC, inserting HTML5 video is incredibly easy.
