html：
video標(biāo)簽外套一個(gè)div? 防止視頻層級(jí)問題影響布局，? x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"，
該屬性為了點(diǎn)擊視頻播放時(shí)，直接全屏問題。
img標(biāo)簽浮動(dòng)遮擋住視頻（美觀）
<li class="videoItem">
<div style="position:relative">
<video id="ovideo" width="100%" height="100%" controls
? ? ? ? ? ? ? src="" poster="" preload="auto"
? ? ? ? ? ? ? x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"></video>
<img id="output" style="position:absolute;left:0;top:0;width:100%;height:100%;"
? ? ? ? ? ? src="" alt="">
</div>
</li>
<li class="videoItem">
<div style="position:relative">
<video id="ovideo" width="100%" height="100%" controls
? ? ? ? ? ? ? src="" poster="" preload="auto"
? ? ? ? ? ? ? x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"></video>
<img id="output" style="position:absolute;left:0;top:0;width:100%;height:100%;"
? ? ? ? ? ? src="" alt="">
</div>
</li>
js:?
點(diǎn)擊img時(shí)，隱藏圖片，播放目標(biāo)視頻。
利用for循環(huán)關(guān)閉除當(dāng)前點(diǎn)擊視頻外所有視頻。
$('.videoItem').click(function () {
? ? ? ?$(this).find("#output").hide();
? ? ? ?$(this).find("#ovideo").show();
? ? ? ?$(this).find("#ovideo")[0].play();
//? ? ? ? ? ? ? ? 點(diǎn)擊播放當(dāng)前其他視頻暫停
? ? ? ? ? ? ? ? var videos =document.getElementsByTagName('video');
for (var i =videos.length -1;i >=0;i--) {
(function(){
var p =i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j =videos.length -1;j >=0;j--) {
if (j!=index)videos[j].pause();
}
};
})
