vue2 使用 vue-video-player 播放m3u8 流地址视频

安装插件  ：

注意需要引入  videojs-contrib-hls ，否则无法播放hls流文件 

npm install vue-video-player@5.0.1 --save
npm install videojs-contrib-hls@5.15.0 --save

main.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',  宽高比需要进行设置， 若没有进行设置，会出现黑边过高或者过宽的问题

"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方法：

// 加载视频
this.$refs.videoPlayer.player.load();
// 播放视频
this.$refs.videoPlayer.player.play();
// 暂停播放
this.$refs.videoPlayer.player.pause();
// 直接全屏 如果当前设备支持的话
this.$refs.videoPlayer.player.requestFullscreen();