多个播放器-YouTube api

Question

我正在使用YouTube API创建一个播放器实例，然后加载并播放链接列表中的视频。每个链接都包含一个以视频ID为值的内联函数调用。然后JS获取ID并将该视频加载到指定的div(#player')中。

这很好，但我现在需要做的是允许创建#player的多个实例。通过重复空的div，JS显然会因为重复的ID而停止。我已经尝试了许多不同的路由，所以它使用了一个类而不是ID，但我只能通过在JS中手动创建每个实例来开始工作。这太可怕了，造成了太多的重复。

以下是的代码片段

JS-

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ytplayer;
function onYouTubePlayerAPIReady() {
var first_vid = $('.media_controls:first').attr('id');
ytplayer = new YT.Player('player', {
height: '350',
width: '600',
videoId: first_vid,
events: {
"onStateChange": onPlayerStateChange
}
});
}
-------------------- Other code to handle onPlayerStateChange --------------------
function load_video(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}

"first_vid"仅用于在页面加载时加载第一个视频。

HTML-

<div id="player"></div> 
<a class="play_button" href="#" onClick="load_video('5jJdo5wA2zA'); return false;">Play</a>

此外，我正在为旧版本的IE使用另一个脚本，需要它来做同样的事情。这是JS(相同的html)。

var first_vid = $('.media_controls:first').attr('id');
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/"+first_vid+"?enablejsapi=1&playerapiid=ytplayer&version=3",
"player", "600", "350", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}
-------------------- Other code to handle onPlayerStateChange --------------------
function load_video(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}

非常感谢您的帮助。

Answer 1

我不完全理解你想做什么，但要在同一页面中使用多个播放器，我认为示例"主题浏览器"的源代码非常有用：

http://code.google.com/p/gdata-samples/source/browse/trunk/gdata/topic-explorer/app/scripts/controllers/main.js

$scope.videoClicked = function(target, videoId) {
var container = target.parentElement;
if (typeof(YT) != 'undefined' && typeof(YT.Player) != 'undefined') {
playVideo(container, videoId);
} else {
$window.onYouTubeIframeAPIReady = function() {
playVideo(container, videoId);
};
$http.jsonp(constants.IFRAME_API_URL);
}
};

function playVideo(container, videoId) {
var width = container.offsetWidth;
var height = container.offsetHeight;
new YT.Player(container, {
videoId: videoId,
width: width,
height: height,
playerVars: {
autoplay: 1,
controls: 2,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});
}

这个代码在视图中：

http://code.google.com/p/gdata-samples/source/browse/trunk/gdata/topic-explorer/app/views/main.html

<div class="result-heading">Videos</div>
<div class="flex-box-container-row">
<div ng-repeat="videoResult in videoResults" class="result-container">
<div class="player-container">
<img ng-click="videoClicked($event.target, videoResult.id)" ng-src="{{videoResult.thumbnailUrl}}" class="thumbnail-image">
<div class="title"><a ng-href="{{videoResult.href}}" target="_blank">{{videoResult.title}}</a></div>
</div>
<div ng-show="channelId" class="button-container">
<button ng-click="addToList($event.target, 'likes', videoResult.id)">Like</button>
<button ng-click="addToList($event.target, 'favorites', videoResult.id)">Favorite</button>
<button ng-click="addToList($event.target, 'watchLater', videoResult.id)">Watch Later</button>
</div>
</div>
</div>

此示例使用AngularJS。。