<style type="text/css">
.aa{ 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>
整体思路，单击某个视频时，触发函数，改变另外两个视频的播放状态变成停止
效果图如下，没有控制面板的为播放中的视频
点击第一个图时播放，点击第三个视频时，第一个视频停止，第三个视频播放，效果图如下
