Introduction

Audio and Video Tag run the audio and video files in our web pages without using a single line code.

<audio> Tag

Audio formats

Today Thousands of audio formats are existing in the world. But most of the formats are not supported by every Browsers. Most of the common internet browsers are support the following audio formats.

• MP4 (.mp4, .aac, .mp4a extension) This audio format is used for a video and an audio format. It is supported by all the internet browsers.
• Ogg/Vorbis (.oga, .ogg) It’s supported by the Google Chrome, Mozilla Firefox, and Opera browsers.
• WAV (.wav extension) This format is also supported by near most all the browsers.
• MP3 (.mp3 extension) Now-a-days .mp3 format is supported by all the web browser.

The <audio> element

The <audio> element is used to play audio. The following is a sample example of the <audio> element.

In this example, the file GoldenSound.mp3 will play the page is loaded.

<audio controls="controls"><source src="https://tutorialathome.in/Demos/GoldenSound.mp3">GoldenSound /></audio>

Multiple source

<audio id="audio" controls="controls">

<source src="GoldenSound.wav" type='audio/wav; codecs="1"' />

<source src="GoldenSound.oga" type='audio/ogg; codecs="vorbis"’ />

<source src="GoldenSound.mp3" type='audio/mpeg; codecs="mp3"' />

</audio>

Here we provide the multiple audio format. The browser will choose the appropriate format which is more accurate for playing.

Configuring the <audio> element

The <audio> element can be configured to customize its behavior as we need. The following attributes are configured.

• autoplay : This is a Boolean attribute. It specifies that the audio starts when the page load.
• controls : It specifies that all the controls are displayed for control the audio player.
• loop : when the audio reaches at the end of the stream, then it will repeat automatically.
• src : Specifies the URL or source of the audio.

<video >tag

A simple example for <video> tag in HTML 5

<p>
<video preload="auto" controls="controls" width="480" height="300">
<source src="http://tutorialathome.in/Demos/Cute.mp4" type="video/mp4" />
</video>
</p>

Specify the <video> tag with multiple format files

<video height="480" controls="controls" >

< source type='video/webm; codecs="vorbis, vp8"' src="tah.webm" />

<source type='video/ogg; codecs="theora, vorbis"' src="tah.ogv"/>

< source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' src="tah.mp4"/>

</video>

Provide the multiple source of the video format. The browser will choose the appropriate format which is more accurate for playing.

Configuring the <video> element

The <video> element can be configured the behavior of the video player in our webpage. The following is the list of attributes you can use to configure for the <video> element.

• autoplay : Specifies that video starts playing immediately when the page is loaded.
• controls : Show all the controls.
• height : Set the height of the video screen.
• width : Set the width of the video screen.
• loop : when the audio reaches at the end of the stream, then it will repeat automatically.
• muted : Specifies that the video will run, but the audio is silent.
• poster : Set the URL of that image. If video is not playing, then that image will display.
• src : set the URL of the video.