HTML Audio and Video

Audio in HTML

The HTML5 <audio> element specifies a standard way to embed audio in a web page. The HTML <audio> Element used to play an audio file in HTML

Sample

<title>Playing Audio</title>

…

<audio controls>

<source src="musicfile.mp3">

Your browser does not support the audio element.

</audio>

Note: The  audio file mentioned in code should be available in working directory.

The controls attribute adds audio controls, like play, pause, and volume.

Text  “Your browser does not support the audio element” between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

Videos in HTML

          The HTML5 <video> element specifies a standard way to embed a video in a web page.

Sample

<video width="640" height="360" controls>
          <source src="paperman.mp4" type="video/mp4">

          Your browser does not support the video tag.
</video>

Note: The video file mentioned in code should be available in working directory.

Check Output

If you click Play button, the video start to play as follows,

The controls attribute adds video controls, like play, pause, and volume.

          It is a good idea to always include width and height attributes.  If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.

          Text “Your browser does not support the video tag” between the <video> and </video> tags will only display in browsers that do not support the <video> element.