Post
Ask Question

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:  
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.         <title>templates</title>  
  7.         <meta name="description" content="" />  
  8.         <meta name="author" content="Vijay" />  
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  10.         <link rel="shortcut icon" href="/favicon.ico" />  
  11.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  12.     </head>  
  13.     <body>  
  14.         <div style=" font-family: Verdana; font-size: 22">  
  15.             <header>  
  16.                 <h1 style="text-align: center; color: gray">Audio Tag - HTML 5</h1>  
  17.             </header>  
  18.             <div>  
  19.                 <p> Question Arises:  
  20.                     <b> What is Audio Tag?</b>  
  21.                 </p>  
  22.                 <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>  
  23.                 <br>  
  24.                     <center>  
  25.                         <audio  id="adplayer" src="/C:\Users\Vijay\Downloads\nokialumia_t2y8s1nx.mp3" loop="true" controls="true"></audio>  
  26.                         <br>             
  27.                             <button onclick="document.getElementById('adplayer').play()">Play</button>               
  28.                             <button onclick="document.getElementById('adplayer').pause()">Pause</button>             
  29.                             <button onclick="document.getElementById('adplayer').volume += 0.1"> High Vol </button>           
  30.                             <button onclick="document.getElementById('adplayer').volume -= 0.1"> Low Vol </button>  
  31.                             <br>  
  32.                                 <p>I hope this article is useful for you...I look forward for your comments and feedback...Thanks Vijay Prativadi</p>  
  33.                             </center>  
  34.                         </div>  
  35.                         <footer>  
  36.                             <p style="color: silver; text-align: center">© Copyright  by Vijay Prativadi</p>  
  37.                         </footer>  
  38.                     </div>  
  39.                 </body>  
  40.             </html>  
Step 2:  The Output of the Application looks like this:
 
Audio.gif
 

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:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.         <title>templates</title>  
  7.         <meta name="description" content="" />  
  8.         <meta name="author" content="Vijay" />  
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  10.         <link rel="shortcut icon" href="/favicon.ico" />  
  11.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  12.     </head>  
  13.     <body style="font-family: Verdana; font-size: 22">  
  14.         <div >  
  15.             <header>  
  16.                 <h1 align="center" style="color: gray">Video Tag - HTML 5</h1>  
  17.             </header>  
  18.             <p>Question Arises:  
  19.                 <b> What is Video Tag ? </b>  
  20.             </p>  
  21.             <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>  
  22.             <br>  
  23.                 <div align="center">  
  24.                     <video id="vdplayer" src="/C:\Users\Vijay\Downloads\Srimannarayaneeyam37Dasakamtelugu.ogv"  controls="true" height="300px"></video>  
  25.                     <br>    
  26.                         <button onclick="document.getElementById('vdplayer').play()">Play</button>     
  27.                         <button onclick="document.getElementById('vdplayer').pause()">Pause</button>                   
  28.                         <button onclick="document.getElementById('vdplayer').volume += 0.1"> High Vol </button>                 
  29.                         <button onclick="document.getElementById('vdplayer').volume -= 0.1"> Low Vol </button>  
  30.                     </div>  
  31.                     <br>  
  32.                         <p align="center">I hope this article is useful for you...I look forward for your comments and feedback....Thanks Vijay Prativadi</p>  
  33.                         <footer>  
  34.                             <p style="text-align: center; color: silver">© Copyright  by Vijay Prativadi</p>  
  35.                         </footer>  
  36.                     </div>  
  37.                 </body>  
  38.             </html>  
Step 2: The Output of the Application looks like this:
 
video0.png
 
 
I hope this article is useful for you. 


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.