Question

我有一个页面使用了https://github.com/Giorgio003/Youtube-TV

中的自定义YouTube播放列表插件

当我在一个页面上有一个玩家实例时，它的效果很好，但是如果我尝试添加两个或更多玩家，则只会渲染一个。

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

<!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密钥从ytv.js移到了一个全局变量中。

// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';

除此之外，js与找到的here相同。

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

更新我还重命名了window变量，结果没有变化。

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
    });
};

Answer 1

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

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

我创造了一个快速小提琴：https://jsfiddle.net/pj8kpbzw/ 请检查控制台，因为它打印了两个实例。

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

1 个答案: