1

JavaScriptで制御しようとしているビデオプレーヤーがあります。次のようになります。

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

ビデオ プレーヤーのソースは、現在何もありません。しかし後で、YouTube リンクと同じになるように命令します。また、ムービーのどの部分を制御するための 2 つのボタンもあります。ここが私の困ったところです。ロードされた最初のビデオはトラバースできますが、残りのビデオはトラバースできません。複雑すぎて私には理解できません。

<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>

ロードされる最初のビデオでのみ、次へと戻るボタンを使用できます。最初のビデオ以外のビデオで、次のボタンと戻るボタンを使用すると、ビデオ配列の最初のビデオに戻ります。

4

2 に答える 2

0

試しましたか：

 <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>
于 2012-05-01T17:23:15.347 に答える
0

以下は、遭遇する可能性のあるいくつかの問題を解決する、もう少し堅牢な別のスクリプトです。

<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>
于 2012-05-01T18:46:47.267 に答える