Kaynak ile butona tıklayarak videoyu oynatma listesine nasıl eklenir

Sorunum var, oynatma listesine kaynak ile bir video düğmesi eklemek istiyorum. Bir şey ... İlk video oyunları sırasında, mp4 kaynakları ile 3 düğme vardır. Bu düğmelere tıkladığımda, oynamaya başlarlar. Her şey çalışıyor, ama ben o şeyi istemiyorum. Bir düğmeyi tıkladığımda bir işlev yapmak istiyorum, video ilk videodan sonra oynatılmaya başlar. Flowplayer gibi bir şey - http://flash.flowplayer.org/demos/plugins/javascript/playlist/dynamic.html fonksiyonu birçok fonksiyonlar sadece bir parçasını değiştirmek için eklemek verimli değildir çünkü hafifçe işlevini değiştirdi 2.Kaynak ile butona tıklayarak videoyu oynatma listesine nasıl eklenir

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

kaynak

2016-03-23 V.Bôtoš

kullanımı bir kombinasyonu [Bu] (http://www.w3schools.com/js/js_timing.asp) ve [bu] (http://www.w3schools.com/tags/av_prop_duration.asp). Önce video süresini alın, sürenin bitiminde sürenin dolmasını ve yeni videoyu ayarlayıp oynatmaya başlayın. Bu işlev için, kaynağı bir sıra listesine (array) eklemenizi ve zamanlayıcının süresi dolduğunda ilk öğeyi kapatmanızı ve – Xorifelse

işlemini tekrarlamanızı öneririm. Teşekkürler. Bunu yapmak için çok yetenekli olduğumu biliyorum :) –

konumlandırmak için ekleyin.

Kodunuz gayet iyiydi, sadece yanlış öğeye işaret ediyordu. Ben test etmedim olarak

 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>

kaynak

2016-03-23 17:08:04 colecmc

Yardım etmeye çalıştığınız için teşekkürler, bu doğru ve mantıklı görünüyor, ancak çalışmıyor. –

Tam burada çalışır: https://output.jsbin.com/zihehedafu, eğer her bir kaynağı tıklattığınızda oluşturulan kaynağı gözlemlerseniz, 'src' özniteliği güncelleştirilir. Sonunda ne oluyor? – colecmc

Sadece videomda video etiketimi oynat ve düğmeleri çalışmıyor ... –

Sen, mantık kod olarak şu örneği düşünmelisiniz ben uzunluğu almalısınız eğer kafamın üstünden biliyoruz sözdizimi hataları ve Noor için kontrol HTML'deki kaynak veya oynatıcı öğesinden videonun.

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

kaynak

2016-03-23 18:42:38 Xorifelse

Kaynak ile butona tıklayarak videoyu oynatma listesine nasıl eklenir

cevap

İlgili konular