Video
The <video> element lets you embed a video on your site. You do so by writing:
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.:
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:
Last updated
Was this helpful?