ソースを持つボタンをクリックしてプレイリストにビデオを追加する方法

問題がある、私はプレイリストにソースを持つボタンでビデオを追加したい。何かのように...最初のビデオ再生中に、mp4ソースを持つ3つのボタンがあります。そのボタンをクリックすると、演奏が始まります。すべてが機能しますが、私はそのことを望んでいません。私はボタンをオンクリックすると機能したい、ビデオは最初のビデオの後に再生を開始します。 flowplayerような何か - http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html 機能は、多くの機能はそれの一部を変更することを追加することは効率的ではないので、私は少しあなたの機能を変更2.ソースを持つボタンをクリックしてプレイリストにビデオを追加する方法

<body> 

    <div style="overflow: hidden;"> 
     <video id="video" width="80%" autoplay controls > 
      <source id="videoSource" src="video/0.mp4" type="video/mp4"> 

     </video> 

     <a class="btn blue" onclick="changevideo0()">0</a> 
     <a class="btn blue" onclick="changevideo1()">1</a> 
     <a class="btn blue" onclick="changevideo2()">2</a> 
    </div> 



    <script> 

     function changevideo0() { 
     document.getElementById('video').src = "video/0.mp4";} 

     function changevideo1() { 
     document.getElementById('video').src = "video/1.mp4";} 

     function changevideo2() { 
     document.getElementById('video').src = "video/2.mp4";} 


    </script> 


</body>

出典

2016-03-23 V.Bôtoš

[本]（http://www.w3schools.com/js/js_timing.asp）の組み合わせを使用して、[この（http://www.w3schools.com/tags/av_prop_duration.asp ）。最初にビデオ期間を取得し、期間を過ぎるとタイマーを設定し、新しいビデオを設定して再生を開始します。関数については、ソースをキューリスト（配列）に追加して、タイマーが満了してプロセスを繰り返すときに最初の要素をオフにすることをお勧めします。 – Xorifelse

ありがとう、私はこれを管理しようとしています...しかし、私はしません知っている、私はそれを行うにはあまりにもskillfull場合:) –

位置に追加します。

あなたのコードは間違った要素を指しているだけで、かなり良いものでした。

 function changevideo(source) { 
 
      document.getElementById('videoSource').src = source; 
 
     }

<body> 
 

 
    <div style="overflow: hidden;"> 
 
     <video id="video" width="80%" autoplay controls > 
 
      <source id="videoSource" src="video/0.mp4" type="video/mp4"> 
 

 
     </video> 
 

 
     <a class="btn blue" onclick="changevideo('video/0.mp4')">0</a> 
 
     <a class="btn blue" onclick="changevideo('video/1.mp4')">1</a> 
 
     <a class="btn blue" onclick="changevideo('video/2.mp4')">2</a> 
 
    </div> 
 

 
</body>

出典

2016-03-23 17:08:04 colecmc

助けてくれてありがとう、ありがとう、それは正しいと思われるロジックが、動作しません。 –

ここで動作します：https://output.jsbin.com/zihehedafu、生成されたソースをクリックすると、各番号をクリックすると 'src'属性が更新されます。あなたの目的は何ですか？ – colecmc

ビデオタグでビデオsrcを再生し、ボタンは動作しません... –

私は構文エラーとノアをチェックし、テストしていませんと私は長さを取得する場合、私は私の頭の上から知っている、ロジック・コードとして次の例を検討すべきですHTMLのソース要素またはプレーヤー要素からのビデオの

<body> 
    <script> 
     var player = document.getElementById("video"); 

     var videolist = { 
      'video/0.mp4', 
      'video/1.mp4', 
      'video/2.mp4' 
     }; 

     var queuelist = {}; 

     function changevideo() { 
      if(!queuelist.length == 0){ 
      document.getElementById('videoSource').src = queuelist.shift(); 
      setTimeout(changevideo, player.length * 1000); 
      } else { 
      alert("no more video's in queue"); 
      } 
     } 

     player.play(); 
     setTimeout('changevideo', player.length * 1000); 
    </script> 

    <div style="overflow: hidden;"> 
     <video id="video" width="80%" autoplay controls > 
      <source id="videoSource" src="video/0.mp4" type="video/mp4"> 
     </video> 

     <a class="btn blue" onclick="queuelist.append(0)">0</a> 
     <a class="btn blue" onclick="queuelist.append(1)">1</a> 
     <a class="btn blue" onclick="queuelist.append(2)">2</a> 
    </div> 
</body>

出典

2016-03-23 18:42:38 Xorifelse

ソースを持つボタンをクリックしてプレイリストにビデオを追加する方法

答えて

関連する問題