0

我已经使用这个代码几天了,我就是想不通。

我能够使用 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 方法永远不会被调用。

我的代码有问题吗?

4

1 回答 1

1

导致代码中断的两个主要因素:

  1. 视频 ID 传递错误;它们必须用单引号括起来。
  2. 页面加载后,包含 Youtube API 的脚本将使用空的 var videoIDs = []; 因此播放器未加载。

要更正此问题,请按如下方式修改您的第一个文档:

  1. 如图所示添加表格。
  2. 将 jquery 代码添加到其中。
  3. 从文件中删除完全播放视频的函数及其前面的代码(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("点击",function(){
        var vidid = $(this).attr('id');
        如果(str ==“”){
           str = "'" + vidid +"'";
        }别的{
           str = str + ",'" + vidid +"'";
        }
        $("#videos").val(str); //将str字符串放入隐藏字段
     });

    创建第二个文件,保存它并在 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]);
        }
    }
}

有用!

于 2013-09-20T23:57:39.927 回答