我的基础Html
<div class="ytplayer" id="player1" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
<div class="ytplayer" id="player2" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
<div class="ytplayer" id="player3" data-videoid="xxxxxxx" data-playerheight="390" data-playerwidth="640"></div>
我的脚本初始化是
$(document).ready(function(){
$(".ytplayer")._loadIFramePlayer();
});
我的功能看起来像
_loadIFramePlayer: function(){
$("<script>")
.attr("src", "//www.youtube.com/iframe_api")
.insertBefore($("body").find("script").first());
var _youtubePlayer = null;
if (typeof (YT) === 'undefined' || typeof (YT.Player) === 'undefined') {
window.onYouTubeIframeAPIReady = function () {
_youtubePlayer = new YT.Player("player", {
height: "390",
width: "640",
videoId: "xxxxxx",
events: {
// i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
$.getScript('//www.youtube.com/iframe_api');
} else {
_youtubePlayer = new YT.Player("player", {
height: "390",
width: "640",
videoId: "xxxxxx",
events: {
// i didn't mention the below functions since I am not doing any thing there, just calling stopVideo and playVideo native functions of youtube api.
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
}
理想情况下,我们应该得到三个iframe播放器实例,但在我们的情况下,我们只得到一个播放器,在所有情况下也是最后一个播放器。如果有任何解决方法,请告诉我..