我花了太多时间在这上面，但收效甚微。 我们有一个客户，该网站在页面加载时会弹出YouTube视频。 它在桌面上自动播放，并在移动设备上显示 Youtube 播放按钮，因为移动设备不支持自动播放。 我正在使用 iFrame JS API 来实例化视频播放器(下面的代码示例(。 此设置在桌面上完美运行，但在移动设备(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();
}
}
}
});
- 此时，视频要么在
桌面上 100% 自动播放，要么在移动设备上显示带有视频缩略图和大红色播放按钮的 Youtube 播放器。 这就是麻烦开始的地方 -大多数时候它玩得很好，其余时间它只是旋转和旋转，从不玩。 有趣的是，在Android上，如果我模糊窗口并重新打开它，我可以再次单击播放按钮，它就会播放。
在这一点上应该没关系，但是当模态关闭时，我正在销毁div和播放器引用。
我已经尝试了几乎所有我能想到的东西...
- Youtube 视频不知何故受到限制，只通过 iframe 向原点显示这么多次？ 我将"origin"属性添加到参数中，认为可能是这种情况，但它似乎没有太大区别。 我似乎比我的同事加载视频的成功率更高。
- 是否有理由像示例中那样异步加载 youtube iframe 脚本，而不是从我的网站加载副本？
这就是我目前能想到的...我错过了什么吗？ 谢谢。
有一个相关的线程指出大多数移动设备不允许使用autoplay功能。
从本文档中：
由于此限制，自动播放、playVideo((、loadVideoById(( 等函数和参数无法在所有移动环境中工作。
一个简单的解决方法是具有"播放"按钮的自定义外观：
有一个带有
pointer-events: none;的覆盖元素。pointer-events适用于所有现代移动浏览器，或者只是将视频容器放在带有opacity: 0的按钮上。
希望这有帮助！
我遇到了几乎完全相同的问题。对我们来说，这是特定于蜂窝连接的。
如果嵌入大于~360px宽，则播放器尝试以AT&T和Verizon限制的"大"或更高质量提供质量。
我们看到的结果是：播放器进入缓冲状态，无法实现播放。
通过T-Mobile进行的测试工作正常，没有问题。
嵌入 360 像素或以下宽度的播放器在所有网络上都能以"中等"或更低的质量播放。