hls.js实现分片播放视频

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

一、demo——在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

2. 引入

import Hls from "hls.js";

3.使用

HTML部分：

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

js部分：data里初始化：

hls: null 

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

if (Hls.isSupported()) {// 实例化hls对象this.hls = new Hls();// 绑定视频地址this.hls.loadSource(this.audioUrl);// 绑定视频domthis.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里，可能是因为渲染的问题；

this.$nextTick(() => {if (Hls.isSupported()) {// 实例化hls对象this.hls = new Hls();// 绑定视频地址this.hls.loadSource(this.audioUrl);// 绑定视频domthis.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();});}
});

想要销毁他，这样写：

if (this.hls) {this.hls.destroy();this.hls = null;
}

6.场景分析

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

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

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

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