YouTube IFrame API、加载 PHP 数据并添加播放器控制功能

Question

我有一个数据库驱动的 YouTube 视频播放器，其中视频代码从 table 加载并在 <div> 中播放。但是我有两个问题：

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()" />

和之前一样

YouTube IFrame API、加载 PHP 数据并添加播放器控制功能

YouTube IFrame API, Load PHP Data AND Add Player Control Function

javascript

php

media

youtube

youtube-api