To play a video in HTML5, the video element is used . To customize this element, we can use the following attributes on it:
- src: video source, it can be any video file
- width: element width
- height: element height
- controls: adds playback controls
- autoplay: sets autoplay
- loop: Sets the video to repeat
- muted: disables sound by default
Although we can set the width and height, they won’t have any effect on the aspect ratio of the width and height of the video itself. For example, if the video is 375×240, then, for example, in the settings, the width=”375″ height=”280″ video will be centered on the 280 pixel space in the HTML. That allows you to save the video from the distortion that would be when stretching.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video in HTML5</title>
</head>
<body>
<video src="mov_bbb.mp4" width="400" height="300" controls ></video>
</body>
</html>
Video in HTML5
Apply the auto play and attributes loop:
<video src="mov_bbb.mp4" width="400" height="300" controls autoplay loop ></video>
Now the video will automatically play an infinite number of times.
If you need to turn off the sound during playback, then we can use the attribute muted:
<video src="mov_bbb.mp4" width="400" height="300" controls muted ></video>
preload attribute
Another attribute – preload is designed to manage video loading. It takes the following values:
auto: The video and associated metadata will be downloaded before the video starts playing.
none: the video will not load in the background until the user clicks on the play button
metadata: in the background, before playing, only metadata (data about format, duration, etc.) will be loaded, the video itself is not loaded
<video src="mov_bbb.mp4" width="400" height="300" controls preload="auto"></video>
poster attribute
The poster attribute allows you to set an image that will be displayed before the video starts. The path to the image is passed to this attribute as a value:
<video src="mov_bbb.mp4" width="400" height="300" controls poster="mycat.jpg"></video>
Video format support
The main problem with using the element video is that different web browsers support certain formats. Using nested source elements , you can specify multiple video sources, one of which will be used:
<video width="400" height="300" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.webm" type="video/webm">
<source src="mov_bbb.ogv" type="video/ogg">
</video>
The element source uses two attributes to set the video source:
- src: path to the video file
- type: video type (MIME type)
If the browser does not support the first type of video, then it tries to download the second video file. If the type of the second video file is not supported, then the browser accesses the third video file.