HTML Video
The <video> tag is also provided in HTML 5. Video files are attached to a web page using the HTML video suffix. The HTML5 <video> element defines how to embed a video in a web page in a standard way.
The HTML 5 <video> tag allows you to decide how the video should be played.
Brief History
Prior to HTML5, Video files could only be linked to websites using different multimedia plugins in HTML4 and earlier versions (e.g., Adobe Flash). In HTML 5, the <video> tag was added (officially referred to as HTML5 - without the space). HTML5 video is now supported by major websites such as YouTube and is widely introduced in major browsers.
HTML5 includes a native video feature that supports three video formats (MP4, WebM, and Ogg), making video embedding far easier. You may specify the video's external source as a file or a URL.
Example of HTML 5 Video tag
The type attribute specifies the video file's format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<video width="480" height="320" controls>
<source src="sea_waves.mp4" type="video/mp4">
Unfortunately, This browser does not support the video tag.
</video>
</body>
</html>
Output:
How does this work?
Video functions, such as play, pause, and volume, are added with the controls attribute. It's a smart idea to have height and width attributes wherever possible. The page can flicker while the video loads if the height and width are not set.
You may use the
Controls for the video
HTML5 video controls should always be included in your player. The user can manually start and stop the video, skip to a specific point using the slider, toggle between window and full screen video display, and monitor volume using special buttons in the player window. Include the controls attribute to add video controls.
Dimensions of Players
The height and width attributes can be used to define the size of your player. The aspect ratio of the video will remain the same.
Choosing Sources
Preload, autoplay, loop, and other HTML 5 attributes are supported. It is also necessary to specify the video's source. You can do it with a simple src attribute, but it's recommended that you use the <source> tags.
The use of the <source> tags helps you to identify different sources, which is why it is considered a best practice. The HTML5 video player supports three different video formats (.mp4,.ogg, and.webM), although not all of them are supported by all browsers. This means you can incorporate video sources in a variety of formats to ensure the consumer can see it.
Choosing Sources
Preload, autoplay, loop, and other HTML 5 attributes are supported. It is also necessary to specify the video's source. You can do it with a simple src attribute, but it's recommended that you use the <source> tags:
The use of the <source> tags helps you to identify different sources, which is why it is considered a best practice. The HTML5 video player supports three different video formats (.mp4,.ogg, and.webM), although not all of them are supported by all browsers. This means you can incorporate video sources in a variety of formats to ensure the consumer can see it.
If the user's browser doesn't support one of the formats, you can specify multiple formats as a fallback using the source feature.
Consider the following scenario:
<video controls>
<source src="sea_waves.mp4"/>
<source src="sea_waves.webm"/>
</video>
The optional form attribute is used by the browser when parsing the tag to help it determine which file to download and play. It will play sea_waves.webm if the browser supports WebM; if not, it will search if it can play MPEG-4 videos, and so on.
Note: Always include the type attribute in the source element to improve efficiency. Otherwise, the browser would have to load each video file one by one before it finds one it can play!
Fragments in the Media
You may determine the exact portion you want to play by adding a media fragment to the media URL. Simply add #t=[start time][,end time] to the media URL to add a media fragment. For instance, to play the video from seconds 10 to 20, you might type:
<source src="sea_waves.mp4#t=10,20" />
You may also define the times in hours:minutes:seconds, for example, #t=00:01:05 to begin the video at one minute and five seconds. You could also specify #t=,00:01:00 to only play the first minute of the video. You must ensure that your server can handle Range Requests: Accept Ranges: bytes should be reviewed. It's allowed by default on Apache and a lot of other servers, but it's worth double-checking.
HTML Video Format
| Video File format | Media Type |
|---|---|
| .mp4 | Video/Mp4 |
| .ogg | Video/ogg |
| .webM | Video/webM |