视频列表html页面,vue + video.js实现视频列表页（多个视频）

vue + video.js实现视频列表页

vue项目中做一个视频列表页，本来用原生video标签来实现，由于考虑到手机浏览器兼容问题，找了很多插件，最后决定用video.js这个插件来实现。Video.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器

安装video.js

$ npm install video.js

在main.js中引用

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

页面使用

export default {

name: 'HelloWorld',

data(){

return {

list:[

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:0,

pic:"",

},

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:1,

pic:"",

},

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:2,

pic:"",

}

]

}

},

mounted() {

this.initVideo();

},

methods: {

initVideo() {

//初始化视频方法 循环列表获取每个视频的id

this.list.map((item,i)=>{

let myPlayer = this.$video('myVideo'+item.id, {

//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。

controls: true,

//自动播放属性,muted:静音播放

autoplay: "muted",

//建议浏览器是否应在加载元素后立即开始下载视频数据。

preload: "auto",

//设置视频播放器的显示宽度(以像素为单位)

width: "800px",

//设置视频播放器的显示高度(以像素为单位)

height: "400px",

//封面图

poster:item.pic

});

})

}

}

}

效果图

以上就是实现的步骤和代码 有什么问题欢迎大家评论和指出。