API-интерфейс YouTube IFrame, загрузка данных PHP и добавление функции управления проигрывателем

Question

У меня есть видеопроигрыватель YouTube на базе базы данных, где видеокоды загружаются со стола и воспроизводятся в <div>. Но у меня есть 2 проблемы:

1) Как загружать в видеокоды из моего PHP-кода в Javascript?

Вот мой PHP код:

<?php 
$code_sql = "SELECT * FROM music_codes WHERE id = '$url_id'"; 
$code_res = mysqli_query($con, $code_sql); 
while($code = mysqli_fetch_assoc($code_res)){ 

    $code_1 = $code["one"]; 
    $code_2 = $code["two"]; 
    $code_3 = $code["three"]; 
    $code_4 = $code["four"]; 
    $code_5 = $code["five"]; 
    $code_6 = $code["six"]; 
    $code_7 = $code["seven"]; 
    $code_8 = $code["eight"]; 

}; 
?> 

И Javascript, где мне нужно, чтобы отобразить PHP:

<div id="player"></div> 
<script src="//www.youtube.com/iframe_api"></script> 
<script> 
    /** 
    * Put your video IDs in this array 
    */ 
    var videoIDs = [ 
     ' ** $code_1 ** ', // PHP Code Display 
     ' ** $code_2 ** ', // PHP Code Display 
     etc, 
     etc 
    ]; 

    var player, currentVideoId = 0; 

    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '350', 
      width: '425', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.loadVideoById(videoIDs[currentVideoId]); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      currentVideoId++; 
      if (currentVideoId < videoIDs.length) { 
       player.loadVideoById(videoIDs[currentVideoId]); 
      } 
     } 
    } 
</script> 

2) Как добавить лучше контролировать для пользователей, чтобы пропустить видео? В настоящий момент он воспроизводит каждое видео одно за другим, но нет способа дать им возможность щелкнуть дальше или дальше. Это очень необходимо для того, что я пытаюсь сделать.

Answer 1

Вам нужно создать функцию для изменения currentVideoId:

function next(){ 
    currentVideoId++; 
    if (currentVideoId < videoIDs.length) { 
      player.loadVideoById(videoIDs[currentVideoId]); 
    } 
} 

function prev(){ 
    currentVideoId--; 
    if (currentVideoId >= 0) { 
      player.loadVideoById(videoIDs[currentVideoId]); 
    } 
    else currentVideoId = 0; 
} 

Html:

<input type="button" value=""Next" onclick="next()" /> 
<input type="button" value=""Previous" onclick="prev()" /> 

И то же самое для предыдущего.