Audio and Video with HTML 5
×
Home Courses Community Support
Audio and Video with HTML 5

In previous module you have learned the use of <embed> to add audio/video in HTML file. HTML5 make it simple to add audio and video by providing new tags <audio> and <video>.
 

Let's start with <audio> tag-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Audio in HTML5</title>
</head>
<body>
    <audio controls>
    <source src="media/Gaytri_Mantra.mp3" type="audio/mpeg">
    Your browser do not support the audio file, please update your browser to enjoy audio.
    </audio>
</body>
</html>

 

The above code will display a playable audio file in website.
 

Controls attribute:

This attribute used with audio tag. It display controls to play audio file. See below image, the output of above code.

Text between <audio> and </audio>

The text written between start and close audio tag is display when browser does not support the audio tag.

 

enlightenedAll the updated browser support <audio> tag. Check below list of common browsers' version to support <audio> tag-

  • Chrome 4.0 and above
  • IE 9.0 and above
  • Mozila 3.5 and above
  • Safari 4.0 and above

Right now, this tag support MP3, Wav and Ogg audio format.

 

Type

For all supported audio files we have the attribute type. It tell about the resource type.
 

Likely <audio> tag we can use <video> tag for videos. See below example-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Audio in HTML5</title>
</head>
<body>
    <video height="300px" controls>
    <source src="media/variable.mp4" type="video/mp4">
    Your browser do not support the video file, please update your browser to enoy video.
    </video>
</body>
</html>

 

The above code will display a video on webpage.
 

enlightenedWhen using <video> tag, we can use height and width attributes to manage the height and width of video player.

 

Try above code in CodeLAB.

 

 

← Preview

Working on New Graphics Elements

Next →

Structural Elements and New Sementic Elements

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App