因为后台提供给我的是rtmp流,所以需要用到flash播放器进行推流,videojs6xx以上的版本已经移除了flash,所以需要我们手动安装flash播放器
npm i videojs-flash //安装
import "videojs-flash" //在我们要使用的文件中导入就行
再data数据模型中定义videojs实例对象
data() {
return {
videoPath: "",
loading: false,
player: null
};
},
this.player= videojs(this.$refs.myvideo, options,function () {})
第一个参数是video标签的DOM节点,options是一个对象里面是对播放器的一系列配置,第三个参数是播放器播放时的一系列事件。options的配置代码如下
let options = {
sources: [
{
src: source,
type: "rtmp/flv"
}
],
techorder: ["flash"],
flash: {
// swf文件引用地址
swf: "./static/video-js.swf"
},
// 控制条
controls: true,
controlBar: {
durationDisplay: false,
//竖直音量控制
volumePanel: {
inline: false,
}
},
// 设置中文需要导入中文语言包
language: 'zh-CN',
notSupportedMessage: '此视频暂时无法播放'
}
function里面的this指向的是this.player,如果需要使用外部变量,请另外声明一个this。代码如下
let _this= this
this.player= videojs(this.$refs.myvideo, options,function () {
this.on("ended",function () {
console.log('播放结束了')
})
this.on('progress',function (e) {
_this.$message.success("开始播放")
_this.loading= false
})
this.on("error",function () {
this.$message.warning("异常,无法播放")
})
})
如果需要动态的更换rtmp视频源,需要重新调用src属性。代码如下
// 动态更换视频源
this.player.src(source)
// 重新调用
this.player.load(source)
this.player.play()
如果不需要播放器中间的按钮和进度条,可以手动隐藏。
.vjs-big-play-button {
visibility:hidden; // 隐藏按钮
}
.vjs-progress-control {
visibility:hidden; // 隐藏进度条
}
最后再销毁videsjs实例
destroyed() {
this.player.dispose()
},
完结。