Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

Use Multimedia Tags in HTML5 Audio Tag And Video Tag

Use Multimedia Tags in HTML5 Audio Tag And Video Tag

In this HTML5 Tutorial you will learn that how to use multimedia tags in our webpage without use of any flash player plugins. The use of both tags is very easy to understand for every person who learn this. First The HTML5 audio element specifies a standard way to embed audio in a web page.

HTML5 Audio – How It Works

[step:1] The controls attribute adds audio controls, like play, pause, and volume.

[step:2] The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognised format.

[step:3] The text between the audio tags will only be displayed in browsers that do not support the audio element.

Audio tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Use Of Audio Player In Html5</title>
<meta charset="utf-8">
<meta name="description" value="Audio tag is a Html5 tag and it work without any flash player">
<meta name="keywords" value="Audio tag use in html5">
</head>

<body>
<p>HTML5 Support Media Query Without Any Flash Player</p>
<p>HTML5 Support Audio Tag</p>

&nbsp;

<audio autoplay loop controls style="width:100%">
<source src="audio1.mp3" type="audio/mp3">

</audio>

</body>
</html>

HTML5 Video tag- How It Works

[step:1] The c ontrols attribute adds video controls, like play, pause, and volume.
[step:2] It is a good idea to always include width and height attributes.
[step:3] The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
[step:4] The text between the video and video tags will only be displayed in browsers that do not support the video element.
[step:5] Use attributes like autoplay, loop, poster etc. To start a video automatically use the autoplay attribute. Then second loop starts video again and again when its finished. Poster is like a video thumbnail when we open our webpage first we saw poster of video. But here we us only one attributes at a time between autoplay and poster.

Video tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Use Of Video Tag In Html5 Tutorial by - Infonic Training</title>
<meta charset="utf-8">
<meta name="description" value="Video tag is a Html5 tag and it work without any flash player">
<meta name="keywords" value="Video tag use in html5">
</head>

<body>
<p>HTML5 Support Media Query Without Any Flash Player</p>
<p>HTML5 Support Video Tag</p>

<video controls loop poster="1.jpg" width="400px" height="200px">
<source src="video-clip.mp4" type="video/mp4">

</video>

&nbsp;

</body>
</html>