ZHX Video Component

描述

该组件可以实现在框架中嵌入视频流,直播流或者音频流等多媒体内容.支持包括MP4文件播放,HLS直播,RTMP直播等多种协议. 组件使用了开源的VideoJS视频播放模块作为基础组件. 在此基础上实现了Vue框架的扩展.可以全局或在模块中单独引入.

起步

全局引入

// main.js
import VueVideoPlayer from '@/components/videoPlayer'

局部引入

// Foo Components
import { videoPlayer } from '@/components/videoPlayer'
// rtmp 直播流需要使用flash
require('videojs-flash')
// HLS 直播流需要使用videojs-contrib-hls plugin
require('videojs-contrib-hls')

export default {
    ...
    components: { videoPlayer }
    ...
}

模板定义

<video-player :options="videoOpts" />

Video Player 配置项

这里的事件除@ready事件外,都映射自VideoJS组件中的事件

常用配置(更多配置请移步VideoJS官网查看)

事件

常见MP4 / HLS / RTMP的简单配置demo

通用的模板配置

// Foo Template
<video-player
    :options="playerOpts"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @ready="playerReady($event)"
  />

播放mp4

// Foo Component
export default {
    ...
    data () {
        return {
            playerOpts: {
                autoplay: false,
                muted: true,
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [{
                  type: 'video/mp4',
                  src: '//vjs.zencdn.net/v/oceans.mp4'
                }],
                poster: '//vjs.zencdn.net/v/oceans.png'
            }
        }
    },
    ...
}

播放HLS

// Foo Component
// HLS 直播流需要使用videojs-contrib-hls plugin
require('videojs-contrib-hls')

export default {
    ...
    data () {
        return {
            playerOpts: {
                muted: true,
                sources: [{
                  withCredentials: false,
                  type: 'application/x-mpegURL',
                  src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
                }],
                poster: '//vjs.zencdn.net/v/oceans.png'
            }
        }
    },
    ...
}

播放RTMP

[info] 并不建议使用RTMP

我们并不建议使用RTMP流进行播放, 在未来的技术演进上,flash播放必然会被淘汰掉.取而代之的是HLS等支持HTML5格式的技术.因此,在条件允许的情况下, 尽可能使用其他解决方案.

// Foo Component
// rtmp直播流需要使用flash
require('videojs-flash')

export default {
    ...
    data () {
        return {
            playerOpts: {
                autoplay: false,
                muted: true,
                techOrder: ['flash'], // rtmp 必须指定techOrder 为 flash
                sources: [{
                  type: 'rtmp/mp4',
                  src: 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
                }],
                poster: '//vjs.zencdn.net/v/oceans.png'
            }
        }
    },
    ...
}