CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Lohith Korupolu
Lohith Korupolu

Reputation: 1074

play html5 video in reverse, on screen load

I am working on a functionality where on my screen load, a video should start playing reverse. (from its last frame to the first frame). It can actually be on screen load or even on a button click.

At this moment, I've achieved until (with the help and support from StackOverflow) playing my video - and playing it in reverse after some duration of time. Here's the code I used-

<!DOCTYPE HTML>
<html>
<head>
<style>
video{
    height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {

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 = 8.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);
});
});
</script>

</head>
<body>



<video id="video" 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>
</body>
</html>

Now, I would like to know if there is a chance to play my video in reverse directly i.e. without progressing any duration in the forward direction, the video should start playing in reverse.

Upvotes: 3

Views: 5112

Answers (1)

MrGoofus
MrGoofus

Reputation: 883

You need to wait until video is loaded, then you can get it's length with video.duration and then you can set the video current time to this value (Jump to end of the video);

Then you can start playing the video from last frame to first using your negative function.

  video.addEventListener('loadeddata', function() {
     video.currentTime = video.duration;
     $('#negative').click();
  }, false);

There is also nice fiddle about video playbacks at http://jsfiddle.net/UkMV2/5/ found from play a video in reverse using HTML5 video element

Following example is super slightly modified version of your's which achieves the "reverse" playback upon page & video loaded event.

<!DOCTYPE HTML>
<html>
<head>
<style>
video{
    height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>

  <video id="video" 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>


  <script>
  $(function() {

  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 = 8.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.addEventListener('loadeddata', function() {
     video.currentTime = video.duration;
     $('#negative').click();
  }, false);



  });
  </script>

</body>
</html>

Upvotes: 2

Related Questions