In this lesson, you are going to learn how to add an HTML5 video to a page in Adobe Dreamweaver. Now, before we get started we do have to set up a site for this module. And so we're gonna go to our site menu, to new site. We're gonna click on this folder icon over here. Now I've already put the module six media folder from the lesson files folder on my desktop so that it's easier for me to use. So you're gonna navigate out to wherever you have that folder. And we're gonna click on the select folder button. I'm going to name this, module six media, and we're gonna click on the save button. Now, if you have never created a site or if you want more information about why we use sites in general, you can go back to module one to managing sites in Dreamweaver and learn a little bit more about working with sites. From our files panel over here on the right, we are gonna open up featured hike. Now on this page, we have our featured hike and it's Danforth Falls and they've got a really great waterfall area. So what we wanna do is we don't wanna just put a photo here but we wanna put a video here. So what we're going to do is we're gonna make sure that we are in design view and over here on the right, we're gonna click in where we have our side and to make sure you're in correct place, look down here at our status bar down along the bottom. And you can see, it will say a side and right article. And if you see that, you know that you're in the right place. With HTML in the past, we used to have to jump through hoops in order to put a video onto the page. But now with HTML5, it's very easy. So we're gonna go over to the insert panel over here on the right. We're gonna choose HTML from the dropdown at the top of the panel. And we're gonna scroll down towards the bottom to HTML5 video. And we're gonna click on that. That's just step one, that puts a placeholder in there. But down here in our properties panel, this is where we have all of the information that we need in order for this video to actually work. So we're gonna go over to the files panel, click back on that files panel. And the first, probably most important feature in this properties panel is the source. So that's the most important thing that we need to do. So we're gonna go to our media menu over in our files. We're gonna open that up because we're gonna use this 0.2 file, this little bullseye icon, just to the right of source. And we're gonna click on that and drag it over to our waterfall. Right now, because we have a placeholder here, that place holder's pretty small. And if we left it this way, that's how big our video would be, which is kind of small. So we're gonna to go down to the width and we're gonna put in a width of 300 and a height of 500. And so this is where our video will be. When you have a video on the page if we were to leave it like this, when our page loaded, all our viewers would see would be a black box. So right below the source, we have the ability to use what is called a poster. And a poster is just an image of what you might see once that video starts to play. So we're gonna go back over to our files panel. And this time we're gonna open up our images folder. We're gonna scroll down and for our poster we're gonna use that same point to file. We're gonna click on that icon. We're gonna drag it over to waterfall.PNG. So this is a photograph of that waterfall. We do want to have some fallback text. So in case somebody can't see what our video is, we can type in video of the falls at Danforth Falls during spring, after a rain. So the water is raging. Down in the bottom left, we have a couple different options. So the first is, we have controls, so we can choose whether or not our viewers are able to pause or play or even replay that video. So we're gonna leave the controls on. You also have the ability to choose to have it auto play. So as soon as the page loads, the video will play. Now, here's the thing about that. If you want that feature to actually work in a browser, some of the modern browsers don't like this auto play feature but one of the ways to get around it is to click on this muted button. Now, everything that we have done, a lot of the previewing that we've done of pages has been through our live view. And if we go to our live view, we can see it thinking a little bit but this isn't the best place to preview your video. So we're gonna go to the file menu to save, and I'm gonna go out to my browser and I'm gonna do a control O, I'm on a PC. If you're on a Mac, you're gonna do a command O, and that will allow us to open a file. And we should navigate out to wherever we have that module six media folder. And we're gonna double click on that featured hike to open it up. So you can see that our video has started and our video is playing. But one of the things that having it auto play kind of takes away is the sound of the falls. So our viewer would have to know, first of all, that there is sound. And second of all, they would need to know that they can turn that sound back on and then click on that play button. So then you can hear that sound. I'm gonna to go back to Dreamweaver. So you have to decide whether or not you want your video to play, whether or not you want it to auto play right at the beginning. If you do, do you need sound on it or is it okay that it is muted? And are you going to give your users control over playing and pausing that video? So in this lesson, you learned how to add an HTML5 video to a page in Adobe Dreamweaver.
