Audio Tag in HTML 5
Question Arises: What
is Audio Tag in Html 5?
In Simple terms "It
enables user to view the webpage and simultaneously listen to some audio files.
It is loaded when the browser is started by 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"
/>
<!-- Always
force latest IE rendering engine (even in intranet) & Chrome Frame
Remove
this if you use the .htaccess -->
<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" />
<!-- Replace
favicon.ico & apple-touch-icon.png in the root of your domain and delete these
references -->
<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:
![Audio.gif]()
Video Tag in HTML 5
Question Arises: What
is Video Tag in Html 5?
In Simple terms "It is
used to embed some video files or clips onto 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"
/>
<!-- Always
force latest IE rendering engine (even in intranet) & Chrome Frame
Remove
this if you use the .htaccess -->
<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" />
<!-- Replace
favicon.ico & apple-touch-icon.png in the root of your domain and delete these
references -->
<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>
<p
style="text-align:
center; color:
silver">© Copyright by Vijay
Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2: The Output of the
Application looks like this:
![video0.png]()
I hope this article is
useful for you.