javascript - YouTube iFrame API 视频在移动设备上间歇性播放

Question

我在这上面花了太多时间，但收效甚微。我们有一个客户，其网站在页面加载时会弹出 YouTube 视频。它会在桌面上自动播放，并在移动设备上显示 Youtube 播放按钮，因为移动设备不支持自动播放。我正在使用 iFrame JS API 实例化视频播放器(下面的代码示例)。此设置在桌面上完美工作，但在移动设备(Android 或 iOS)上，在我和我的同事之间，单击 Youtube 播放按钮仅在大约 80% 的时间内播放视频。其余时间，视频加载旋转器只是旋转，什么也没有发生。如果我使用站点控件关闭重新加载播放器，它将播放，但最初不会播放。

我知道这对于大多数浏览该网站的用户来说不会是一个问题，但我知道如果在 iPhone 上的 100 次重新加载中，即使有 10 次导致这种行为，我们的客户也会发疯。

我按如下方式实例化播放器:

1) 我首先在网站上添加了 Youtube iframe api JS 的“硬拷贝”。

2) 我有一个对象控制包含播放器目标的 youtube“模态”窗口的显示 - 当调用该函数时，它会执行以下操作:

// Write a div element to the container
_instance.videoContainer.innerHTML = '<div id="youtube-player"></div>';
// Grab a reference to it
_instance.el = document.getElementById('youtube-player');
// Call the YT player API
_instance.player = new YT.Player('youtube-player', {
     playerVars: { // trying a bunch of different params with no success
          playsinline : 1 , 
          origin : window.location.origin , 
          autoplay : 1 , 
          wmode: "opaque" , 
          iv_load_policy : 3 
     },
     videoId: videoId , // This is passed to the function
     events : {
          onReady : function(){
               console.log('resolved player');
               // another function that just changes the container visibility
               _instance.play();
          },
          onStateChange : function( event ){
             if( event.data == YT.PlayerState.ENDED ){
                _instance.close();
             }
          }
      }
});

此时，视频要么 100% 在桌面上自动播放，要么在移动设备上显示带有视频缩略图和红色大播放按钮的 Youtube 播放器。这就是麻烦开始的地方——大多数时候它播放得很好，其余时间它只是旋转啊旋转，根本不播放。有趣的是，在 Android 上，如果我模糊窗口并重新打开它，我可以再次单击播放按钮，它就会播放。

此时应该不重要，但当模态关闭时我会销毁 div 和玩家引用。

我已经尝试了几乎所有我能想到的......

• YouTube 视频不知何故受到限制，仅通过 iframe 到原点显示了这么多次？我将“origin”属性添加到参数中，认为可能是这种情况，但似乎没有太大区别。我加载视频的成功率似乎比我的同事更高。
• 是否有某种原因需要像示例中那样异步加载 YouTube iframe 脚本，而不是从我的网站加载副本？

这就是我目前能想到的一切......我是否遗漏了什么？谢谢。

Answer 1

有一个相关的thread其中指出大多数移动设备不允许使用自动播放功能。

从此documentation :

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

一个simple workaround是拥有“播放”按钮的自定义外观:

Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.

希望这有帮助!