HTML Multimedia tags
HTML5 introduces new tag elements and the most important feature is multimedia tags. Multimedia is defined as the combination of text, sound, and video to express an idea or convey a message. This includes browser support for video files, audio, and image files.
Video Tag:
One of the greatest features of HTML5 is the ability to implement a fully featured Video with Controls. This ability to embed video into webpage has replaced the traditional use of third-party multimedia plugins such as Adobe flash player, Quick Time player, and Silverlight to integrate with the web browser to play multimedia videos. This element can stream video, using a webcam via getUserMedia() or WebRTC, or it can play a video source that you reference using the src attribute:
Video can be embedded into an HTML5 document with the simple syntax using the video tag as follows:
<!doctype>
<html>
<head>
<title>video page</title>
</head>
<body>
<video src="video.mp4" controls ></video>
</body>
</html>
By default, the browser does not show any controls for this element, just the video. This means the video will play only if set to autoplay (more on this later) and the user can't see how to stop it, pause it, control the volume, or skip to a specific position in the video. To show the built-in controls, you can add the controls attribute
You can specify the MIME (Multipurpose Internet Mail Extensions) type of the video file using the type attribute. If not set, the browser will try to automatically determine it.
<video src="file.mp4" controls type="video"></video>
A video file by default does not play automatically. Add the autoplay attribute to play the video automatically
<video src="file.mp4" controls autoplay></video>
Some browsers also require the muted attribute to autoplay. The video autoplay only if muted
<video src="file.mp4" controls autoplay muted></video>
The loop attribute restarts the video playing at 0:00 if set; otherwise, if not present, the video stops at the end of the file:
<video src="file.mp4" controls autoplay loop></video>
Let’s see the video attribute and their description:
|
Attribute |
Description |
|
src |
Used to provide the URL of the video file. |
|
controls |
Used to tell the browser to display the video control set |
|
autoplay |
Used to play the video automatically |
|
muted |
Used to set video initial audio state muted. |
|
loop |
Used to play video continuously within a loop |
|
width |
Used to specify the width of video element in pixels. |
|
height |
Used to specify the height of video element in pixels. |
|
poster |
Used to set a default image displayed instead of the video first frame. |
Audio Tag:
The audio tag is quite similar to the video tag. The audio is placed within an HTML5 document using the <audio> tag. The <audio> tag is used to define sounds, such as music or other audio streams. Below shows a simple <audio> tag that is placed within an HTML file.
<audio controls="controls" autoplay="autoplay"><source src="audio.mp3" type="audio/mp3" /></audio>
Let’s see the audio attribute and their description:
|
Attribute |
Description |
|
src |
Used to provide the URL of the audio file. |
|
controls |
Used to tell the browser to display the audio control set |
|
autoplay |
Used to play the audio automatically |
|
muted |
Used to set initial audio state mute. |
|
loop |
Used to play audio continuously within a loop |
|
preload |
Used to suggest to the browser how it should attempt to preload the audio file. |
In general, by using JavaScript, you can listen for various events happening on a video element, the most basic of which are:
- play when the file starts playing
- pause when the video was paused
- playing when the video is resumed from a pause
- ended when the end of the video file was reached
Leave a comment
No Cmomments yet