javascript
  • arrays
  • next
  • 2011-11-17 10 views 5 likes 
    5

    今、私はビデオの配列を持っています。私が次をクリックして、アレイ内の次のまたは前のビデオが読み込まれるとき、どうすればいいですか? YOUTコードを使用して私の配列の次の項目を呼び出す

    <video id="video" controls autoplay width="1000"> 
        <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
        <source src="videos/test.ogv" /> 
    </video> 
    
    <a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a> 
    
    
    
    <script> 
    var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array 
    function vidSwap(vidURL) { 
    var myVideo = document.getElementsByTagName('video')[0]; 
    myVideo.src = vidURL; 
    myVideo.load(); 
    myVideo.play(); 
    } 
    

    +0

    onclick属性では、javascriptが想定されるため、関数呼び出しの前に 'javascript:'を付ける必要はありません。また、まだjQueryを使用していない場合は、jQueryを使い始めることをお勧めします。 – benekastah

    答えて

    2

    、それはこのようなものになるでしょう。 あなたがする必要があるのは、javascript変数に読み込んだビデオを持つことです。 次に、prevまたはnextをクリックすると、正しいビデオ番号を入力して呼び出す関数を呼び出すことができます。

    <script> 
    var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"] 
    var video = 0; 
    
    function vidSwap() { 
        var myVideo = document.getElementsByTagName('video')[video]; 
        myVideo.src = vidURL[video]; 
        myVideo.load(); 
        myVideo.play(); 
    } 
    
    
    function prevVideo() { 
        if(video == 0) { 
        video = vidUrl.length; 
        } 
        else { 
        video -= 1; 
        } 
    
        vidSwap(); 
    } 
    
    function nextVideo() { 
        if(video == length) { 
        video = 0; 
        } 
        else { 
        video += 1; 
        } 
    
        vidSwap(); 
    } 
    
    </script> 
    
    
    <video id="video" controls autoplay width="1000"> 
        <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
        <source src="videos/test.ogv" /> 
    </video> 
    
    <a href="#" onClick="javascript:prevVideo(); return false;">prev</a> 
    <a href="#" onClick="javascript:nextVideo(); return false;">next</a> 
    
    +0

    私はこれを返すfalseを実装すると、next goetzs

    +0

    これはまだ動作していないようです – goetzs

    +0

    私は頭でそれを作ったいくつかのエラーが発生する可能性があります。 @ brpyneレスポンスを参照し、私のトートを使用してください。彼は彼のコードが正しいと言います。 –

    1

    現在のビデオインデックスを保存する変数を導入し、その後、あなたは押すたびに、それをインクリメントするかデクリメント次/前の

    </script> 
    var i = 0; 
    <script> 
    
    javascript:vidSwap(vidURL[i++]) 
    
    +0

    最後の配列項目に到達したときにこれが壊れて、次を押します。 –

    1

    あなたはインクリメント演算子で別のプラス記号が欠落しているように見えます。

    は折り返し付きの代替を包まこの

    <a href="#" onClick="javascript:vidSwap(vidURL[i++]); return false;">next</a> 
    
    +0

    最後の配列項目に到達するとこれが壊れます。 –

    +0

    これは正しいです。私は最初の問題を克服した後、そのタイプのロジックを処理すると考えました。そのような構文エラーは簡単に見過ごすことができる、私はそのようなもの以上の少なくとも百倍の私の額にヒットしました。 – brpyne

    1

    <a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a> 
    

    を変更してみてください。

    <a href="#" onClick="return Vids.next();">next</a> 
    <a href="#" onClick="return Vids.prev();">prev</a> 
    
    ... 
    
    var Vids = (function() { 
        var _currentId = -1; 
        var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array 
        return { 
         next: function() { 
          if (++_currentId >= _urls.length) 
           _currentId = 0; 
          return this.play(_currentId); 
         }, 
         prev: function() { 
          if (--_currentId < 0) 
           _currentId = _urls.length - 1; 
          return this.play(_currentId); 
         }, 
         play: function(id) { 
          var myVideo = document.getElementsByTagName('video')[0]; 
          myVideo.src = _urls[id]; 
          myVideo.load(); 
          myVideo.play(); 
          return false; 
         } 
        } 
    })(); 
    
    +0

    これはもっと似ています:) –

    +0

    複数のソースタイプを配列に入れることは可能です – goetzs

    +0

    ソースタイプではどうしますか? –

    関連する問題