这段时间需要写视频流的直播,期间使用过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/] 即可