API YouTube iframe запускает все события дважды

Хотя API YouTube отлично работает с использованием embedswf, мой скрипт не может работать должным образом при использовании < href="https://developers.google.com/youtube/iframe_api_reference#Getting_Started" rel="nofollow">iframes для встраивания проигрывателя. В частности, версия API для iframe, похоже, запускает все события дважды, вызывая множество проблем, таких как в этом примере (хостинг):

<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, и реализовывать обходной путь? Или можно решить эту проблему более разумным способом?

Любая помощь приветствуется!


javascript php youtube-api iframe youtube
person Chris    schedule 20.10.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, что проблема в том, что вы загружаете библиотеку iframe_api дважды

и запускается дважды наYouTubeIframeAPIReady

попробуйте удалить строки:

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
person Matias Molinas    schedule 20.10.2012
comment
Ах, действительно, я загружал API в голову и в тело. Оба способа работают, но не одновременно. Большое спасибо, что заметили это, исправил! - person Chris; 21.10.2012