jQuery< video> .play无法在手机上使用 [英] jquery <video> .play not working on mobile

问题描述

我的页面上有许多HTML5 <video>元素，并且在桌面上都运行良好.但是，在iOS Safari上，只有长时间按住视频才能播放，而不是正常点击(应该复制"click" jquery函数).有人可以建议为什么视频不能在点击后播放吗?以及为什么在短暂的等待后这样做呢?

I have a number of HTML5 <video> elements on my page, and all is working well on desktop. However, on iOS Safari, the only plays upon a long hold on the video, rather than a normal tap (which should replicate the 'click' jquery function). Can anybody suggest why the video isn't playing upon tap? And why it does so after a short hold?

$(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>

推荐答案

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

You need to use touchstart event with on function:

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

});

这篇关于jQuery< video> .play无法在手机上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！