jquery <video> .play 在移动设备上不起作用

Question

我的页面上有许多 HTML5 <video> 元素，并且在桌面上运行良好。然而，在 iOS Safari 上，只有长时间按住视频才能播放，而不是正常的点击（应该复制“点击”jquery 功能）。任何人都可以建议为什么视频没有在点击时播放？为什么在短暂持有后会出现这种情况？

$(document).ready(function() {

  // Preload the video
  setTimeout(function() {
    $('.video video')[0].load();
  }, 0);

  $('.video video').click(function() {
    if ($(this).hasClass('is-playing')) {
      $(this).removeClass().addClass('is-paused');
      // Pause video
      $(this)[0].pause();
    } else {
      $(this).removeClass().addClass('is-playing');
      // Play video
      $(this)[0].play();
    }
    return false;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video src="video-url" poster="poster-url" preload></video>

Answer 1

您需要将touchstart 事件与on 函数一起使用：

$(document).ready(function() {

  setTimeout(function() {
    $('.video video')[0].load();
  }, 0);

  $('.video video').on('click touchstart', function() {
    // Change is here -------^
    if ($(this).hasClass('is-playing')) {
      $(this).removeClass().addClass('is-paused');
      $(this)[0].pause();
    } else {
      $(this).removeClass().addClass('is-playing');
      $(this)[0].play();
    }
    return false;
  });

});

touchstart