HTML5 Media Elements

Introduction

 
There were nearly negligible media elements in previous versions of HTML, yet those were still very helpful and handy. With the rise of HTML5, several media elements have also come into the light.
 
These media elements will change the entire scenario of designing and development using HTML. This article will provide an introduction and a little description of these elements.
 
Media Elements
 
The following are the 5 most popular media elements.
 
Audio
  • The audio element is used for defining or creating a music element in your simple HTML page.
  • It supports all browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari.
  • This tag defines music or any other audio streams formats.
Attributes | Audio
 
Attributes

Attributes
Attributes
Attributes
Code | Snippet
  1. <html>  
  2.    <head>  
  3.       <title>Audio Player | HTML5 </title>  
  4.    </head>  
  5.    <body>  
  6.       <audio controls>  
  7.          <source src = "1.mp3" type = "audio/mpeg" >  
  8.          <source src = "2.mp3" type = "audio/mpeg" >  
  9.          <source src = "3.amr" type = "audio/amr" >  
  10.          <source src = "4.amr" type = "audio/amr" >  
  11.       </audio>  
  12.    </body>  
  13. </html> 
Outcome
 
Video
 
The Video element creates a video element in your HTML page. It supports all browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari. This tag defines music or any other video streams formats.
 
Attributes | Video
 
Attributes Video
 
Attributes
 
There are the following 3 attributes in video elements that are not available in audio:
  • Height
  • Width
  • Poster
Code | Snippet
  1. <html>  
  2.    <head>  
  3.       <title>Video Player </title>  
  4.    </head>  
  5.    <body>  
  6.       <video controls>  
  7.          <source src = "1.mp4" type = "video/mp4" >  
  8.          <source src = "2.mp4" type = "video/mp4" >  
  9.          <source src = "3.flv" type = "video/flv" >  
  10.          <source src = "4.flv" type = "video/flv" >  
  11.       </video>  
  12.    </body>  
  13. </html> 
Outcome
 
Outcome
 
Track
 
This element is useful in both the previous elements of AUDIO and VIDEO. This element defines tracks or we can say simple sectors for the <audio> and <video> elements.
 
Attribute | Track
 
Attribute Track
 
Track
 
Code | Snippet
  1. <html>  
  2.    <head>  
  3.       <title>Video Player | HTML5 </title>  
  4.    </head>  
  5.    <body>  
  6.       <video controls>  
  7.          <source src = "1.mp4" type = "video/mp4" >  
  8.          <source src = "2.mp4" type = "video/mp4" >  
  9.          <source src = "3.flv" type = "video/flv" >  
  10.          <source src = "4.flv" type = "video/flv" >  
  11.          <track src = "sub1.srt" kind = "subtitle" srclang = "jap" label = "jap">  
  12.          <track src = "sub2.srt" kind = "subtitle" srclang = "eng" label = "eng">  
  13.          <track src = "sub3.srt" kind = "subtitle" srclang = "ger" label = "ger">  
  14.          <track src = "sub4.srt" kind = "subtitle" srclang = "rus" label = "rus">  
  15.       </video>  
  16.    </body>  
  17. </html> 
Outcome
 
Result
 
Source
 
Like the track element, the Source element must be used in <audio> and <video> elements to do the control property and structure of the tracks.
 
Attributes | Source
 
Attributes Source
 
Code | Snippet
  1. <audio controls>  
  2.    <source src = "1.mp3" type = "audio/mpeg" >  
  3.    <source src = "2.mp3" type = "audio/mpeg" >  
  4.    <source src = "3.amr" type = "audio/amr" >  
  5.    <source src = "4.amr" type = "audio/amr" >  
  6. </audio> 
Embed
 
It is also called a container because as the name suggests it is used for defining containers for the external applications or we can say plug-ins for the applications.
 
Attribute | Embed
 
Attribute Embed
 
Code | Snippet
  1. <html>  
  2.    <head>  
  3.       <title>Flash Content | HTML5 </title>  
  4.    </head>  
  5.    <body>  
  6.       <embed src="1.swf">  
  7.    </body>  
  8. </html> 

Conclusion

 
In this article, we studied HTML5 Media Elements