The Video Element6:16 with Nick Pettit
The video element allows us to embed video files into an HTML, very similar to the way images can be added.
- <video> - The video element allows webpages to play video files inline with other content.
Video and Audio URLs
Here are the video and audio files used in this course. There is no need to download these files; they are just listed here so that you can easily copy these URLs into your code.
Playing Video and Audio Locally
If you choose not to use Workspaces for this course, you'll need to follow these instructions. Otherwise you can ignore them.
When playing video and audio files locally that come from a remote source, the same-origin policy requires a web server to be running.
There are many ways to do this on both Mac and PC, but one of the easiest ways is to install an all-in-one application like MAMP.
To get started, click the workspaces button next to this video. 0:00 We're going to be using workspaces in these videos. 0:03 But if you prefer to use a different text editor, 0:06 be sure to read the notes associated with this video. 0:10 They contain important details about setting up a local web server, and 0:13 working with files. 0:17 Now in your workspace you should already have the beginnings of a project 0:19 just like the one I have here. 0:23 But before we start writing our own code, 0:25 let's take a quick tour of what's already in the project. 0:28 So first, we have this html file called simple-video.html, 0:32 and here's what that file looks like when you click on it and open it up. 0:40 And you'll notice some pretty familiar things. 0:46 We have DOCTYPE, html, body, a head element, a few meta elements. 0:49 The title element, some links and 0:55 in these link's elements were including normalize.css from our css folder. 0:58 We're including a font that we want to use throughout, and 1:05 we also including this file main.css. 1:10 And let me just open up main.css so you can take a look what is in there. 1:14 And there is pretty basic stuff just to make our web page 1:20 look good and kind of a starting point. 1:26 So nothing necessarily specific to what we are going to be working on. 1:28 However down here, you will also notice video audio and 1:32 MEJS tree house, which stands for Media Element JS Treehouse. 1:37 And this is all going to be kind of styling our audio and video elements. 1:43 And basically just centering them on the page. 1:48 So that's all that this is doing. 1:52 If you don't want your video and audio elements to be centered. 1:54 You can go ahead and remove this or style them a little bit differently. 1:58 So I'm going to close that, and 2:03 down here you'll notice we'll have an H1 element and a wrapper element. 2:05 So right now there's really not a whole lot there. 2:11 Let's click the preview button and we'll click on port 80 which is the default. 2:13 and that's going to open up a page that looks like this. 2:19 So here we have an HTML file. 2:22 We'll click on that. 2:25 Simple video HTML. 2:26 Here's what it should look like to start out with. 2:28 There's just an H1 here with HTML video and audio. 2:30 And then there's nothing inside of our wrapper. 2:34 But you can kinda see it there, it's that thin grey bar. 2:38 And we're actually gonna fill it up with content, so 2:41 that will actually extend down the page. 2:43 So let's get started with the video element. 2:46 I'm going to type video and then I'm going to type src for 2:50 source, which is very similar to the image element. 2:56 And right here, I'm just going to past a URL that I already have handy. 3:00 And this is a link to a video file and 3:05 you can find these particular URLs in the notes associated with this video. 3:09 And you'll also find it in upcoming workspaces, 3:15 if you choose to open up a different workspace. 3:18 So I have added that video there, and I'm going to add an attribute called type. 3:22 And this type is going to be video/mp4, 3:31 because that's the particular file format that we're using here. 3:33 In this case, we're going to use a style of the video, "tag", that is self-closing. 3:40 Now we don't necessarily have to do that but 3:47 this is the most simple type of way to include video to our page. 3:49 So let's start off with that. 3:55 So we'll save that out and switch over to our preview. 3:57 And when we refresh the page, you can see that we now have this video on our page. 4:01 But there's a problem. 4:05 This video isn't playing automatically, but 4:07 there's also no controls to start the video playing. 4:10 So we need to actually add that ourselves. 4:13 So on our video element. 4:16 We'll add the attribute controls. 4:19 And we'll add that attribute without any kind of value attached to it. 4:24 Because it's a boolean attribute. 4:29 That means it can either be true or false. 4:31 So by having the controls attribute there, it means that it's true and 4:34 it will display controls. 4:39 So we'll save that out, switch back to our preview and refresh. 4:41 And as you can see, we now have these controls for our video. 4:45 And now we can hit Play, and you'll see that the video starts to Play. 4:49 And it kinda moves along the timeline here just like you'd expect. 4:58 We also have a little audio control here and a full screen button. 5:01 And this is all built directly into the browser, so 5:05 depending on what browser you're using, this might look slightly different. 5:09 In this case I'm using Google Chrome, but in a browser like Firefox, or 5:13 Internet Explorer, or Safari this could look slightly different. 5:17 And that's okay. 5:21 Now, if we remove controls we could also make the video auto play. 5:23 So, we'll save that, switch back, and refresh. 5:30 And as you can see, the video is now playing by itself, and 5:34 there's no controls. 5:37 So, we didn't actually start the video, but we also can't stop the video. 5:38 So, let's go back. 5:42 We'll add controls back in, save and refresh, and 5:45 that will bring us back to what we want. 5:49 Now, we could also have controls and autoplay. 5:51 So we can make the video play automatically on page load and 5:54 also have our own controls. 5:58 It's really up to you and kind of up to use case that you are in. 6:00 However, be careful when you add Autoplay because you don't always want every 6:05 video on your page or every audio element on your page to play automatically. 6:10 That would be bad. 6:14
You need to sign up for Treehouse in order to download course files.Sign up