HTML5 Video
In this tutorial you will learn how to embed videos into an HTML document.
How To Embed a Video into your HTML Document
Adding a video into your web page is an easy task with the HTML5 Video Element.
The HTML5 <video> element provides a standard way to embed video in web pages. The video element is somewhat new, but it works in most of the modern web browsers. You can checkout what elements are supported in the various browsers people use, by verifying with this website Can I Use
Checkout the example below.
<video width="730" height="410" controls>
<source src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4" type="video/mp4">
Your browser doesn't support HTML5 Video.
</video>
Let’s break down the code.
We start off with the opening <video> tag which has a few attributes width="730" height="410" controls Those attributes are for the width, height and setting the controls like play, pause and volume.
Then after the opening <video> tag, we then have the <source> which is a self closing HTML Element. Inside the <source> tag, we have a few attributes src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4" type="video/mp4".
We have the src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4" attribute with the value of the location where the video is located on our web server. We then have the type="video/mp4" attribute and value that specifies what type of video we are using. In this example we are using an mp4.
Note: additional file types supported by the HTML5 Video Tag are:
type="video/webm"type="video/ogg"
Then you will notice the line that says Your browser doesn’t support HTML5 Video.. This wil only be visible if the browser doesn’t support the HTML5 Video Tag.
Finally we close off with the </video> tag.
An Alternative HTML5 Video Syntax
<video width="730" height="410" controls="controls" src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4">
Your browser doesn't support HTML5 Video.
</video>
In the example above, we add the src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4" right into the opening <video> tag.
Additional HTML5 Video Features
Some of the features mentioned below might be dependent on the user settings and the browser used.
HTML
Inside the openning <video> tag, you can add the attribute autoplay which will autoplay the video when the page loads.
<video width="730" height="410" controls autoplay>
<source src="video/60_Days_of_Code_Develop_a_Coding_Habit.mp4" type="video/mp4">
Your browser doesn't support HTML5 Video.
</video>
Other features:
- loop – Makes the video start playing again whenever it finishes.
- muted – Causes the media to play with the sound turned off by default.
- poster – The URL of an image which will be displayed before the video is played. It’s purpose is for a splash screen or advertising screen.
- preload – Used for buffering large files. It can take one of three values: none, auto or metadata.
That’s how to use the HTML5 Video tag to display your videos on your web page.