<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>
整體思路，單擊某個視頻時，觸發函數，改變另外兩個視頻的播放狀態變成停止
效果圖如下，沒有控制面板的為播放中的視頻
點擊第一個圖時播放，點擊第三個視頻時，第一個視頻停止，第三個視頻播放，效果圖如下
