多的球員 - 的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和需要做同樣的事情。這是（相同的HTML）的JS。

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 ..