動的にYoutube Playerを変更する方法videoID

Question

イベントを検出できるようにYT.Playerコードを使用したいと思います。私はYoutubeビデオIDとIDを配列に入れ、ユーザーが画像をクリックしたときにIDを動的に変更できるようにする機能を持つCSVファイルを持っています。基本的にこのような：

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 
} 

これは非常にバグがあり、ブラウザにはやさしくないです。私が標準のIFRAMEを使用していて、YT Player APIではなく、すべてうまく動作します。しかし、私は終了を検出し、一時停止するなど、私はAPIを使用する必要があります。私の推測では、それは国家との問題であり、IFRAMEの作成のどこで永続性が失われるかということです。

よろしくお願いいたします。

Answer 1

これはjs apiで行うのが非常に簡単です。新しいビデオをロードする場合は、player.loadVideoById(videoId);に電話してください。https://developers.google.com/youtube/iframe_api_reference#loadVideoById