Jquery 自动播放视频序列不起作用

Jquery autoplay video sequence not working

本文关键字：不起作用 视频 自动播放 Jquery      更新时间：2023-09-26

我已经使用这段代码几天了，但我只是想不通。

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

我的代码有问题吗？

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

  1. 视频 ID 传递不正确;每个 ID 必须用单引号括起来。
  2. 页面加载后，包含 Youtube API 的脚本将随之加载，并带有空的 var videoID = [];因此不会加载播放器。

要更正此问题，请按如下所示修改您的第一个文档：

  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（"click"，function（）{    var vidid = $（this）.attr（'id'）;    if （str == "） {       str = "'" + vidid +"'";    }else{       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]);
        }
    }
}

它有效！

相关文章：