3

YouTube APIはembedswfを使用して正常に機能しますが、 iframeを使用してプレーヤーを埋め込むとスクリプトが正しく機能しません。具体的には、APIのiframeバージョンはすべてのイベントを2回発生させ、この例（ホストされている）のようなさまざまな問題を引き起こしているようです。

<html>

<head>
    <script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>

<body>

This script initializes a YouTube API player in an iframe which cycles through the array an video IDs. Every time a video ends, the next video ID in the array is retrieved and its video is played. <b>Unfortunately, the player reports the ending of a video twice, which results in every other video being skipped</b>.

<pre>

<?php
$videos = array("TLU2DZqhsSs","8CJn4T5ulL8","gdzf5oQJWxo","VTxKMiPXOGU","BeuwxSHHFh8");
print_r($videos);
?>

</pre>

<div id="ytapiplayer">This text will be replaced by a player.</div>

<script type="text/javascript">
playlistids = <?php echo json_encode($videos); ?>;

var playing = playlistids[0];

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytplayer;

function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytapiplayer', {
        width: '922',
        height: '522',
        videoId: playing,
        events: {
            'onStateChange': onytplayerStateChange,
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720')
    event.target.setVolume(100)
    alert('Start playing entry #0 (preloaded).')
    event.target.playVideo()
}

function play(ytid) {
    if (ytplayer) {
        playing = ytid
        alert('On to entry #'+ nextentrykey +', playing set to: ' + playing)
        ytplayer.loadVideoById(ytid, 0, "hd720");
    }
}

function onytplayerStateChange(event) {
    //alert('NEW STATE: ' + event.data)
    if ( event.data == 0 ) {
        alert('Since the new player state is '+ event.data +', the video has ended. Getting next key after playing ' + playing + '.');
        nextentrykey = parseInt(playlistids.getKey(playing))+1
        if (nextentrykey >= playlistids.length) {
                nextentrykey = 0
        }
        play(playlistids[nextentrykey]);
    }
}

Object.prototype.getKey = function(value){
  for(var key in this){
    if(this[key] == value){
      return key;
    }
  }
  return -1;
};
</script>

</body>

</html>

APIから取得する他のすべての呼び出しを無視して、回避策を実装する必要がありますか？または、この問題をより賢明な方法で修正できますか？

助けていただければ幸いです。

4

1 に答える 1

4

問題は、iframe_apiライブラリを2回ロードすることだと思います

YouTubeIframeAPIReadyで2回実行されます

行を削除してみてください：

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
于 2012-10-20T20:08:53.927 に答える