Question

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

但是，我想要一些类似于＆＃34; demidemi＆＃34;每次悬停时，他们的总持续时间减半，如下：

第一次鼠标悬停＆＃34; demidemi＆＃34;视频播放从currentTime = 0到duration / 2并暂停
第二次鼠标悬停＆＃34; demidemi＆＃34;视频一直播放到最后

我使用当前 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');
        }
    });
});

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

1 个答案: