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

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

使用npm安装

npm install vue-video-player --save

npm install videojs-contrib-hls

npm install videojs-contrib-hls.js

在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)

对应组件的版本号

"js-cookie": "^2.2.0",
"videojs-contrib-hls": "5.14.1",
"videojs-contrib-hls.js": "3.2.0",

以下为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/] 即可

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值