Pages

▼

Monday, 13 February 2017

HTML 5 Video

Video is new tag added in HTML 5. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads and video will in its original resolution and if resolution is high or HD it will disturb all other element position of your page.

Syntax :


<video width="XX" height="XX" controls>
  <source src="XX" type="video/mp4">
  <source src="XX" type="video/ogg">
Your browser does not support the video tag.
</video>


The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Example

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Girfa : Student Help HTML5 Video</title>
   </head>
<body>       
     <h1 align="center">Girfa : Student Help HTML5 Video</h1><hr>

     <video width="400"  controls>
       <source src="video.mp4" type="video/mp4">
       Your browser does not support HTML5 video.
     </video>

   <video width="400"  autoplay>
       <source src="video.mp4" type="video/mp4">
       Your browser does not support HTML5 video.
     </video>
<h2>Java script with video</h2>
<div >
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="v1" width="420">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<script>
var myVideo = document.getElementById("v1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

function makeBig() {
    myVideo.width = 600;
}

function makeSmall() {
    myVideo.width = 400;
}

function makeNormal() {
    myVideo.width = 500;
}
</script>
     
</body>  

</html>



at

No comments:

Post a Comment