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显示原点很多次？我将“起源”属性添加到params中，认为可能是这种情况，但它似乎并没有太大的区别。我似乎比我的同事加载视频的成功率更高。
有没有理由像示例中那样异步加载youtube iframe脚本，而不是从我的网站加载副本？

这就是我现在所能想到的......有什么我想念的吗？感谢。

Answer 1

有一个相关的thread表示大多数移动设备都不允许使用autoplay功能。

从此documentation：

由于此限制，自动播放，playVideo（），loadVideoById（）等功能和参数无法在所有移动环境中使用。

simple workaround是一个自定义外观＆＃34; play＆＃34;按钮：

拥有pointer-events: none;的叠加元素。 pointer-events适用于所有现代mobile browsers，或只是将视频容器放在带opacity: 0的按钮上。

希望这有帮助！

Answer 2

我遇到了几乎相同的确切问题。对我们而言，它特定于蜂窝连接。

如果嵌入的宽度大于约360像素，则播放器将尝试以“大”或更高的质量提供AT＆T和Verizon限制的质量。

我们看到的结果是：播放器进入缓冲状态，无法实现播放。

通过T-Mobile进行的测试可以正常进行。

嵌入到360像素以下的播放器可以在所有网络上以“中”或更低的质量播放。

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

2 个答案: