使用vue-video-play直播hls视频流

这段时间需要写视频流的直播，期间使用过tlc插件（没成功），在查阅了相关资料后找到了vue-video-play插件

以下为package.json中使用的依赖

"videojs-contrib-hls": "5.14.1",

"videojs-contrib-hls.js": "3.2.0",

"vue-video-player": "4.0.6"

在main.js中的调用

import Vue from 'vue'

import VueVideoPlayer from 'vue-video-player'

import 'video.js/dist/video-js.css'

import 'vue-video-player/src/custom-theme.css'

import 'videojs-contrib-hls/dist/videojs-contrib-hls'

 

Vue.use(VueVideoPlayer)

以下为html代码（主要使用ref 以及options的方法）

<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" @ended="onPlayended($event)">
</video-player>

在data中设置

data () {
    return{
        playerOptions:{
            overNative: true,
            autoplay: true,    // 用于设置自动播放
            controls: true,
            techOrder: ['html5'],
            sourceOrder: true,
            html5:{ hls: { withCredentials: false } },
            sources: [
              {
                withCredentials: false,
                type: 'application/x-mpegURL',
                src: './static/video/test.m3u8'    // 设置视频地址（可以不设置，但是会在console中报错）
              }
            ],
            notSupportedMessage: '此视频暂无法播放，请稍后再试'
        }
    }
}

在生产模式下碰到   t is not defined  的报错

在build/webpack.base.conf.js文件中的module下添加一条  noParse: [/videojs-contrib-hls/] 即可