hls.js实现分片播放视频

前言:hls.js官网:hls.js - npm

一、demo------在HTML中使用

html 复制代码
<audio id="audio" controls></audio>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
      document.addEventListener("DOMContentLoaded", () => {
        const audio = document.getElementById("audio");
        const hls = new Hls();
        const audioSrc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";

        if (Hls.isSupported()) {
          hls.loadSource(audioSrc);
          hls.attachMedia(audio);
          hls.on(Hls.Events.MANIFEST_PARSED, function () {
            audio.play();
          });
        } else if (audio.canPlayType("application/vnd.apple.mpegurl")) {
          audio.src = audioSrc;
          audio.addEventListener("canplay", function () {
            audio.play();
          });
        } else {
          console.error("HLS is not supported in this browser");
        }
      });
</script>

二、在项目中使用

1.下载

npm install hls.js --save

或者

yarn add hls.js

  1. 引入

import Hls from "hls.js";

3.使用

HTML部分:

html 复制代码
<!-- 音频播放 -->
<audio ref="audio" controls :src="audioUrl" style="width: 100%"></audio>

js部分:data里初始化:

hls: null

js部分(核心代码)写在对应场景的methods里(下面的都是固定的,不用更改,除了把地址换一下,audioUrl换成你自己的地址,还有可以换掉ref="audio",换成自己的命名后,记得把this.$refs.自定义命名更改):

javascript 复制代码
if (Hls.isSupported()) {
    // 实例化hls对象
    this.hls = new Hls();
    // 绑定视频地址
    this.hls.loadSource(this.audioUrl);
    // 绑定视频dom
    this.hls.attachMedia(this.$refs.audio);
    // 绑定事件
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
    this.$refs.audio.play();
     });
 } else if (this.$refs.audio.canPlayType("application/vnd.apple.mpegurl")) {
    this.$refs.audio.src = this.audioUrl;
    this.$refs.audio.addEventListener("canplay", () => {
    this.$refs.audio.play();
 });
}

4.报错分析

如果他出现这样的错误:Uncaught (in promise) DOMException: Failed to load because no supported source was found

导致他不出现数据给函数放到 this.$nextTick里,可能是因为渲染的问题;

javascript 复制代码
this.$nextTick(() => {
    if (Hls.isSupported()) {
    // 实例化hls对象
    this.hls = new Hls();
    // 绑定视频地址
    this.hls.loadSource(this.audioUrl);
    // 绑定视频dom
    this.hls.attachMedia(this.$refs.audio);
    // 绑定事件
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
    this.$refs.audio.play();
    this.audioLoading = false;
  });
} else if (
    this.$refs.audio.canPlayType("application/vnd.apple.mpegurl")) {
    this.$refs.audio.src = this.audioUrl;
    this.$refs.audio.addEventListener("canplay", () => {
    this.$refs.audio.play();
    });
 }
});

想要销毁他,这样写:

javascript 复制代码
if (this.hls) {
  this.hls.destroy();
  this.hls = null;
}

6.场景分析

6.1 如果你是放到弹窗里,那销毁的这部分代码就写在关闭弹窗后。

6.2 如果你是封装个组件,那你销毁的这部分代码就写在beforeDestroy里,核心代码写在mounted里

祝你使用成功,顺便天天开心,吃饱喝足,快乐不愁,超级超级宇宙最有钱!

有问题可以留言,不过我不一定会回,逗你玩,看见就会回,不过我一般看不见,因为不常登陆~

相关推荐
沐知全栈开发2 小时前
HTML DOM 访问
开发语言
顾道长生'2 小时前
(Arxiv-2025)通过动态 token 剔除实现无需训练的高效视频生成
计算机视觉·音视频·视频生成
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person4 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6664 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
码农不惑5 小时前
2025.06.27-14.44 C语言开发:Onvif(二)
c语言·开发语言
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能