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里

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

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

相关推荐
脑子缺根弦1 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
古月-一个C++方向的小白5 小时前
C++11之lambda表达式与包装器
开发语言·c++
沐知全栈开发6 小时前
Eclipse 生成 jar 包
开发语言
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
tanyongxi667 小时前
C++ AVL树实现详解:平衡二叉搜索树的原理与代码实现
开发语言·c++
阿葱(聪)8 小时前
java 在k8s中的部署流程
java·开发语言·docker·kubernetes
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
浮生带你学Java9 小时前
2025Java面试题及答案整理( 2025年 7 月最新版,持续更新)
java·开发语言·数据库·面试·职场和发展
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法