Javascript 多玩家-YouTube api

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

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

下面是代码片段

JS-

“first_vid”仅用于加载页面加载时的第一个视频

HTML-

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

---

非常感谢您的帮助。

我不太清楚您想要做什么，但要在同一页面中使用多个播放器，我认为示例“主题浏览器”的源代码非常有用：

视图中的代码：

视频
喜欢
最喜欢的
晚点看

---

此示例使用AngularJS..

我不太清楚您想要做什么，但要在同一页面中使用多个播放器，我认为示例“主题资源管理器”的源代码非常有用：

视图中的代码：

视频
喜欢
最喜欢的
晚点看

---

此示例使用AngularJS..

是否希望每个视频实例都有多个“播放”链接？或者，是否希望特定视频的同一播放按钮应用于任何播放器实例？是否希望每个视频实例都有多个“播放”链接？或者，您希望将特定视频的相同播放按钮应用于任何播放器实例吗？您好，感谢您的回复。基本上，我需要能够创建这个多个实例。。。嗨，谢谢你的回复。基本上，我需要能够创建这个多个实例。。。

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

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);
    }
}

$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
      }
    });
  }

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