如何解决当新视频以模式启动时,停止播放其他Youtube视频
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
function onYouTubeIframeAPIReady() {
var $ = jQuery;
var players = [];
$('iframe').filter(function() {
return this.src.indexOf('https://www.youtube.com/') == 0
}).each(function(k,v) {
if (!this.id) {
this.id = 'embeddedvideoiframe' + k
}
players.push(new YT.Player(this.id,{
events: {
'onStateChange': function(event) {
if (event.data == YT.PlayerState.PLAYING) {
$.each(players,function(k,v) {
if (this.getIframe().id != event.target.getIframe().id) {
this.pauseVideo();
}
});
}
}
}
}))
});
}
});
上面的代码为嵌入式播放器编写了代码,但是如果您在所有iframe嵌入式视频都正常工作之前点击播放视频,则除非刷新页面,否则它通常会停止工作。在所有YouTube嵌入广告加载完毕后,是否可以调用此代码?
解决方法
您可以将onReady
事件与Promises一起使用,以确定是否已加载所有视频。可能是这样的:
function onYouTubeIframeAPIReady() {
var $ = jQuery;
var players = [];
var loaded = [];
var allLoaded = false;
$('iframe').filter(function() {
return this.src.indexOf('https://www.youtube.com/') == 0
}).each(function(k,v) {
var that
if (!this.id) {
this.id = 'embeddedvideoiframe' + k
}
that = this.id;
loaded.push(new Promise(function (resolve,reject) {
players.push(new YT.Player(that.id,{
events: {
'onReady': resolve,'onStateChange': function(event) {
if (!allLoaded) return;
if (event.data == YT.PlayerState.PLAYING) {
$.each(players,function(k,v) {
if (that.getIframe().id != event.target.getIframe().id) {
that.pauseVideo();
}
});
}
}
}
}))
}));
});
Promise.all(loaded).then(function () {
allLoaded = true;
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。