时间戳

首页 > 解决方案 > 悬停时播放视频，鼠标关闭时反向播放

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

问题描述

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

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

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>

标签： javascripthtmljquery

解决方案

有时，即使视频似乎已经倒回到开头，这似乎也需要一段时间，这意味着间隔并不总是被清除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>

推荐阅读