1

我正在使用 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);
    }
}

非常感谢您的帮助。

4

1 回答 1

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

于 2012-11-27T16:53:58.987 回答