How to use Audio-Video tag in HTML5

By Admin-31-Jul-2016336

Including audio or video tag on the modern web browsers made easier to display audio, video than ever before and opens some amazing new possibilities.

<audio> Tag

<audio> is new to html and fortunately it is easy to code. Now we can embed our audio music to html page without using any player or flash object. Now date any browser which is based on WebKit, ex. Chrome, Safari, Mozilla etc supports the use of regular mp3, Wav and ogg format audio files.

Here is the example to use <audio> in HTML file

<audio loop=”loop” autoplay=”autoplay” controls=”controls”>
<source src=”mymusic.ogg” type=”audio/ogg”>
<source src=”himesh.mp3″ type=”audio/mpeg”>

Attributes of <audio> tag

  • autoplay : Value can be “Auto” or “None”.
  • Controls : Value can be “Controls’, Which denotes that default audio controls such as Play/Pause/Stop should be displayed
  • Loop : value can be “loop”, Which denotes that will audio starts over again on every time when finished.
  • muted : value “muted”, Laod audio with muted output
  • src : Value “Url”, Url for sourch audio file.

<video> Tag

using <video> is same as using <audio> tag. Here is the simple example of the video tag

<video src=”myvideo.webm” controls=”controls”>

This is the simple and default tag for embedding video in html5.

Specifying multiple sources 

By using <source> elements, Inside the Video tag. source elements enables you to specify more than one video file format. It is helpful if any browser doesn’t supports one of the video specified. Here is the example…

<video controls=”controls”>
<source src=”my-video.webm” type=’video/webm;codecs=”vp8, vorbis”‘/>
<source src=”my-video.mp4″ type=’video/mp4;codecs=”avc1.42E01E, mp4a.40.2″‘/>

Default Attributes for the video tag is same as audio tag.


Related Blogs