HTML5 Video - Full Guide (with Examples) (2024)

❮ PrevNext ❯

In this HTML video tutorial, you will learn everything about adding, running and controling videos in HTML pages.

Table Of Contents

HTML Video
HTML Video Multiple Source
HTML Video Controls
1. Autoplay
2. Loop
HTML Video Poster
HTML Video Preload
Conclusion

HTML Video

HTML5 gives us the power to embed video in any web page without using any plug-in.

Before HTML5 we needed to use plug-ins like Flash to embed video on web pages.

The <video> tag is used to embed video in HTML pages. This embeds a video media player support for video playback.

The <video> tag creates a container for the video content. It also supports audio content but for better control of audio content, use the <audio> tag.

Basic syntax:

<video src="URL" height="value" width="value" controls> This text is used for the browser which does not support the video element.</video>

Syntax explanation:

src attribute - It is used to specify the source of the video.
height attribute - It is used to define the height of the video.
width attribute - It is used to define the width of the video.
control attribute - It is a boolean attribute. If it is mentioned then it creates controls like play/pause, mute, etc for the video.
The text written in between the video tag is displayed only when your browser doesn't support the video element.

Let's see an example:

Example

<video src="night-sky.mp4" height="225" width="400" controls> Your browser does not support video element.</video>

Try It

Output

HTML Video Multiple Source

HTML gives us the ability to add multiple sources for the same video.

The <source> tag is used to add multiple sources for the same video.

Multiple sources are necessary when we have multiple video formats for the same video. If the browser does not support one format then the other format will be used.

The browser will choose the first one which it will be able to play.

HTML Video Controls

HTML gives us the ability to add controls for the video.

The <video> tag has a boolean attribute called controls. When it is mentioned will create controls for the video.

controls is a boolean attribute. It is necessary to use it, without it user will have no control over video.

Here is an example of HTML video with and without controls:

Example

<video height="225" width="400"> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

There are also other controls for the video like autoplay, loop, muted, controls, preload, poster, etc. These are all very useful for the video player.

autoplay

The autoplay attribute is a boolean attribute. When it is mentioned the video will start playing automatically.

Here is an example of HTML video with and without autoplay:

Example

<video height="225" width="400" controls> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls autoplay> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

Note: Some browser like Chrome does not let video autoplay if it is not muted. So when using autoplay you need to mute the video.

Example

<video height="225" width="400" controls autoplay muted> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

loop videos

The loop attribute is a boolean attribute. When it is mentioned the video will start playing again and again once played.

Here is an example of an HTML video with and without a loop:

Example

<video height="225" width="400" controls> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls loop> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

HTML video poster

When you want to show a poster image before the video starts playing, or simply say a thumbnail of the video, you can use the poster attribute.

The poster attribute accepts a URL to an image. The image will be displayed until the video starts playing.

When no poster is specified, the first frame of the video is displayed.

Here is an example of an HTML video with and without a poster:

Example

<video height="225" width="400" controls> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls poster="night-sky.jpg"> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

HTML video preload

Sometimes do not want the video to load before the user clicks on it to save data or just want to load the metadata of the video.

The preload attribute is used to specify if and how the video should be loaded when the page loads.

It has 3 possible values:

auto - the browser will decide what to load.
metadata - the browser will load only the metadata of the video.
none - the browser will not load anything.

Here is an example of an HTML video with different preload values:

Example

<video height="225" width="400" controls preload="auto"> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls preload="metadata"> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video><video height="225" width="400" controls preload="none"> <source src="night-sky.mp4" type="video/mp4"> Your browser doesn't support video element.</video>

Try It

Output

Conclusion

To add a video to your web page, you need to use the <video> tag. You can give the URL of the video file as an src attribute in the tag itself, or you can use the <source> tag to specify different video formats.

controls is a very important attribute. It is used to show the controls of the video.

❮ PrevNext ❯