What are the media element tags introduced by HTML5 ?
HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. This 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:
- <audio>: It is an inline element that is used to embed sound files into a web page.
- <video>: It is used to embed video files into a web page.
- <source>: It is used to attach multimedia files like audio, video, and pictures.
- <embed>: It is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
- <track>: It specifies text tracks for media components audio and video.
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
<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:
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</h1> <p>Audio Sample</p> <!--- Autoplay ensure to run audio automatically after running the program --> <audio controls autoplay> <source src= type="audio/ogg"> <source src= type="audio/mpeg"> </audio> </center></body></html> |
Output:
<video>: It is a standard way to embed a video into your web page.
Syntax:
<video src="" controls> </video>
Example:
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</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.
Paste the code on the code editor, and the video will be added to the web page.
HTML
<!DOCTYPE html><html><head><title>Page Title</title></head><body><iframe width="942" height="530"title="Introduction to Python | Sample Video for Python Foundation Course| GeeksforGeeks"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>
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</h1> <p>Embed Sample</p> <embed src= width="300px" height="300px"> </center></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>
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</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 sectors for the <audio> and <video> elements.
Syntax:
<track Attribute>
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</h1> <h2>Track Tag: Both Audio and Video</h2> <video width="300" height="300" controls> <source src="myvid.mp4" type="video/mp4"> <track src= kind="subtitle" srclang="en" label="English"> </video> </center></body></html> |
Output:
Please Login to comment...