javascript - 如何在一个 Canvas 上控制多个视频

Question

我一直在寻找解决方案，但到目前为止我还没有找到解决方案

我的 Canvas 上有很多视频...如果另一个视频开始播放，我需要暂停正在播放的视频??????

感谢您的回答
这是我的代码，用于更多解释...

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>

这会循环遍历所有视频，并向视频添加一个事件监听器，单击该事件监听器会停止所有其他视频。