イベントを検出できるように、YT.Player コードを使用したいと考えています。Youtube ビデオ ID を含む CSV ファイルと、ID を配列に入れる関数があり、ユーザーが画像をクリックしたときに 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 の作成のどこかで持続性が失われるということです。
よろしく。