Embedding videos in HTML-based documents is also an essential part of web development. It is because your browsers do not have any consistent standard to define media files embedded in your web page. In this chapter, you will learn about including media files on your web page.
The Video Element
This is a new feature introduced in HTML for embedding video and incorporating movie files and video streaming. It is done using the <video> tag, which supports three video formats currently. These are:
- MP4
- Ogg and
- WebM
Out of these three formats, the most common format in which all the browsers (such as Internet Explorer, Google Chrome, Firefox, Safari, Opera) supports is the mp4 file format.
VIDEO Tag Attributes
- src: This is used to set the URL or path from where the video file will get fetched.
- autoplay: This attribute specifies that as soon as your web page gets ready, the video embedded in your page gets played at that moment.
- controls: This tells the browser what player-controls / buttons (such as play/pause, etc.) to be displayed on the page with the video.
- width and height: This is used to assign the player's width and height in which the video will be shown.
- muted: This tells whether the audio part of the specified video should be kept mute or not.
Here's a code snippet as to how video can be incorporated:
Example:
<video width="320" height="240" controls autoplay muted>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>