Question

我已经使用这段代码几天了，我无法理解。

我能够使用youtube api进行自动播放视频序列。这是我的例子：

http://www.reyesmotion.com/videosequence/index.html

但是我们需要一组动态创建的视频ID，因此我将其修改为：

<script>
$(function(){
    $('li').on("click",function(){

        var pilename = $(this).attr('data-pile');
        var videoIDs = [];
        $("li[data-pile='"+pilename+"']").each(function(index){
            videoIDs.push($(this).attr('id'));

        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>

以下是此尝试： http://www.reyesmotion.com/videoTest/index.html

然而，youtube api方法永远不会被调用。

我的代码有问题吗？

Answer 1

导致代码破坏的两个主要原因是：

视频ID传输不正确;它们必须用单引号包裹起来。
加载页面后，包含Youtube API的脚本将加载一个空的var videoIDs = [];因此播放器没有加载。

要解决此问题，请按以下步骤修改第一个文档：

添加如图所示的表单。
将jquery代码添加到其中。
从文件中删除完全播放视频的功能及其前面的代码（div id =“player”和包含youtube iframe_api的脚本标记）。

<form id="lists" method="post" action="FILE-TO-CALL.php"> <input type="hidden" id="videos" name="videos" value="" /> <input name="play_list" id="play_list" type="submit" value="Play"> </form>
```
$('li').on("click",function(){
    var vidid = $(this).attr('id');
    if (str == "") {
       str = "'" + vidid +"'";
    }else{
       str = str + ",'" + vidid +"'";
    }
    $("#videos").val(str); //puts the str string in the hidden field
 });
```
创建第二个文件，保存并更改action =“FILE-TO-CALL.php”中的名称。在第二个新创建的文件中，获取在隐藏字段中使用表单发送的str的值：

$vids = $_POST['videos'];

并把它放在身体里：

`<div id="player"></div><script src="http://www.youtube.com/iframe_api"></script>`

并在脚本标记中：

var videoIDs = [<?php echo $vids;?>]; //the formatted string passed from the first file
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]);
        }
    }
}

有效！

Jquery自动播放视频序列无法正常工作

1 个答案: