What are the media element tags introduced by HTML5 ?
HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.
Media Tags:
Media Tag | Description |
---|---|
<audio> | An inline element is used to embed sound files into a web page. |
<video> | Used to embed video files into a web page. |
<source> | Used to attach multimedia files like audio, video, and pictures. |
<embed> | Used for embedding external applications, generally multimedia content like audio or video, into an HTML document.< |
<track> | Specifies text tracks for media components, specifically for audio and video elements. |
Advantage of Media tag:
- Plugins are no longer required
- Speed – anything naturally integrated into a browser will be rendered and executed in a faster fashion than imported third-party
- Native (built-in) controls are provided by the browser.
- Accessibilities (keyboard, mouse) are built-in automatically
Table of Content
- <audio> Tag
- <video>
- Adding youtube videos
- <embed>
- <source>
- <track>
<audio> Tag:
It is a useful tag if you want to add audio such as songs, or any sound files into your webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Example 1: In this example, we will use <audio> tag with an example.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < p >Audio Sample</ p > <!--- Autoplay ensure to run audio automatically after running the program --> < audio controls autoplay> < source src = "https://media.w3wiki.net/wp-content/uploads/20190531165842/Recording1514.ogg" type = "audio/ogg" > < source src = "https://media.w3wiki.net/wp-content/uploads/20190531165842/Recording1514.mp3" type = "audio/mpeg" > </ audio > </ body > </ html > |
Output:
<video>:
It is a standard way to embed a video into your web page.
Syntax:
<video src="" controls> </video>
Example 2: In this example, we will see the use of <video>tag.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < p >Video Sample</ p > < video width = "400" height = "350" controls preload> < source src = "myvid.mp4" type = "video/mp4" > < source src = "myvid.ogg" type = "video/ogg" > </ video > </ center > </ body > </ html > |
Output:
Adding youtube videos:
Youtube videos can also be directly added to your web page using the embed video option on any youtube video. <iframe> element is used to add the video with the src attribute but a shortcut to that is simply to go to any youtube video and right-click on the video, then select the copy embed code option.
Example 3: In this code we will see how to add youtube videos with the help of iframe tag in an HTML document.
HTML
<!DOCTYPE html> < html > < head > < title >Page Title</ title > </ head > < body > < iframe width = "942" height = "530" src = "https://www.youtube.com/embed/KWnoiOimNbs" title = "Introduction to Python | Sample Video for Python Foundation Course | w3wiki" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </ iframe > </ body > </ html > |
Output:
<embed>:
It is used as a container for embedding plug-ins such as flash animations.
Syntax:
<embed attributes>
Example 4: In this example, we will use <embed> tag with an example.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < p >Embed Sample</ p > < embed src = "https://media.w3wiki.net/wp-content/uploads/20210723103530/simplescreesdfdsrecorder2021071.gif" width = "300px" height = "300px" > </ body > </ html > |
Output:
<source>:
As you can observe that <audio>, <video> elements contain the <source> element, the <source> tag is used to attach multimedia files.
Syntax:
<source src="" type="">
...
</source>
Example 5: In this example, we will use <source> tag with an example.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >Source Tag</ h2 > < audio controls> < source src = "audio.mp3" type = "audio/mp3" > </ audio > </ center > </ body > </ html > |
Output:
<track>:
It is used to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in it.Thus it is a simple sector for the <audio> and <video> elements.
Syntax:
<track Attribute>
Example 6: In this example, we will use <track> tag with an example.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Track Tag: Both Audio and Video</ h2 > < video width = "300" height = "300" controls> < source src = "myvid.mp4" type = "video/mp4" > < track src = "https://contribute.w3wiki.net/wp-content/uploads/11.mp4" kind = "subtitle" srclang = "en" label = "English" > </ video > </ body > </ html > |
Output:
Contact Us