安装插件 ：
注意需要引入 videojs-contrib-hls ，否则无法播放hls流文件
npm install vue-video-player@5.0.1 --save
npm install videojs-contrib-hls@5.15.0 --savemain.js 引入
require('vue-video-player/src/custom-theme.css')
require('video.js/dist/video-js.css')
import VideoPlayer from 'vue-video-player'
import hls from "videojs-contrib-hls";
Vue.use(VideoPlayer)
Vue.use(hls);代码内引入：
注意点：
1.type: 'application/x-mpegURL' ，否则无法播放流文件
2.aspectRatio: '16:9', 宽高比需要进行设置， 若没有进行设置，会出现黑边过高或者过宽的问题文章来源：https://www.toymoban.com/news/detail-731896.html
<video-player ref="videoPlayer" :options="playerOptions" class="video-player vjs-custom-skin"/>
playerOptions: {
autoplay: true,
hls:true,
aspectRatio: '16:9',
fluid: false,
sources: [
{
src: '',
// type: 'video/mu38'
type: 'application/x-mpegURL'
}
],
},
常用API方法：文章来源地址https://www.toymoban.com/news/detail-731896.html
// 加载视频
this.$refs.videoPlayer.player.load();
// 播放视频
this.$refs.videoPlayer.player.play();
// 暂停播放
this.$refs.videoPlayer.player.pause();
// 直接全屏 如果当前设备支持的话
this.$refs.videoPlayer.player.requestFullscreen();到了这里，关于vue2 使用 vue-video-player 播放m3u8 流地址视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
