Audio and Video Tag in HTML 5

Today, in this article let’s dig out one interesting concept in HTML5. This concept enables to embed some audio files or sound files onto our webpage to perform some operation. The Code is developed in Aptana Studio 3.

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>
           &nbsp;&nbsp;<button onclick="document.getElementById('adplayer').play()">Play</button>
              &nbsp;<button onclick="document.getElementById('adplayer').pause()">Pause</button>
              &nbsp;<button onclick="document.getElementById('adplayer').volume += 0.1"> High Vol </button>
              &nbsp;<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">&copy; 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>&nbsp;&nbsp;<button onclick="document.getElementById('vdplayer').play()">Play</button>
      &nbsp;<button onclick="document.getElementById('vdplayer').pause()">Pause</button>
              &nbsp;<button onclick="document.getElementById('vdplayer').volume += 0.1"> High Vol </button>
              &nbsp;<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">&copy; 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.