Youtube API iframe在浏览器刷新时不显示
Youtube API iframe在浏览器刷新时不显示
提问于 2017-07-06 21:04:58
下面的脚本运行得很好，但是在一个非常随机的顺序中，当我刷新浏览器时，iframe youtube生成的视频不会显示(有时会显示，这是非常随机的)。iframe不会生成，并且标记只有空的div，最终会被iframe替换。
我正在使用脚本标记加载youtube API：
<script src="https://www.youtube.com/iframe_api"></script>当视频没有显示时，我也不会在控制台中得到任何错误。
$(document).ready(function(){
window.onYouTubePlayerAPIReady = function() {
var players = [], vids=[], player0, player1, player2;
for (var i = 0; i < document.querySelectorAll(".video-thumb__single").length; i++) {
players.push(document.querySelectorAll(".video-thumb__single")[i].dataset.videoId);
}
player0 = new YT.Player('player0', {
height: '200',
width: '400',
videoId: players[0],
events: {
'onStateChange': onPlayerStateChange
}
});
vids.push(player0);
player1 = new YT.Player('player1', {
height: '200',
width: '400',
videoId: players[1],
events: {
'onStateChange': onPlayerStateChange
}
});
vids.push(player1);
player2 = new YT.Player('player2', {
height: '200',
width: '400',
videoId: players[2],
events: {
'onStateChange': onPlayerStateChange
}
});
vids.push(player2);
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
stopVideo(event.target.a.id);
}
}
function stopVideo(player_id) {
console.log(vids);
for (var i = 0; i < vids.length; i++) {
if (player_id != vids[i].a.id)
vids[i].stopVideo();
}
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-07 17:11:56
我最终做了以下几件事：
window.onYouTubeIframeAPIReady = function() {
player0 = new YT.Player('player0', {
height: '390',
width: '640',
videoId: ids[0],
events: {
'onStateChange': onPlayerStateChange
}
});
player1 = new YT.Player('player1', {
height: '390',
width: '640',
videoId: ids[1],
events: {
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: ids[2],
events: {
'onStateChange': onPlayerStateChange
}
});
}必须将"onYouTubeIframeAPIReady“附加到窗口对象。API说明函数必须在全局作用域中才能被触发。这解决了我的问题，但我还是不明白它和以前有什么不同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44949781
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号