多个视频时，利用函数实现播放一个，其他自动暂停 

<style type="text/css">
.aa{ width:300px;                                      //给三个div定义一个样式
	height:250px;
	position:relative;
	float:left;
	margin-left:20px;
     	
}
</style>
</head>
<body>

<div class="aa" onclick="ff1()">
<video  id="v1" src="12312313326602661112.mp4" width="300" height="250" controls="controls" "></video>       //controls是视频播放器的控制面板
</div>
<div class="aa"  onclick="ff2()">
<video  id="v2"src="131_1.mp4" width="300" height="250" controls="controls"></video>
</div>
<div class="aa"  onclick="ff3()">
<video  id="v3" src="file:///E|/123456/audio1/1234.mp4" width="300" height="250" controls="controls"></video>
</div>

</body>
</html>
<script language="javascript">
function ff1()                 
{
	document.getElementById("v1").play();           //通过id找到v1，单击时变成播放
	document.getElementById("v2").pause();           //通过id找到v2，单击时变暂停
	document.getElementById("v3").pause();           //通过id找到v3，单击时变成暂停
}
function ff2()
{
	document.getElementById("v1").pause();
	document.getElementById("v2").play();
	document.getElementById("v3").pause();
}
function ff3()
{
	document.getElementById("v1").pause();
	document.getElementById("v2").pause();
	document.getElementById("v3").play();
}
</script>

　　整体思路，单击某个视频时，触发函数，改变另外两个视频的播放状态变成停止

效果图如下，没有控制面板的为播放中的视频

点击第一个图时播放，点击第三个视频时，第一个视频停止，第三个视频播放，效果图如下

posted @ 2016-12-05 19:29  赵天成123  阅读(2570)  评论(0)  编辑  收藏  举报