点击功能以播放无法在平板电脑上播放的视频

时间:2018-10-18 20:27:06

标签: javascript jquery html html5-video

我具有以下点击功能,以便在单击视频时播放视频。它在桌面浏览器上可以完美运行,但在平板电脑上则不能。您按它,视频立即暂停。我相信这与单击功能有关,它可以查找单击,而平板电脑上没有单击,但是我不确定如何解决。

HTML

<div class="section">
<div class="video">
    <video poster="img/my-poster.jpg"><source src="mp4/low-res/my-video.mp4" type="video/mp4"></video>
</div>
</div>

jQuery

$(document).ready(function () {

    $('.section video').on("click touchstart", function() {
          this.paused ? this.play() : this.pause();
});

});

1 个答案:

答案 0 :(得分:3)

那是因为您的touchstartclick处于冲突

有一个黑客可以防止这种冲突

var flag = false;
$('.section video').on("click touchstart", function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    this.paused ? this.play() : this.pause();
  }
  return false;
});

积分和更多信息:How to bind 'touchstart' and 'click' events but not respond to both?

编辑:感谢@RoryMcCrossan提供有关bind()的精度