单击功能播放视频在平板电脑上不起作用

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() 的精确度