video.js 同一个页面加载多个视频

同一个页面加载多个视频，造成卡顿

引入  video.css     video.js      zh-CN.js

<style>

.videoDiv video{width: 100%;height: 100%;border:none;}

.video-js .vjs-big-play-button {opacity: 0;}

.vjs-poster {background-size: cover;}

</style>

1. 页面加载视频处加载为img，点击img时加载为video，点击当前视频播放play，其他视频暂停pause

2. video.js初始化加载时为video的id（video.js已经写死为video的id，不可用class/tag），所以视频必须有id（多个视频的id可以用该图片的id（1, 2, 3......）加固定（my-video）来表示）

3. video要加 width 和 height  

4. 多个视频时 video的属性不加 data-setup="{}" 

5. 当前播放，其他暂停 

$('.img').click(function (e) {

var _this = $(this);

var id = _this.attr("id");console.log(id);

var src = _this.attr("src");console.log(src);

_this.parent().html("").append('<video id="my-video'+id+'" class="video1 video-js" controls preload="auto" poster="'+src+'" width="680" height="410"><source src="video/al_vio'+id+'.mp4" type="video/mp4">您的浏览器不支持 video 标签</video>')

var myPlayer = videojs("my-video"+id);

var videoUrl = $(this).attr("videohref");

videojs("my-video"+id, {}, function() {

window.myPlayer = this;

$(".img_video .video1 source").attr("src", videoUrl);

myPlayer.src(videoUrl);

myPlayer.load(videoUrl);

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

}

};

})