1、m3u8视频流相对于rtmp视频流更稳定,同时也不需要浏览器的flash支持。下面放代码以及配置,如有问题欢迎指正。
- 安装vue-video-player和videojs-contrib-hls插件
npm install vue-video-player --save
npm install videojs-contrib-hls --save
npm install videojs --save
安装完成后查看安装版本
- 在main.js中全局引用或在指定页面独立引用
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import videojs from 'video.js';
window.videojs = videojs;
// require('videojs-contrib-hls/dist/videojs-contrib-hls.js') 这种方式引用会遇到一些莫名其妙的问题,建议使用下面的引用方式
import hls from 'videojs-contrib-hls'
Vue.use(hls);
- 代码示例
HTML
<video-player class="vjs-custom-skin videoPlayer"
muted="muted"
:playsinline="true"
ref="videoplayer"
:options="playerOptions"
customEventName="changed">
</video-player>
JS
export default{
data(){
return{
playerOptions: {
width: "210", //宽
height: "134", //高
language: 'zh-CN',
techOrder: ['flash','html5'],
muted: true,
autoplay: true, //是否自动播放
controls: false, //是否显示控制面板
loop: false, //是否循环播放
aspectRatio: '16:9', //调整视频所在容器的比例
flash:{
hls: {
withCredentials: false
},
swf: 'static/video-js.swf' //视频屏幕小于400x300时设置静态资源文件
},
html5: {
hls: {
withCredentials: false
}
},
sources: [{
type:"application/x-mpegURL", //视频类型
src: ‘http://ivi.bupt.edu.cn/hls/hljhd.m3u8’ //视频播放地址
}],
poster: 'static/fire/bgpp.png', //加载背景图
notSupportedMessage: '此视频暂无法播放,请稍后再试',//视频出错提示信息
}
}
}
}
问题:
出现:VIDEOJS: ERROR: The “flash” tech is undefined. Skipped browser support check报错,是由于没有引用videojs-flash的原因造成的,只需npm install video-flash --save安装引用即可