在鼠标悬停时播放/暂停 HTML 视频从开始到一半到结束

Question

我有一个主页显示许多 mp4 <video> 不同的持续时间（每个少于 10 秒）。它们在鼠标悬停时独立播放。

但是，我希望一些像“demidemi”这样的类在每次悬停时播放总时长的一半，如下所示：

1. “demidemi”视频的第一次鼠标悬停从 currentTime = 0 播放到 duration/2 并暂停
2. “demidemi”视频的第二次鼠标悬停播放直到结束

我用当前的 HTML:

创建了一个 JSfiddle

<video>
  <source src="http://tacco.fr/divers/forward.mp4" type="video/mp4">
</video>

<video class="demidemi">
  <source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
</video>

…和 JS：

var vid = $("video");
var vidiv = $("video.demidemi");

vid.mouseover(function() {
  $(this).get(0).play();
});

vidiv.addEventListener("timeupdate", function() {
  if ($(this).get(0).currentTime = ($(this).get(0).duration)/2) {
    $(this).get(0).pause
}
  else {
    $(this).get(0).play();
  }
}, false);

如果有人可以帮助我，那将非常感激。谢谢你:-)

Answer 1

我找到了另一种解决方案来获得该行为。 它在性能方面可能不如 Ken 建议的效率高，但它可以在不更改 HTML 或 CSS 标记的情况下工作。

为此，我使用了 addClass、hasClass 和 removeClass……但不确定这是否是最好的方法。再说一次，如果有人知道如何改进，我很乐意:-)

这是更新后的JSfiddle

var vid =   $("video"),
    vidiv = $("video.demidemi");        

vid.mouseover(function() {
    $(this).get(0).play();
});

vidiv.mouseover(function() {
    if ( this.currentTime <= this.duration*0.5 ) {
        $(this).addClass('firstHalf');
    }         
    $(this).on("timeupdate", function() {
        if ($(this).hasClass('firstHalf') && (this.currentTime) >= (this.duration)*0.5 ){
            $(this).get(0).pause();
            $(this).removeClass('firstHalf');
        }
    });
});