安装插件
插件安装
- npm install video.js --save
- cnpm install --save videojs-flash
- cnpm install --save videojs-swf
- cnpm install --save vue-video-player // 使用video.js播放不安装这个
插件对应版本
- “video.js”: “^7.10.2”,
- “videojs-flash”: “^2.2.1”,
- “videojs-swf”: “^5.4.2”,
- “vue-video-player”: “^5.0.2” // 不需要安装
注意事项
swf报错loader加载器问题
/*
* 需要配置loder加载器,否则会报错不识别swf格式文件,提示需要配置合适的加载器loader,在项目的vue.config.js中作如下配置:
*/
module.exports = {
chainWebpack: config => {
config.module
.rule('swf')
.test(/\.swf$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000
})
}
}
报错问题
- 安装vue-video-player插件一定要用npm安装,不可使用cnpm安装,否则报如下错误,或降低版本问题处理
The flash tech is undefined Skipped browser support check for that tech
代码
<template>
<div>
<video class="video_js" id="video-js" :width="videoWidth" :height="videoHeight">
<source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4">
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
// import SWF_URL from './assets/video-js.swf'
import SWF_URL from "videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL // 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
export default {
props: {
videoHeight: {
type: Number,
default: () => 500
},
videoWidth: {
type: Number,
default: () => 700
}
},
data () {
return {
videoPlay: '', // 视频监控的实例
options: {
live: true,
// poster: require('@/assets/logo.png'), // 未播放时的封面
poster: 'https://photo.mac69.com/180205/18020526/a9yPQozt0g.jpg',
autoplay: true, // 是否自动播放
muted: false, // 是否静音
fluid: false, // 宽高自适应
loop: false, // 是否循环播放
preload: 'auto', // 预加载
techOrder: ["flash", "html5"], // 定义Video.js技术首选的顺序。这意味着Html5首选技术
language: "zh-CN", // 初始化语言
// aspectRatio: '4:3', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
// fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
width: this.videoWidth + 'px',
height: this.videoHeight + 'px',
controls: false, // 是否显示控制栏
controlBar: {
timeDivider: false, // 时间分割线
durationDisplay: false, // 总时间
remainingTimeDisplay: false,
currentTimeDisplay: false, // 当前时间
volumeControl: false, // 声音控制键
progressControl: false, // 进度条
playToggle: false, // 暂停和播放键
customControlSpacer: false, // 未知,
fullscreenToggle: true, // 全屏
},
}
}
},
mounted () {
// 初始化
this.videoPlay = videojs('video-js', this.options, () => {
// 监听播放
// this.videoPlay.one('playing', () => {
// console.log('监听播放');
// })
// 准备开始播放
// this.videoPlay.one('play', () => {
// console.log('准备开始播放');
// })
// 暂停播放
// this.videoPlay.on('pause', () => {
// console.log('暂停播放');
// })
// 结束播放
// this.videoPlay.on('ended', () => {
// console.log('结束播放');
// })
// events 绑定事件用on 移除事件用off
// this.videoPlay.on('loadstart', () => {
// console.log('开始加载');
// })
// this.videoPlay.on('loadedmetadata', () => {
// console.log('视频源数据加载完成');
// })
// this.videoPlay.on('loadeddata', () => {
// console.log('渲染播放画面');
// })
// this.videoPlay.on('progress', () => {
// console.log('加载过程');
// })
});
},
beforeDestroy () {
// 切换页面时需要停止播放处理报错问题
this.videoPlay.dispose();
},
}
</script>
<style scoped lang="less">
.video_js {
box-shadow: 0 0 1px 1px #000;
padding: 20px;
position: relative;
/deep/ .vjs-text-track-display {
border: 1px solid blue;
width: 100%;
height: 100%;
}
}
</style>