Introduction of HTML Media tags
In this html media section we will learn all about <video> and <audio> tags like:
- How to use Audio & Video tags?
- What are their attributes?
- And how we can decorate them according to our need?
With the revolution of technology, html becomes more advance and more interactive. The revolution of media in html increases the beauty and experience of web designing. We can create interactive and beautiful web page using HTML Media. There are several things in media like video, music, sound, animation and much more things.
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia
Multimedia comes in many different formats for examples: images, music, sound, videos, records, films, animations.
Web pages often contain multimedia elements of different types and formats.
Browser Support
Audio, video, and animation have been handled differently by the major browsers. Different formats have been supported, and some formats require extra helper programs (plug-ins) to work.
Multimedia Formats
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Modern Media on the Web
HTML5 introduced two new elements that include playback functionality for supported media formats. These two new elements are audio and video.
HTML5 <audio>
The audio element can be used to add audio content to a web page. Files embedded in this way are played by the audio playback engine built into all HTML5 compliant browsers.
Audio Attributes -
| Attributes |
Descriptions |
| src |
Defines the URL where the audio content is hosted. |
| type |
Defines the file format |
| controls |
must be specified or no visual element will appear to control playback of the content. |
| autoplay |
If this attribute is used, the audio will begin to play as soon as enough has been downloaded to begin playback. |
| loop |
When this attribute is present the audio file will automatically start over once it has played through. |
| muted |
If you want audio content to be muted when initially loaded, use this attribute. |
| preload |
This element can be used with the value none, metadata, or auto to tell the browser how much of the audio file to preload. |
HTML5 <video>
The video element follows the same basic syntax as the audio element. All we need to do is use the src element to identify the video URL and add the controls attribute so that our website visitors can control video playback. We're also going to use the width and height attributes to set the size of the video player, but this is optional.
Video Attributes -
| Attributes |
Descriptions |
| autoplay |
If this attribute is used, the video will begin to play as soon as enough of the video has been downloaded to begin playback. |
| loop |
When this attribute is present the video will automatically start over once it has finished playing. |
| muted |
If you want the audio content of the video to be muted use this attribute. |
| preload |
This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute. |
| poster |
Use this attribute to select an image to display as the poster for the video until playback begins. |
Example of video tag
Formats and Support Problem
As we are talking about video and audio, these two media comes in many formats, so it’s might possible that some old browser may not support some formats. Now days maximum newly browsers support almost all media formats but it may they may not support some.