You are going to add a video to your page today instead of just an image. There is a video tag that you’ll use, <video>. Here’s the code and then we’ll talk about its parts.

 

The video tag has opening and closing tags. It takes a source, src, attribute just like an image, except the source gets its own tag. The type of file you are going to want most likely is mp4. At the time of writing this, it’s supported by every browser, meaning all browser types recognize it and will play your video.

You can link to a video just like you do an image with a file path.

Also like an image you can add a width and height attribute. It doesn’t matter which order you put them in. There are some extra attributes though.

The type attribute you will use in some other cases. This is the first time we’ve seen it. It’s declaring that it’s a video in the mp4 format. You can list several sources for your video with different file formats. That’s really only needed if one of your formats isn’t accepted by all browsers. Then there’s an alternative for the browser to use.

The “Your browser does not support video.” is there to show if the video doesn’t play. The video will show over that unless the video doesn’t load, then you will see that message instead.

There’s one more thing there. What haven’t I mentioned.

It just says “controls.” That shows controls on your video to play and pause your video. Another option is autoplay. Personally, I hate autoplay videos, and there are some browsers that don’t allow it. Other browsers use autoplay as the default if “controls” is not added.

If you want to try some other things, you could have your video loop or be muted. You would just write those words as an attribute. They don’t take an assignment (there’s no equals sign), just the word.

You can just use <video src=”movie.mp4″></video>. It’s just not the most proper way to do it.

To link to an online video, use another method.

You can watch the video of this lesson online.