悬停时播放视频，鼠标关闭时反向播放

Question

帖子的标题是不言自明的。我想我已经设法让它工作了，但不幸的是，它并没有完全按照它应该的方式工作。例如，当我悬停视频并在前几秒钟内将鼠标移开时，视频不会在第二次悬停时重新开始。如果我将鼠标停留在上面的时间超过这个时间，它也会在第二次悬停时开始。或者它并不总是在悬停时播放等。

我错过了什么？一点帮助将不胜感激。谢谢

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>

Answer 1

有时，video.currentTime 似乎需要一段时间才能变为 0，即使视频似乎已经倒回到开头，这意味着间隔并不总是被清除。在mouseover 中添加一个明确的间隔似乎可以解决它。我也重构了一点。

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>

Answer 2

我认为以本地方式是不可能的。

根据Web Audio playbackRate explained - mozilla.org：

负值不会导致媒体反向播放。