本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

庭审直播

.video-js {

/* position: inherit !important; */

}

.video{

width:50%;

padding:0px !important;

float:left;

}

.video-div{

float:left;

width:45%;

margin-left: 35px;

background:#3e3b3b00;

}

.dp-center{

background: #403f3f;

}

.video-list{

margin: 5px 10px 10px 10px;

padding: 5px 0px;

max-height: 330px;

list-style: none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

.video-list li {

float: left;

margin: 0;

padding-left:15px;

width: 175px;

height: 140px;

}

.text_align_center{

text-align:center;

color:#fff;

}

a{

text-decoration: none;

}

// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器

videojs.options.flash.swf = 'js/videojs/swf/video-js.swf';

var vm = new Vue({

el: '#app',

data: {

visible: false,

listItem:[

{title:"民间借贷纠纷1",isplay:false, type:"video/mp4", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},

{title:"民间借贷纠纷2", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},

{title:"民间借贷纠纷3", isplay:false, type:"video/mp4", url: "http://7xn4dt.com1.z0.glb.clouddn.com/migo_vedio_720.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",dateTime:"2018-09-10 16:30"},

{title:"民间借贷纠纷4", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/jsxzxyfy/20180910/55pXgd/55pXgd_m_1.jpg", dateTime:"2018-09-10 16:30"},

]

},

mounted:function(){

this.show();

},

filters: {

formatDate: function (value) {

let date = new Date(value);

let y = date.getFullYear();

let MM = date.getMonth() + 1;

MM = MM < 10 ? ('0' + MM) : MM;

let d = date.getDate();

d = d < 10 ? ('0' + d) : d;

let h = date.getHours();

h = h < 10 ? ('0' + h) : h;

let m = date.getMinutes();

m = m < 10 ? ('0' + m) : m;

let s = date.getSeconds();

s = s < 10 ? ('0' + s) : s;

return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;

}

},

methods: {

show: function () {

this.visible = true;

}

}

});

var list = vm.listItem;

var i = 0;

$(function(){

var source = document.getElementById("video-source");

var player = videojs("my-player", {

"width":"450px",

"height":"282px",

"poster":"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",

"autoplay":true,

"controls": true,

"sources": [{

src: list[i].url,

type: list[i].type

}],

}, function(){

this.on('loadeddata',function(){

})

this.on('ended',function(){

i++;

if(i >= list.length){

i = 0;

}

var videoObj = list[i];

this.src({type: videoObj.type, src: videoObj.url});

this.play();

})

});

});

相关推荐：