Question

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

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();
});

});

Answer 1

那是因为您的touchstart和click处于冲突。

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

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（）的精度

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

1 个答案: