Question

首先，我知道iOS下的网站上的视频只会播放用户操作（除非设置了点击事件）。

我有一个HTML5视频元素：

<video muted="muted" loop id="js-b2b-video">
    <source src="my_video.mp4" type="video/mp4">
</video>

然后，在JS中，有一段代码监听窗口的scroll事件：

$(window).on('scroll', function() {

    var $video = $('#js-b2b-video');

    // Check if the video is in the viewport
    // and if YES, play it:
    $video.get(0).play();

});

上述代码适用于Windows和MacOS - 在Chrome，Edge，Firefox和Safari中。但是，在 iOS9 上运行的任何浏览器上（例如在iPad 1上） - 没有任何反应，视频无法启动。

所以，我尝试模拟点击：

 // Listener
 $('#js-b2b-video').on('click', function() {

   $(this).get(0).play();

 });

  // Modified scroll listener
  $(window).on('scroll', function() {

    var $video = $('#js-b2b-video');

    // Check if the video is in the viewport
    // and if YES, play it:
    $video.click();

});

没什么。撞墙。

我需要能够在没有用户互动的情况下在iOS上启动视频。我错过了什么？

PS。点击（点击）视频也不会启动它。

Answer 1

就像@CBroe在评论中告诉你的那样，阅读他所说的链接（动机部分）：

关于用户手势要求的说明：当我们说某个动作必须“由于用户手势”时，我们的意思是导致调用video.play（）的JavaScript，例如，必须直接由touchend，click，doubleclick或keydown事件的处理程序产生。因此，button.addEventListener（'click'，（）=＆gt; {video.play（）;}）将满足用户手势要求。 video.addEventListener（'canplaythrough'，（）=＆gt; {video.play（）;}）不会。

所以它基本上说你不能使用用户的任何事件或动作来开始播放视频。

然后你的'滚动'事件无法正常工作^^

HTML5视频无法在iOS9（iPad）上启动

1 个答案: