使用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/] 即可