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

我在这件事上花了太多时间，但收效甚微。我们有一个客户端，该站点在页面加载时会弹出YouTube视频。它在桌面上自动播放，并在手机上显示Youtube播放按钮，因为手机不支持自动播放。我正在使用iframeJSAPI来实例化视频播放器（下面的代码示例）。这种设置在桌面上运行得很好，但在移动设备（Android或iOS）上，在我和同事之间，点击Youtube播放按钮只能播放大约80%的视频。其余时间，视频加载微调器只是旋转，什么也没发生。如果我关闭一个重新加载，玩家将使用站点控件进行播放，但最初不会

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

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

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

2） 我有一个对象控制包含播放器目标的youtube“modal”窗口的显示——调用该函数时，它会执行以下操作：

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

//将div元素写入容器
_instance.videoContainer.innerHTML=''；
//找个参考资料
_instance.el=document.getElementById（'youtube-player'）；
//调用ytplayerapi
_instance.player=新的YT.player（'youtube-player'{
PlayerBars:{//尝试了一组不同的参数，但没有成功
剧本主线：1，
原点：window.location.origin，
自动播放：1，
wmode：“不透明”，
iv_负载_策略：3
},
videoId:videoId，//这将传递给函数
活动：{
onReady:function（）{
console.log（'resolved player'）；
//另一个只更改容器可见性的函数
_实例play（）；
},
onStateChange:函数（事件）{
如果（event.data==YT.PlayerState.end）{
_实例close（）；
}
}
}
});

此时，视频要么100%在桌面上自动播放，要么在手机上显示带有视频缩略图和红色大播放按钮的Youtube播放器。麻烦就从这里开始了——大部分时间它玩得很好，其余时间它只是旋转，旋转，从不玩。有趣的是，在Android上，如果我模糊窗口并重新打开它，我可以再次单击播放按钮，它就会播放

这在这一点上不重要，但是当模式关闭时，我正在销毁div和player引用

我已经尝试了我能想到的一切

• Youtube视频在某种程度上被限制了，只在iframe中显示了这么多次到源站？我将“origin”属性添加到params中，认为这可能是事实，但这似乎没有多大区别。我似乎比我的同事加载视频的成功率更高
• 是否有理由像示例中那样异步加载youtube iframe脚本，而不是从我的站点加载副本

这就是我现在能想到的。。。有什么我遗漏的吗？谢谢。

有一份相关报告指出，大多数移动设备不允许使用

自动播放功能

由此：

由于此限制，autoplay、playVideo（）和loadVideoById（）等函数和参数无法在所有移动环境中工作

A是“播放”按钮的自定义外观：

有一个覆盖元素<代码>指针事件

适用于所有现代视频，或者只需将视频容器置于按钮上方，并使用

不透明度：0

希望这有帮助

有一份相关报告指出，大多数移动设备不允许使用

自动播放功能

由此：

由于此限制，autoplay、playVideo（）和loadVideoById（）等函数和参数无法在所有移动环境中工作

A是“播放”按钮的自定义外观：

有一个覆盖元素<代码>指针事件

适用于所有现代视频，或者只需将视频容器置于按钮上方，并使用

不透明度：0

---

希望这有帮助

我遇到了几乎相同的问题。对我们来说，这是特定于细胞连接的

如果嵌入宽度大于~360px，则播放器将尝试提供“大”或更高质量的服务，而at&T和Verizon正在限制这一点

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

通过T-Mobile进行测试，工作正常，无问题

---

嵌入360像素或以下宽度的播放器在所有网络上以“中等”或更低的质量播放正常。

我遇到了几乎相同的问题。对我们来说，这是特定于细胞连接的

如果嵌入宽度大于~360px，则播放器将尝试提供“大”或更高质量的服务，而at&T和Verizon正在限制这一点

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

通过T-Mobile进行测试，工作正常，无问题

---

嵌入360px或以下宽度的播放器在所有网络上以“中等”或更低的质量播放正常。

谢谢回复。这确实是一个令人沮丧的问题。不过，问题不在于自动播放。这是因为在手机上点击YouTube播放器的播放按钮只会在一段时间内成功播放视频，其余时间只会导致挂起加载微调器。谢谢回复。这确实是一个令人沮丧的问题。不过，问题不在于自动播放。在手机上点击YouTube播放器的播放按钮是唯一成功的