Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,480
- Баллы
- 155
In this article, we'll learn which tag we use to create a video element in HTML, as well as the attributes that define how the video will behave.
Now, revealing the secret, to add videos to an HTML document, you need to use the video tag. First, we create the video tag and then add the controls attribute to display a playback control.
<video width="640" height="360" controls>
</video>
Next, we add the <source> tag with the path to the video file.
An interesting detail: we can also add more than one file with a different extension as a security measure, HTML will consider the first supported file.
In this case, we'll add a file with the .mp4 extension. If the file isn't supported or has a problem, HTML will consider the next supported file.
Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.
<video width="640" height="360" controls>
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser does not support the video tag
</video>
The video files supported by the browser are:
We also use the type attribute in the <source> tag to inform the browser of the file type being used, it's a good way to maintain semantic HTML.
This will be the result:
Video Tag Attributes
In addition to the controls attribute, we can include other attributes in the <video> tag:
<video width="640" height="360" controls poster="./img/play.jpg">
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser doesn't support the video tag
</video>
In the code above, we added the poster attribute that displays an image until the user plays the video. This is the result:
This article covered
Daniel Nogueira
Now, revealing the secret, to add videos to an HTML document, you need to use the video tag. First, we create the video tag and then add the controls attribute to display a playback control.
<video width="640" height="360" controls>
</video>
Next, we add the <source> tag with the path to the video file.
An interesting detail: we can also add more than one file with a different extension as a security measure, HTML will consider the first supported file.
In this case, we'll add a file with the .mp4 extension. If the file isn't supported or has a problem, HTML will consider the next supported file.
Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.
<video width="640" height="360" controls>
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser does not support the video tag
</video>
The video files supported by the browser are:
- MP4
- OGG
- WebM
We also use the type attribute in the <source> tag to inform the browser of the file type being used, it's a good way to maintain semantic HTML.
This will be the result:
Video Tag Attributes
In addition to the controls attribute, we can include other attributes in the <video> tag:
- muted specifies that the video is muted
- loop specifies that the video plays in a loop
- autoplay specifies that the video plays automatically
- poster displays an image while the video is loading or until the user presses play
<video width="640" height="360" controls poster="./img/play.jpg">
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser doesn't support the video tag
</video>
In the code above, we added the poster attribute that displays an image until the user plays the video. This is the result:
This article covered
- <video> tag
- <source> tag
- <video> tag attributes
Daniel Nogueira