html5 video

by Satyanshu Acharya

HTML

<video id="video" controls="controls">
	<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
        <button id="speed">Fast Forward</button>
        <button id="negative">Rewind</button>
        <button id="time">time</button>
        <div id="current">0:00</div>
<div id="duration">0:00</div>

CSS

video{
    height: 200px;
}

JavaScript

var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('pause',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});
$("#negative").click(function() { // button function for rewind
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       }
       else{
           video.currentTime += -.1;
       }
                },30);
});

  $(video).on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime);
    $("#duration").text(duration);
}


document.getElementById('video').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);