gpt4 book ai didi

javascript - YouTube api 事件未使用 adobe muse 触发

转载 作者:行者123 更新时间:2023-12-03 06:19:41 24 4
gpt4 key购买 nike

我的客户想要一个包含 4 个嵌入式 youtube 视频的页面,当您单击下一个视频时会暂停,因此一次只能播放一个。听起来很容易,对吧?

问题是,他想将整个网站保留在 adobe muse 中,我找到了一个小部件,可以让我轻松插入 jquery/js 代码。我正在使用 this fiddle 的略微修改版本我在 thread from 2014 上找到了这看起来非常有前途和稳定,但是当我将页面上传到我的网络服务器上时它不知何故不起作用。它虽然在 fiddle 中工作。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('api_inserted');

function onYouTubeIframeAPIReady() {
console.log('api_ready');
var $ = jQuery;
var players = [];
$('iframe').filter(function() {
return this.src.indexOf('http://www.youtube.com/') === 0;
}).each(function(k, v) {
console.log('iframes');
var src1 = $(this).attr('src');
$(this).attr('src', src1 + "?enablejsapi=1");
if (!this.id) { this.id='embeddedvideoiframe' + k; }
players.push(new YT.Player(this.id, {
events: {
'onStateChange': function(event) {
console.log('State_changed: ' + event.data);
if (event.data == YT.PlayerState.PLAYING) {
$.each(players, function(k, v) {
if (this.getIframe().id != event.target.getIframe().id) {
this.pauseVideo();
}
});
}
}
}
}));
console.log(players);
});
}

我的控制台输出如下所示:
api_inserted
api_ready
iframes
[X]
iframes
[X, X]
iframes
[X, X, X]
iframes
[X, X, X, X]

最佳答案

我问了我的一个好 friend ,我们解决了这个问题。

iframe 需要“enablejsapi=1”,我添加了“?”之前,那是错误的。 只有一个“?”在视频 id 和所有其他属性之后用“&”分隔。

正确的代码是:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('api_inserted');

function onYouTubeIframeAPIReady() {
console.log('api_ready');
var $ = jQuery;
var players = [];
$('iframe').filter(function() {
return this.src.indexOf('http://www.youtube.com/') === 0;
}).each(function(k, v) {
console.log('iframes');
var src1 = $(this).attr('src');
$(this).attr('src', src1 + "&enablejsapi=1");
if (!this.id) { this.id='embeddedvideoiframe' + k; }
players.push(new YT.Player(this.id, {
events: {
'onStateChange': function(event) {
console.log('State_changed: ' + event.data);
if (event.data == YT.PlayerState.PLAYING) {
$.each(players, function(k, v) {
if (this.getIframe().id != event.target.getIframe().id) {
this.stopVideo();
}
});
}
}
}
}));
console.log(players);
});
}

关于javascript - YouTube api 事件未使用 adobe muse 触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37793995/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com