【发布时间】：2018-01-03 23:26:57
【问题描述】：
我在这方面花费了太多时间，但收效甚微。我们有一个客户，其网站在页面加载时会弹出 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 显示了这么多次到源？我将“起源”属性添加到参数中，认为可能是这种情况，但似乎并没有太大的区别。我似乎比我的同事加载视频的成功率更高。
- 是否有某些理由像示例中那样异步加载 youtube iframe 脚本，而不是从我的网站加载副本？
目前我能想到的就这些了……有什么我遗漏的吗？谢谢。
【问题讨论】：
标签： javascript iframe mobile youtube youtube-api