web-dev-qa-db-ja.com

YouTubeプレーヤーのvideoIDを動的に変更する方法

イベントを検出できるように、YT.Playerコードを使用したい。 YouTubeの動画IDと、IDを配列に入れる関数を含むCSVファイルがあり、ユーザーが画像をクリックしたときにIDを動的に変更できるようにしたいと考えています。基本的にこのように：

html

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

javascript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
// NOTE: videoId is taken out and instead is placed as the generated IFRAME src from the postSelection function

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: '<<CALL TO FUNCTION OR VARIABLE HERE>>',
      events: {
         //'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

このコードに精通している場合は、#player DIVはIFRAMEに置き換えられます。この機能を使用してIFRAMEソースを変更できます。

function postSelection() {
    $("#player").attr("src", _selected.attributes.url); //_selected.attributes.url comes from the CVS file
}

しかし、これは非常にバグが多く、クロスブラウザーフレンドリーではありません。 YT Player APIではなく標準のIFRAMEを使用すると、すべて正常に機能します。しかし、終了を検出し、一時停止などを行いたいので、APIを使用する必要があります。それは状態の問題であり、IFRAMEの作成のどこかで永続性が失われるということです。

よろしく。

javascriptjqueryiframeyoutube-api
26
Serious Starsider

これは、js apiを使用すると非常に簡単です。新しい動画を読み込む場合は、 https://developers.google.com/youtube/iframe_api_reference#loadVideoById でplayer.loadVideoById(videoId); Detailsを呼び出すだけです。

52
Greg Schechter