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

我不明白你想要做什么，但是在同一页面中使用多个玩家我认为示例“topic-explorer”的源代码非常有用：

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

多个玩家 - YouTube api

1 个答案: