vue 播放m3u8视频

@@十二

已于 2022-05-05 00:14:11 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端

于 2022-04-13 14:54:53 首次发布

本文链接：https://blog.csdn.net/qq_40796623/article/details/124148143

笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过video.js和videojs-contrib-hls插件来实现m3u8视频的播放。首先，需要通过npm安装video.js和videojs-contrib-hls依赖包。接着，在Vue组件中导入videojs库和hls插件，实现m3u8视频格式的支持。

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

下载相关包
npm install video.js --save
npm install videojs-contrib-hls --save

页面引入
import videojs from “video.js”;
import “videojs-contrib-hls”;

 <video
      id="myVideo"
      style="height:100%;width:100%"
      preload="none"
      class="video-js vjs-default-skin"
      disablePicturePicture
    ></video>

 mounted() {
    this.initVideo(this.m3u8.ldm3u8);
    this.$once("hook:beforeDestroy", () => {
      this.singlePlayer.dispose();
    });
  },
  beforeDestroy() {
    this.singlePlayer.pause(); //暂停
  },

 initVideo(res) {
      this.singlePlayer = this.$video("myVideo", {
        autoplay: true, //自动播放
        controls: true, //控件显示
        width: "740px", //视频框宽度
        height: "200px", //视频框高度
      });
      this.singlePlayer.src({
        src: res,
        type: "application/x-mpegURL",
      });
      }