Vue视屏直播技术(基于Video.js)

Vue 2.0 基于video.js 和 vue-video-player插件播放直播

vue-video-player是基于video.js基础上封装的vue插件(官方文档不全很乱,但是能基本使用),以下介绍播放rtmp协议的视屏资源各种直播协议介绍

  • 开始使用,安装

Github地址

npm地址

1
npm install vue-video-player --save

在项目中有三种使用方式(mount with global,mount with component,mount with ssr),根据自己的实际情况装载,我使用的是mount with component。

1
2
3
4
5
6
7
8
9
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash' // 本文使用的是rtmp直播源,应用到的是flash技术,所以需要引入此插件

export default {
components: {
videoPlayer
}
}

组件代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<videoPlayer v-if="videoLoad" class="vjs-custom-skin videoPlayer"
:playsinline="true"
ref="videoPlayer"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)">
</videoPlayer>

option参数:

1
2
3
4
5
6
7
8
9
10
11
12
playerOptions: {
width: '910', // 宽度控制
height: '360',
sources: [{
type: 'rtmp/flv', // 视屏资源类型
src: '' // 这边为空是为了动态加载,自己尝试可以直接写死地址,ep:'rtmp://192.168.1.1/live/resource'
}],
techOrder: ['flash'],
autoplay: true, // 自动播放
controls: true // 视屏控制按钮是否展现
// poster: "../../static/banner-4.png" // 封面图片
}

videoPlayer的常用method,可以通过获取videoPlayer对象来调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
computed: {
// 在computed中获取
player () {
return this.$refs.videoPlayer.player
}
},

methods: {
videoPlayerMethods () {
this.player.pause();//暂停 相当于停止效果
this.player.load();//重新加载src
this.player.play(); // 播放
this.player.dispose() // 杀死当前组件
}
}

videoPlayer的各种events见上面html部分代码。

  • 进阶使用
  1. 动态切换视屏源

    1
    2
    3
    4
    load () {
    this.playerOptions.sources[0].src = 'rtmp://192.168.1.1/live/resource1'
    this.player.load()
    },
  2. 出现问题 this.el_.vjs_getProperty(发现问题可能是在于当我这边样式让控件消失的时候flash 控件会再度加载导致出现问题),我是将videoPlayer组件放在emelentui 的dialog弹出层组件中的,当dialog组件关闭时会出现此情况。

    解决方案是通过强制重新加载dialog组件,刷新videoPlayer组件,并在dialog关闭时杀死videoPlayer组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     dialogClose () {  // dialog关闭事件
    this.videoLoad = false // dialog刷新videoPlayer
    this.player.dispose() // 杀死
    },

    init () { // dialog 初始化
    this.visible = true // dialog显示
    this.videoLoad = true // dialog刷新videoPlayer
    this.playerOptions.sources[0].src = this.broadcastUrl // 切换源
    this.$nextTick(() => {
    console.log(this.player)
    })
    },
  • 附加内容:

本文使用的服务端采用开源软件 Node Media Server.

Donate comment here