Inserting audio and video in HTML5
Audio Formats-
.mp3
.aac
.ogg
<audio>tag with attributes
Adding audio with multiple sources <source> tag
<video> tag
Video tag attributes
In HTML5,it is very simple to insert media to a website. In HTML5 by using <audio> and <video> tags, we insert audio and video clips to website. In HTML5,there are special tags used to define controls.
HTML5 features include native audio and video support without the need for Flash.
Audio Formats:
1.mp3:MP3(MPEG-1 Audio Layer-3)
It is very popular audio file format for web.Mp3 file format is from MPEG(Moving/Motion Pictures Expert Group)
2.aac(Advanced Audio Coding)
AAC is an audio coding standard for digital audio.AAC file format is standard for iPhone, YouTube. It has higher sound quality than mp3.
3.ogg:
ogg is a free, open container file format maintained by the Xiph. organization Foundation.
<audio> tag:
By using <audio> tag we add audio files on webpages. We can insert audio files by using src attribute i.e. source or location of the audio file.Declare the audio tag and specify the source attribute with the audio file location.
Syntax:
<audio src="abc.mp3" type="audio/mpeg" controls>
</audio>
Attributes of <audio> tag:
1.autoplay:
The audio file will start playing automatically as soon as it is ready i.e. loaded.
2.src-
Specifies the location or URL of the audio file to insert.
3.controls-
When you want to display audio controls i.e. play/pause button etc.
4.loop-
When you want to play audio repeatedly certain of times i.e. start over again and again it is finished. This loop attribute value is number i.e. loop=2,it plays sound track twice.
5.muted-
When you want to specify audio output muted, this attribute is used.
Example-1.
<!DOCTYPE
html>
<html>
<body>
<p>Audio Sample with Controls</p>
<audio controls>
<source src="C:\Users\Arman\Downloads\Sample2.mp3" type="audio/mp3"> Your browser does not support the audio element.
</audio>
</body>
</html>
Example 2.
<!DOCTYPE html>
<html>
<body>
<p>Audio Sample with Autoplay</p>
<audio controls autoplay>
<source src="C:\Users\Arman\Downloads\Sample2.mp3" type="audio/mp3"> Your browser does not support the audio element.
</audio>
</body></html>
Example 3.Muted
<audio controls autoplay muted>
The controls attribute is used to add audio controls such as play, pause and volume. The "source" element is used to specify the audio files which the browser may use.
Adding audio with multiple sources:
Multiple sources of audios are specified so that if the browser is unable to play the first course then it will automatically jump to the second source.
<source> tag:
The <source> tag is used to specify multiple media resources for media elements. Example-
<!DOCTYPE html>
<html>
<body>
<p>Audio Sample</p>
<audio controls autoplay>
<source src="test.mp3" type=”audio/mp3”>
<source src="test.ogg" type=”audio/mp3”>
<source src="test.opus" type=”audio/mp3”>
</audio>
</body>
</html>
Example 2.
<!DOCTYPE html>
<html>
<body>
<p>Audio Sample with Controls</p>
<audio controls>
<source src="C:\Users\Arman\Downloads\Sample2.mp3" type="audio/mp3">
<source src="C:\Users\Arman\Downloads\SampleOGG.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
<video> tag
The <video> tag is used to embed video into web page, it has several video sources.
There are three different formats that are commonly supported by web browsers –
1.mp4, 2.Ogg 3.WebM.
Syntax:
<video src="URL" controls></video>
Attributes of <video> TAG :
1.src-
Defines link to video file.
2.autoplay-
specifies that the video will start playing as soon as it is ready
3.controls-
specifies that video controls Should be displayed (such as a play/Pause button etc.)
4.height-pixels-
set the height of the Video player.
5.loop-value-
specifies that the video will start over again every time it is finished.
6.poster-url-
specifies an image to be Shown while the video is download ind,or until the user hits the play button.
7.preload-
1.auto
2.metadata 3.none-Specifies if and how the author thinks The video should be
loaded when the Webpage loads.
8.width-pixels-
sets
the width of the video player.
Example-
</video>
</body></html>
Example-2
<body>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg" type="video/
ogg"> Your browser does not support the video TAG.
</video></body></html>
Visit here and learn new trends and technologies everything.
Please Comment and Share. ConversionConversion EmoticonEmoticon