HTML5 Media Elements

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
  • Audio element is used for defining or creating a music element in your simple HTML page.
  • It supports all the 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

Code | Snippet
 

<html>

<head>

    <title>Audio Player | HTML5 </title>

</head>

<body>

    <audio controls>

<source src = "1.mp3" type = "audio/mpeg" >

<source src = "2.mp3" type = "audio/mpeg" >

<source src = "3.amr" type = "audio/amr" >

<source src = "4.amr" type = "audio/amr" >

</audio>

</body>

</html>  

Outcome

Video: The Video element creates a video element in your HTML page. It supports all the 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

<html>

<head>

    <title>Video Player </title>

</head>

<body>

    <video controls>

<source src = "1.mp4" type = "video/mp4" >

<source src = "2.mp4" type = "video/mp4" >

<source src = "3.flv" type = "video/flv" >

<source src = "4.flv" type = "video/flv" >

</video>

</body>

</html>

Outcome

Outcome

Track

This element is useful in both the previous elements 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
 

<html>

<head>

    <title>Video Player | HTML5 </title>

</head>

<body>

    <video controls>

<source src = "1.mp4" type = "video/mp4" >

<source src = "2.mp4" type = "video/mp4" >

<source src = "3.flv" type = "video/flv" >

<source src = "4.flv" type = "video/flv" >

<track src = "sub1.srt" kind = "subtitle" srclang = "jap" label = "jap">

<track src = "sub2.srt" kind = "subtitle" srclang = "eng" label = "eng">

<track src = "sub3.srt" kind = "subtitle" srclang = "ger" label = "ger">

<track src = "sub4.srt" kind = "subtitle" srclang = "rus" label = "rus">

</video>

</body>

</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
 

<audio controls>

<source src = "1.mp3" type = "audio/mpeg" >

<source src = "2.mp3" type = "audio/mpeg" >

<source src = "3.amr" type = "audio/amr" >

<source src = "4.amr" type = "audio/amr" >

</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
 

<html>

<head>

    <title>Flash Content | HTML5 </title>

</head>

<body>

    <embed src="1.swf">

</body>

</html>