1

The title of the post is pretty self-explanatory. I think I've managed to make it work, but unfortunately, it doesn't work exactly as it should. For example, when I hover the video and take the mouse off it in the first couple of seconds, the video won't start again on the second hover. If I keep my mouse on it for more than that, it will start on the second hover as well. Or it's not always playing on the hover etc.

What I'm missing? A little help would be appreciated. Thanks

var video = document.getElementById('video');
var intervalRewind;

$("#video").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       }
       else{
           video.currentTime += -.1;
       }
                },25);
});
video{
    height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" muted>
    <source src="https://i.imgur.com/SWdBzDO.mp4" type="video/mp4">
</video>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
labilouser
  • 177
  • 1
  • 2
  • 9

2 Answers2

3

Sometimes it seems to take a while for the video.currentTime to be 0, even if the video seems to have rewound back to the start, which means the interval isn't always cleared. Adding a clear interval in the mouseover seems to fix it. I've refactored a little too.

var video = document.getElementById('video');
var intervalRewind;

$("#video").on("mouseover", function(event) {
    clearInterval(intervalRewind);
    this.play();

  }).on('mouseout', function(event) {
   intervalRewind = setInterval(function(){
       video.pause();
       video.currentTime -= 0.1
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
       }
   },25);
});
video{
    height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" muted>
    <source src="https://i.imgur.com/SWdBzDO.mp4" type="video/mp4">
</video>
dbramwell
  • 1,298
  • 6
  • 11
  • Yes, easy fix, that seems to solve the issues. I will implement it on the website and return with a final answer, but there shouldn't be any problems. Thanks – labilouser Aug 19 '20 at 09:17
0

I think it's not possible in native way.

According to Web Audio playbackRate explained - mozilla.org:

Negative values will not cause the media to play in reverse.

Jax-p
  • 7,225
  • 4
  • 28
  • 58