Video

The <video> element lets you embed a video on your site. You do so by writing:

<video src="path/to/videofile.mp4" controls>
    <p>Your browser doesn't support HTML5 video.</p>
</video>

As you see, the <video> element have two attributes, src and controls. The src, as with images, is the path to the video file. The controls attribute is a boolean attribute, meaning that when present the video controls are accessible (usually by hovering over the video element with your mouse). If you remove the controls attribute, users will not be able to play or pause the video.

The paragraph within the element is the fallback content, which will be displayed if the browser doesn't support the <video> element.

Not at browsers support all video formats. Thus you may need a fallback video. This is done by referencing several files, e.g.:

<video controls>
    <source src="path/to/videofile.mp4" type="video/mp4">
    <source src="path/to/videofile.ogg" type="video/ogg">
    <p>Your browser doesn't support HTML5 video.</p>
</video>

As you can see, instead of using the src attribute, the <source> element is used instead. As of February 2016, the following browser support these video formats:

Browser	MP4	WebM	Ogg
Internet explorer	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Safari	Yes	No	No
Opera	Yes	Yes	Yes
Microsoft Edge	Yes	Yes	No

Why some formats are supported and others aren't is outside the scope of this course. You can read more about supported video formats here.

You already know about src and controls. Some other attributes you should know about are autoplay, height, width, loop, muted and poster.

autoplay is a boolean attribute, and if present the video automatically starts to play as soon as it can, without stopping to finish loading the data.

height and width behaves like with the <img> element. The height and width should be the same dimensions as the video file.

loop is a boolean attribute that will seek back to start when the video reaches the end.

muted is a boolean attribute which sets the default setting of the audio to silenced.

poster takes a URL to an image as a value. This image is displayed as a poster frame until the user plays or seeks. If this attribute is not present, the first frame of the video will be displayed. This attribute is used as shown:

<video controls poster="images/videofileposter.jpg">
    <source src="path/to/videofile.mp4" type="video/mp4">
    <source src="path/to/videofile.ogg" type="video/ogg">
    <p>Your browser doesn't support HTML5 video.</p>
</video>