点击播放视频，其他视频暂停，当前视频播放！

html：

video标签外套一个div  防止视频层级问题影响布局，  x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true"，

该属性为了点击视频播放时，直接全屏问题。

img标签浮动遮挡住视频（美观）

<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: 

点击img时，隐藏图片，播放目标视频。

利用for循环关闭除当前点击视频外所有视频。

$('.videoItem').click(function () {

       $(this).find("#output").hide();

       $(this).find("#ovideo").show();

       $(this).find("#ovideo")[0].play();

//                点击播放当前其他视频暂停

                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();

}

};

})