HTML
In this tutorial we will learn about the video tag to work with video files in HTML.
The video tag is a HTML5 element and it is used to embed video in the web page.
video
In the following example we are creating a video element.
<video width="200" controls src="path/to/video-file.mp4"> Your browser does not support the HTML video tag. </video>
Another way we can do this is by using the source tag and including multiple files.
source
<video width="200" controls> <source src="path/to/video-file.mp4" type="video/mp4"> <source src="path/to/video-file.ogg" type="video/ogg"> <source src="path/to/video-file.webm" type="video/webm"> Your browser does not support the HTML video tag. </video>
Note! In the above example the text Your browser does not support the HTML video tag. will be displayed if the browser does not supports video tag.
Your browser does not support the HTML video tag.
Following are the supported video format.
You can use the Find Fileinfo of this website to find the MIME type of the video files.
We can also use the source tag to include one or more video files.
For this we set the src attribute to the video file URL and type attribute to the MIME type of the video file.
src
type
In the following exmaple we are using 3 different file types.
<source src="/video/video-file.mp4" type="video/mp4"> <source src="/video/video-file.ogg" type="video/ogg"> <source src="/video/video-file.webm" type="video/webm">
If we are using the source element then we can skip the src attribute in the opening video tag.
Following are the attributes that we can add to the video tag.
none
auto
metadata
url