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>

Answer 2

下面是另一个稍微更健壮的脚本，它可以解决您可能遇到的一些问题。

<iframe height="309" width="500" frameborder="0" id="video_player" src="" allowfullscreen></iframe> 
<a href="#" id="back_btn">Back</a>   
<a href="#" id="next_btn">Next</a> 

<div id="contents">&nbsp;</div>


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

// Keep everything in a single function variable to reduce global impact;
var loadVideo = (function() {


  var videos = [["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"]],
      $videoPlayer = $("#video_player"),  // $ in front of jQuery variables for clarity
      currentVideo = 0, i, l,

  // Increment video index safely
  inc = function() {
    var x = currentVideo + 1;
    if ( x >= videos.length ) {
      x = 0;
    }
    currentVideo = x;
    return currentVideo;
  },

  // Decrement video index safely
  dec = function() {
    var x = currentVideo - 1;
    if ( x < 0 ) {
      x = (videos.length - 1);
    }
    currentVideo = x;
    return currentVideo;
  };


  for(i = 0, l = videos.length; i < l; i++){

    // Use normal anchors, clean up and chain jQuery
    $("<a>").
      html(videos[i][0]).
      css({"display" :"block"}).  // Or add a class and use CSS for this.
      attr("href", "#").  // Makes links work
      data("id", i).  // Save our video index number on the link
      click(function(e) {
       currentVideo = $(this).data("id");  // update current video index
       loadVideo(currentVideo);
        e.preventDefault;  // Prevent default # handling.
      }).
      appendTo('#contents');
  }

  // Go back one video
  $("#back_btn").click(function(e){
    loadVideo( dec() );
    e.preventDefault();
  });

  Go forward one video
  $("#next_btn").click(function(e){
    loadVideo( inc() );
    e.preventDefault();
  });

  // fills loadVideo variable with reusable function that takes an video number
  return function(videoNum) {
    var v = videoNum || currentVideo;
    $videoPlayer.attr("src", videos[v][1]);
  };


})();

loadVideo();  // Make it go and load video.
</script>