Невозможно получить пользовательский плейлист для видео YouTube для работы

Первое видео воспроизводится, но не следующее видео в моем списке. Я скопировал исходный код из YouTube API example. Также идея использования onPlayerStateChange (event) от this SO answer.Невозможно получить пользовательский плейлист для видео YouTube для работы

Первое видео отлично. Используя Firebug, я также вижу, что он переходит в функцию playnextvideo(). Однако следующее видео не воспроизводится. Я также попытался добавить

player.playVideo()

в последней строке этой функции, но я получаю сообщение об ошибке сказав «player.playVideo() не является функцией». Ниже приведен весь мой раздел <body>. На этой странице нет другого скрипта.

<div id="container"> 
<div id="content"> 
    <div class="fixedwidthlower"> 
    <?php 
     require 'dbconn.inc'; //database connection code 
     echo "<div id=\"SongList\"><ul id = \"songs\">"; 
     $list = explode(" ", $_POST['playlist']); 
     $hlist = array(); 
     for($i=0; $i<count($list); $i++){ 
      $sql = "SELECT * FROM songs where aikey = " . $list[$i] . ";"; 
      $result = $conn->query($sql); 
      $row = $result->fetch_assoc(); 
      if ($i==0) 
       $liclass = " class=\"active\""; 
      else 
       $liclass = ""; 
      echo "<li" . $liclass . "><a href=\"" . $row["URL"] . "\">" . $row["Song"] . " (" . substr($row["URL"], stripos($row["URL"], "=") + 1) . ")</a></li>"; 
      $hlist[] = substr($row["URL"], stripos($row["URL"], "=") + 1); 
     } 
     echo "</ul></div>"; 
     echo "<div id=\"Player\">"; 
     for($i=0; $i<count($hlist); $i++){ 
      echo $hlist[$i] . " "; 
     } // This loop puts the raw videoids into the Player Div 
      // which are then read by the first line in javascript below 
      // Example: "usNsCeOV4GM 8pPvNqOb6RA cwqhdRs4jyA XcATvu5f9vE WANNqr-vcx0 t-iJ47in9YQ OMOGaugKpzs l3LFML_pxlY mLDDxfFKd9Y 9Z4rmlyuH-s " 
     echo "</div>"; 
     $conn->close(); 
    ?> 
</div> 
</div> 
<script type="text/javascript"> 
     var videolist = document.getElementById("Player").innerHTML.split(" "); 
     var i =0; 
     var video = videolist[i]; 
     function playnextvideo(){ 
      i++; 
      video = videolist[i]; 
      playmyvideo(); 
      player.playVideo(); 
     } 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     var player; 
     function onYouTubeIframeAPIReady() { 
      playmyvideo(); 
     } 
     function playmyvideo() { 
       player = new YT.Player('Player', { 
       height: '390', 
       width: '640', 
       videoId: video, 
        events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 
     function onPlayerReady(event) { 
      event.target.playVideo(); 
     } 
     function onPlayerStateChange(event) { 
      if (event.data === 0) { 
       playnextvideo(); 
      } 
     } 
     console.log(i); 
     console.log(video); 
    </script>

Код php, вероятно, не имеет отношения к делу, но я показал его для полноты. Я не включил CSS, потому что он, вероятно, не имеет значения (нет : нет divs, как я видел, вызывая проблемы в других вопросах). Если вы хотите, чтобы ссылка на страницу была включена, я могу предоставить это тоже ...

Thanx для вашей помощи!

источник

2015-12-21 Chiwda

Вам необходимо пересмотреть свою реализацию и использовать функцию loadPlaylist or cuePlaylist, так как она прекрасно решит вашу проблему, не внедряя слишком сложные коды.

Использование loadPlaylist позволяет загружать указанный список воспроизведения и воспроизводить его. В приведенном ниже примере я указал список идентификаторов видео, которые я хочу воспроизвести в событии onPlayerReady.

(вы можете попробовать запустить приведенный ниже код в jsFiddle)

<div id="player"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    function onPlayerReady(event) { 
    event.target.loadPlaylist(['RB-RcX5DS5A','QtXby3twMmI']); 
    } 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     done = true; 
    } 
    } 
function stopVideo() { 
    player.stopVideo(); 
} 
</script>

источник

2015-12-22 11:33:41 goblin

Постараюсь, но это не помогает большую картину. Я хочу иметь возможность воспроизводить видео с других сайтов. Таким образом, я переключусь на другую функцию, которая создает экземпляр другого игрока, использующего другой API. Vimeo, когда появляется видео Vimeo. – Chiwda

Thanx! Он работает, и поэтому я принял ваш ответ. Однако теперь я понимаю, что моя архитектура ошибочна. Я должен поставить цикл за пределы API YouTube (и других API). Duh! – Chiwda

Невозможно получить пользовательский плейлист для видео YouTube для работы

ответ

Смежные вопросы