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

最新推荐文章于 2025-05-16 15:07:51 发布

原创最新推荐文章于 2025-05-16 15:07:51 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #音视频 #前端

本文介绍了如何在Vue项目中安装并配置vue-video-player和videojs-contrib-hls插件，以支持HLS流文件播放，包括设置aspectRatio和使用常见API方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件：

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

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

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