gpt4 book ai didi

javascript - 解决多个 YouTube 播放列表插件实例之间的冲突

转载 作者:行者123 更新时间:2023-12-03 06:17:08 25 4
gpt4 key购买 nike

我有一个使用自定义 YouTube 播放列表插件的页面 https://github.com/Giorgio003/Youtube-TV

当我在页面上有一个播放器实例时效果很好,但如果我尝试添加两个或更多播放器,则只有一个会呈现。

这是一个包含两个播放列表的示例页面:

<!doctype html>
<html lang="en">
<head>
<title>YouTube TV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/ytv.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.test-title{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-9 col-lg-11">
<div>
<h4 class="test-title">Testing Responsive YouTube Playlist</h4>
</div>
<div id="responsive1"></div>

<div id="responsive2"></div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="src/ytv.js"></script>
<script>
var apiKey = 'ThisIsAValidKey';
window.onload = function(){
window.controller = new YTV('responsive1', {
playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww',
responsive: true
});
};
window.onload = function(){
window.controller = new YTV('responsive2', {
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};

</script>
</body>
</html>

我将 API key 从 ytv.js 移到了一个全局变量中。
// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';

除此之外,js和找到的一样 here .

如何修改此插件以允许多个实例?

更新:
我还重命名了 window vars 结果没有变化。
window.controller1 = new YTV(...);
window.controller2 = new YTV(...);

解决方案:
从下面的标记答案推断
window.onload = function(){
$('#responsive1').ytv({
playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F',
responsive: true
});
$('#responsive2').ytv({
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};

最佳答案

通过查看 Youtube 代码,我可以看到它已经处理了多个 jQuery 实例。

if ((typeof jQuery !== 'undefined')) {
jQuery.fn.extend({
ytv: function(options) {
return this.each(function() {
new YTV(this.id, options);
});
}
});
}

我创建了一个快速 fiddle : https://jsfiddle.net/pj8kpbzw/
请检查控制台,因为它会打印两个实例。

关于javascript - 解决多个 YouTube 播放列表插件实例之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42420548/

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