私は解決策を探してきたが、今まで私は、キャンバス上の多くのビデオを持っているソリューション</p> <p>しませんでしたどのように私は1枚のキャンバスに多くのビデオを制御することができます

Question

...私は別の1つが再生中の動画を一時停止する必要があります?????を始めるどんな答え
これは、より詳細な説明のために私のコードであるため

おかげで...

HTML

<div class="cont"> 
     <canvas id="myCan" class="cont"></canvas> 
     <div class="mainVidCont"> 

      <video id="vid1" class="myVid" accesskey="1" controls > 
       <source src="video9.mp4" type="video/mp4"/> 
      </video> 
      <video id="vid2" class="myVid" accesskey="2" controls > 
       <source src="video6.mp4" type="video/mp4"/> 
      </video> 
      <video id="vid3" class="myVid" accesskey="3" controls > 
       <source src="video23.mp4" type="video/mp4"/> 
      </video> 

      <video id="vid4" class="myVid" accesskey="4" controls > 
       <source src="video24.mp4" type="video/mp4"/> 
      </video> 
      <video id="vid5" class="myVid" accesskey="5" controls > 
       <source src="Adele - Send My Love To Your New Lover.mp4" type="video/mp4"/> 
      </video> 
      <video id="vid6" class="myVid" accesskey="6" controls > 
       <source src="video11.mp4" type="video/mp4"/> 
      </video> 

     </div> 
    </div> 

CSS

.cont{ 
      position:absolute; 
      width:100%; 
      height:100%; 
      bottom:0; 
      right:0; 
      top:0; 
      left:0; 
     } 
     mayCan 
     { 
     opacity:1; 
     } 
     .myVid 
     { 
      position:relative; 

      width:200px; 
      height:auto; 
      margin:5px; 
     } 
     .mainVidCont 
     { 
      position:fixed; 
      width:250px; 
      overflow-y:auto; 
      right:0; 
      bottom:0; 
      top:0; 
      left:0; 
     } 

javascriptの

var x = document.getElementsByTagName("video"); 
          window.onload = function(){ 
          var c = document.getElementById("myCan"); 
          var ctx = c.getContext("2d"); 
          for(i=0 ; i < x.length ;i++) 
          {         
           c.ondblclick = function() 
            { 
              if(c.height == "150"){ 
               c.height="250"; 
               c.width="400" 
               } 
               else { 
               c.height="150"; 
               c.width="300"; 
               } 
            } 
           drawVideo(ctx,x[i],c.width,c.height); 
          } 
         videos=document.getElementsByTagName("video"); 

         } 


    function drawVideo(ct,v,w,h) 
     { 

     if(v.paused){ 
        ct.drawImage(v,0,0,0,0); 
       } 
       else if(v.played){ 
        ct.drawImage(v,0,0,w,h); 
       } 


     setTimeout(drawVideo,100,ct,v,w,h); 
     } 

Answer 1

<script> 
window.onload=function(){ 
videos=document.getElementsByTagName("video"); 
videos.forEach(function(video){ 
video.onplay=function(){ 
videos.forEach(function(avideo){ 
avideo.stop(); 
}); 
video.play(); 
}; 
}); 
}; 
</script> 

これは、トラフすべてのビデオをループし、それがクリックされたときに他のすべてを停止した動画へのEventListenerを追加します。