1.安装
npm install video.js
2.引入全局样式
// main.js 中加入
import 'video.js/dist/video-js.css'
3.使用
<template>
<div>
<video ref="cjVideo" class="video-js vjs-default-skin">
<source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
</video>
</div>
</template>
// 导入video.js
import videojs from 'video.js'
// 中文语言设置
// import 'video.js/dist/lang/zh-CN'
// 由于 导入语言包需要全局的video.js 所以需要webpack暴露videojs 变量
// 自定义语言包
// 将 video.js/dist/lang/zh-CN.js 文件下的代码复制到项目中即可
// 类似:
videojs.addLanguage('zh-CN', {
'Play': '播放',
'Pause': '暂停',
})
export default {
data() {
return {
video: null,
videoSeting: {
language: 'zh-CN',
autoplay: false, // true/false 播放器准备好之后,是否自动播放 【默认false】
controls: true, // /false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height: 500, // 视频容器的高度,字符串或数字 单位像素 比如: height:300 or height:‘300px‘
width: 800, // 视频容器的宽度, 字符串或数字 单位像素
// loop: false, // /false 视频播放结束后,是否循环播放
// muted: false, // /false 是否静音
poster: '', // 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL
// preload: 'auto', // 预加载 ‘auto‘ 自动 ’metadata‘ 元数据信息 ,比如视频长度,尺寸等 ‘none‘ 不预加载任何数据,直到用户开始播放才开始下载
bigPlayButton: false
}
}
},
mounted() {
this.getVideo()
},
beforeDestroy() {
if (this.video) {
this.video.dispose()
}
},
methods: {
getVideo() {
this.video = videojs(this.$refs.cjVideo, this.videoSeting, function onPlayerReady() {
this.play()
// 可以在此处定义一些事件监听 如播放完成等
this.on('ended', function() {
console.log('播放结束了!');
});
console.log('播放器已经准备好了!')
})
},
}
video.js 官方文档
https://docs.videojs.com/