Audio Video Tag In HTML
Most of the time, a developer wants to make an interactive web site. Sometimes, developers use flash media, and sometimes developers use audio or video media on a web page.
HTML5 includes a native feature to use audio and video on the web page without the need for Flash. For this purpose, we use <audio> and <video> tags to add media to a website. You need to set "src" and media "type" attribute to identify the media source and include a controls attribute so the user can play and pause the media.
Audio <audio> Tag: Used to add audio media to a web page.
MIME Types for Audio Formats:
Format : MIME-type
ØMP3 : audio/mpeg
ØOGG : audio/ogg
ØWAV : audio/wav
Video <video> Tag: Used to add video media to a web page.
MIME Types for Video Formats:
Format : MIME-type
ØMP4 : video/mp4
ØWebM : video/webm
ØOgg : video/ogg
Source <source> Tag: Used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>. The <source> tag allows you to specify alternative video/audio/image files that the web browser may choose from, based on its media type, codec support, or media query. The <source> tag allows us to play or show the media according to the supported web browser.
Track <track> Tag: Used as a child of the media elements <audio> and <video> and adds a time-based data source to the parent media element. It lets you specify timed text tracks (or time-based data), for example, to automatically handle subtitles. The tracks are formatted in Web VTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).
Audio Video Tag Attributes:
| Attribute | Value | Description |
| autoplay | Specifies that the audio or video will start playing as soon as it is ready | |
| controls | Specifies that audio or video controls should be displayed (such as a play/pause button etc). | |
| pixels | Sets the height of the video player | |
| loop | Specifies that the audio or video will start over again, every time it is finished | |
| muted | Specifies that the audio output of the video should be muted | |
| URL | Specifies an image to be shown while the video is downloading, or until the user hits the play button | |
| auto | Specifies if and how the author thinks the video should be loaded when the page loads | |
| URL | Specifies the URL of the video file | |
| pixels | Sets the width of the video player |
Example: Audio Video Tag
<audio controls>
<source src="test-audio.ogg" type="audio/ogg">
<source src="test-audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<video autoplay width="400" controls>
<source src="test-video.mp4" data-src="" type="video/mp4">
<source src="test-video.webm" data-src="" type="video/webm">
<source src="test-video.ogv" data-src="" type="video/ogg">
Your browser does not support the video tag.
</video>
*Note: Any text between the <video> and </video> tags will be displayed in browsers that do not support the <video> element.
0 Comments