Question

我在一个网页上使用了两个视频模块。两者都以相同的方式使用 YT-api。两者单独工作都没有任何问题，但是当我使用彼此相邻的两个模块时，只有一个（DOM 中的第一个）继续 onPlayerReady()，下一个没有。在每种情况下，它似乎都能正确加载视频（js-vid div 被 iframe 替换）。

如果我将 initYoutubeVideo() 添加到函数的底部，它确实会继续，但我确实会收到错误消息，例如“Uncaught TypeError: player.getDuration is not a function”

我的代码看起来很标准

function ytVideo(element) {
var _$element = $(element); 
var $vid = _$element.find('.js-vid');
var player = $vid[0];

  function initYoutubeVideo() {

        player = $vid[0];
        // e.g. <div class="video js-vid" data-video-id="id-of-yt-video-here"></div>

        var playerParams = {
            // Params
            playerVars: {
            // Vars
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        }
        
        player = new YT.Player(player, playerParams);

    }

    function onPlayerReady(event) {
        console.log('Nothing');
        console.log(player);
        var length = player.getDuration();
        // Etc
}
}

<div class="video-container"> <!-- element -->
<div class="video js-vid" data-video-id="id-of-yt-video-here"></div> <!-- $vid[0] -->
</div>

Youtube 的 onPlayerReady 事件在多次调用时不会触发

0 个答案: