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:
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:
I hope this article is
useful for you.