我在一个网页上使用了两个视频模块。两者都以相同的方式使用 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>