javascript - 如何在我的视频导航中增加 videoIndex？

Question

我有一个视频播放器，我想用 javascript 控制它。它看起来像这样:

<iframe height="309" width="500" frameborder="0" id="video_player" src="" allowfullscreen></iframe>

视频播放器源现在等于没有。但后来我命令它等于一个 youtube 链接。还有两个按钮可以控制电影的哪一部分。这就是我的麻烦所在。我可以遍历第一个加载的视频，但不能遍历剩余的视频。这对我来说太复杂了。

<button id="back_btn" style="float:left">Back</button>  
<button id="next_btn" style="float:right">Next</button>

在视频播放器和按钮之后，我添加了控制它的代码。我使用 for 循环生成视频菜单。我将视频数据存储在一个多维数组中。当我使用术语多维数组时，我感觉自己来自外太空。比如让我们打开多维入口来抓取视频数据。然后我必须使用模块模式将 i 的值存储在我为每个菜单项创建的每个事件监听器中。我制作了这个程序的一个没有 jQuery 库的版本，代码似乎并没有短多少。我在工作中的菜鸟技能。

<script type="text/javascript">
    //Javascript Video Player and Table of Contents
    var partId = 1;
    var videoIndex = 0;
    var videoPlayer = $("#video_player");
    var videos = new Array(
        ["Dr. Dive Flies a Helicopter",
         "http://www.youtube.com/embed/8t_cEvjpyp0",
         "http://www.youtube.com/embed/LbXF4un-b5Y",
         "http://www.youtube.com/embed/ec27I2F1y7E",
         "http://www.youtube.com/embed/Y4b9lMcPx64",
         "http://www.youtube.com/embed/9BqEkbK9sjA",
         "http://www.youtube.com/embed/veSPoE3CaTM"],
        ["California Diving Competition",
         "http://www.youtube.com/embed/dUjKW3aN96k"],
        ["Dr. Dive Diving",
         "http://www.youtube.com/embed/s2iZ-raCKq0"],
        ["Tom Hairabedian playing his harmonica at age 88!",
         "http://www.youtube.com/embed/jQZbVY4HCzQ"]);
    loadVideo();
    for(var i = 0; i < videos.length; i++){
        (function(i){
            var a = $("<a>").html(videos[i][0]);
            //videoIndex = i;//This will break the script
            a.css("display","block");
            a.css("cursor","pointer");
            a.click(function(){
                videoPlayer.attr("src", videos[i][1]);
            });
            $("#contents").append(a);
        }(i));
    }
    $("#back_btn").click(function(){
        partId--;
        loadVideo();
    });
    $("#next_btn").click(function(){
        partId++;
        //videoIndex++;//I add one to...no
        loadVideo();
    });
    function loadVideo(){
        videoPlayer.attr("src", videos[videoIndex][partId]);
    }
</script>

我只能在加载的第一个视频上使用下一个和后退按钮。当我在第一个视频以外的任何视频上使用下一个和后退按钮时，它将返回到视频数组中的第一个视频。

Answer 1

你试过吗:

 <script type="text/javascript">
                //Javascript Video Player and Table of Contents
                var partId = 1;
                var videoIndex = 0;
                var videoPlayer = $("#video_player");
                var videos = new Array(["Dr. Dive Flies a Helicopter","http://www.youtube.com/embed/8t_cEvjpyp0","http://www.youtube.com/embed/LbXF4un-b5Y","http://www.youtube.com/embed/ec27I2F1y7E","http://www.youtube.com/embed/Y4b9lMcPx64","http://www.youtube.com/embed/9BqEkbK9sjA","http://www.youtube.com/embed/veSPoE3CaTM"],["California Diving Competition","http://www.youtube.com/embed/dUjKW3aN96k"],["Dr. Dive Diving","http://www.youtube.com/embed/s2iZ-raCKq0"],["Tom Hairabedian playing his harmonica at age 88!","http://www.youtube.com/embed/jQZbVY4HCzQ"]);
                loadVideo();
                for(var i = 0; i < videos.length; i++){
                    (function(i){
                    var a = $("<a>").html(videos[i][0]);
                    //videoIndex = i;//This will break the script
                    a.css("display","block");
                    a.css("cursor","pointer");
                    a.click(function(){
                            videoPlayer.attr("src", videos[i][1]);
                        });
                    $("#contents").append(a);
                    }(i));
                }
                $("#back_btn").click(function(){
                    partId--;
                    loadVideo();
                });
                $("#next_btn").click(function(){
                    partId++;
                    videoIndex=i++;
                    loadVideo();
                });
                function loadVideo(){
                    videoPlayer.attr("src", videos[videoIndex][partId]);
                }
            </script>