1

YouTube API を使用して、リンクのリストから動画を読み込んで再生するプレーヤーのインスタンスを作成しています。各リンクには、動画 ID を値として持つインライン関数呼び出しが含まれています。次に、JS は ID を取得し、指定された div (#player') にそのビデオをロードします。

これは問題なく動作しますが、#player の複数のインスタンスを作成できるようにする必要があります。空の div を繰り返すだけで、明らかに ID が重複しているため、JS が停止します。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 に答える