在vue中使用videojs

因为后台提供给我的是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()
     },

完结。