Play audio/video on web page in HTML5

HTML5 has come with great support of playing audio or video file in web page. Before HTML5, you require any plug-in support to play any audio or video.

Now such kind of plug-in are obsolete in new version browsers and it was the part of old browser.

In HTML5 you just have to embed <audio> or <video> element on you webpage to play audio or video file on webpage. This <audio> or <video> element is fully supported by any modern browser.

It is simple to embed in you HTML code.

Browser support for these elements are given below. This table shows the minimum number of version of browser from where these element are supported- means browser version if equals or higher than specified- it will support  <audio> or <video> elements.

For video:-

 For audio:-

Now how we use this element in HTML5 code:-

We just have to put this element at required location in our code.

<video width="320" height="240" controls>
  <source src="location of file/file.mp4" type="video/mp4">
  <source src="location of file/file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio controls>
  <source src="location of file/file.ogg" type="audio/ogg">
  <source src="location of file/file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

If you want play video or audio automatically on startup, put the controls autoplay in tag e.g.

<audio controls autoplay>

<video width="320" height="240" controls autoplay>

It looks on page like:-