0
我一直在尋找解決方案,但到現在爲止我沒有解決方案如何控制許多影片在一個帆布
我有一個畫布上很多視頻......我需要暫停,如果另外一個播放視頻開始玩?????
感謝您的回答
這是我更多的解釋代碼...
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);
}
你可以把它寫在純JavaScript,請@JonasW¯¯ –
這是純JS @Tareq阿拉爾 –
@Tareq阿拉爾:看http://www.w3schools.com/tags/ref_av_dom.asp –