Audio and Video Tag in HTML 5

Audio Tag in HTML 5

What is Audio Tag in Html 5?

In simple terms "It enables the user to view the webpage and simultaneously listen to some audio files. It is loaded when the browser is started by the user to perform some operation".

So, I think we all are now good to go and implement this concept.

Step 1: The Complete Code of Audio.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>templates</title>
<meta name="description" content="" />
<meta name="author" content="Vijay" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body>
<div style=" font-family: Verdana; font-size: 22">
<header>
<h1 style="text-align: center; color: gray">Audio Tag - HTML 5</h1>
</header>
<div>
<p> Question Arises:
<b> What is Audio Tag?</b>
</p>
<p style="color: blue">In Simple Terms "It enables user to view webpage and parllely listen to some audio files as soon as the webpage gets rendered on browser"</p>
<br>
<center>
<audio id="adplayer" src="/C:\Users\Vijay\Downloads\nokialumia_t2y8s1nx.mp3" loop="true" controls="true"></audio>
<br>
<button onclick="document.getElementById('adplayer').play()">Play</button>
<button onclick="document.getElementById('adplayer').pause()">Pause</button>
<button onclick="document.getElementById('adplayer').volume += 0.1"> High Vol </button>
<button onclick="document.getElementById('adplayer').volume -= 0.1"> Low Vol </button>
<br>
<p>I hope this article is useful for you...I look forward for your comments and feedback...Thanks Vijay Prativadi</p>
</center>
</div>
<footer>
<p style="color: silver; text-align: center">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</body>
</html>

Step 2: The Output of the Application looks like this:

Video Tag in HTML 5

What is Video Tag in Html 5?

In simple terms "It is used to embed some video files or clips onto a webpage to perform a specific operation".

So, I think we all are now good to go and implement this concept.

Step 1: The Complete Code of Video.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>templates</title>
<meta name="description" content="" />
<meta name="author" content="Vijay" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body style="font-family: Verdana; font-size: 22">
<div >
<header>
<h1 align="center" style="color: gray">Video Tag - HTML 5</h1>
</header>
<p>Question Arises:
<b> What is Video Tag ? </b>
</p>
<p style="color: blue">In Simple terms "It is used to embed some video files or video clips onto your webpage to perform a specific operation"</p>
<br>
<div align="center">
<video id="vdplayer" src="/C:\Users\Vijay\Downloads\Srimannarayaneeyam37Dasakamtelugu.ogv" controls="true" height="300px"></video>
<br>
<button onclick="document.getElementById('vdplayer').play()">Play</button>
<button onclick="document.getElementById('vdplayer').pause()">Pause</button>
<button onclick="document.getElementById('vdplayer').volume += 0.1"> High Vol </button>
<button onclick="document.getElementById('vdplayer').volume -= 0.1"> Low Vol </button>
</div>
<br>
<p align="center">I hope this article is useful for you...I look forward for your comments and feedback....Thanks Vijay Prativadi</p>
<footer>
</footer>
</div>
</body>
</html>

Step 2: The Output of the Application looks like this:

I hope this article is useful for you.

4 Comments

Join the conversation! Your thoughts help the community grow.

Vineet Kumar Saini14y ago
Really good post for HTML beginner......
- Vijay Prativadi14y ago
  Thanks Vineeth....!!!
Amit Maheshwari14y ago
It's very well explanation about these tags so keep it up and thanks for sharing..............
- Vijay Prativadi14y ago
  Thanks Amit!!!