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里

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/13711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

upload-labs 通关方法

目录 Less-1&#xff08;JS前端验证&#xff09; Less-2&#xff08;MIME验证&#xff09; Less-3&#xff08;黑名单&#xff0c;特殊过滤&#xff09; Less-4&#xff08;黑名单验证&#xff0c;.htaccess&#xff09; Less-5&#xff08;黑名单&#xff0c;点空格点绕过…

Qt | QCalendarWidget 类(日历)

01、QCalendarWidget 类 1、QCalendarWidget 类是 QWidget 的直接子类,该类用于日历,见下图 02、QCalendarWidget 属性 ①、dateEditAcceptDelay:int 访问函数:int dateEditAcceptDelay()const; void setDateEditAcceptDelay(int) 获取和设置日期编辑器的延迟时间(以毫秒…

给树莓派配置静态IP地址

第一步&#xff1a;查找默认网关 打开windowr&#xff1b;输入cmd&#xff0c; 输入 最后一行就是默认网关 ipconfig第二步&#xff1a;确定分配好给树莓派的IP地址 要注意&#xff1a;&#xff08;1&#xff09;静态ip地址与路由器网段保持一致&#xff08;2&#xff09;与…

将.webp图片格式转化为.jpg并放大到a4纸大小

引用-》管理NuGet程序包-》搜索GroupDocs.Conversion&#xff0c;安装上这个 核心代码 var dir1 System.IO.Path.GetDirectoryName(path1);var file1 System.IO.Path.GetFileNameWithoutExtension(path1);var full_path1 System.IO.Path.Combine(dir1, file1 ".jpg&qu…

xjoi题库一级一段题解(c语言版)

题目描述&#xff1a; 请你自行编写程序&#xff0c;输出“I LOVE OI.”&#xff08;不包括引号&#xff09;&#xff0c;请注意细节处&#xff0c;如大小写&#xff0c;句号等。 输入格式&#xff1a; 无输入 输出格式&#xff1a; I LOVE OI. 样例输入&#xff1a; 无输入 样…

Oracle23ai新特性SCHEMA级授权

Oracle23ai新特性SCHEMA级授权 1、需求简介 Oracle23ai之前的版本&#xff0c;想要实现一个用户可以访问另一个用户下的所有表&#xff0c;需要把该用户下所有的表的访问权限依次授权给该用户。这一方式存在的问题是&#xff0c;每当源端用户新创建一个表时&#xff0c;还需要…

[个人笔记] 记录CentOS7构建docker-ce的过程

容器技术 第一章 记录CentOS7构建docker-ce的过程 容器技术记录CentOS7构建docker-ce的过程CentOS 7.9基础配置centos配置网络连接, sshd, hostname, yum包更新sdb硬盘配置lvm部署docker之前, 优化centos的默认参数docker底层原理安装docker-ce社区版验证docker-ce是否正常运行…

压缩设备液压控制比例放大器

液压比例阀放大器是液压控制系统中的重要部件之一&#xff0c;用于控制输出油压方向流量和压力的精确控制。它由BEUEC比例放大器和比例电磁阀组成&#xff0c;通过调节比例放大器的增益和灵敏度参数&#xff0c;可以实现对液压系统输出油压方向流量和压力的精确控制。适用于各种…

动态IP与静态IP有什么区别?如何选择?

动态IP和静态IP都是指网络设备&#xff08;如计算机、服务器、路由器等&#xff09;在互联网上分配的IP地址的类型。 一、什么是动态IP&#xff0c;什么是静态IP&#xff1f; 1、什么是动态IP&#xff1f; 动态IP是指由Internet服务提供商&#xff08;ISP&#xff09;动态分配…

关于linux的防护,以及群集你要知道的有哪些8-使用Haproxy搭建web群集

1、Haproxy&#xff0c;LVS、Ningx三个调度器的区别&#xff1a; LVS性能最好&#xff0c;但是搭建相对复杂 Nginx的upstream模块支持群集功能&#xff0c;但是对群集节点健康检查功能不强&#xff0c;性能没有Haproxy好 2、HTTP的请求方式 GET方式 POST方式 3、返回状态码 正…

【Android】探索Android网络请求:OkHttp、Retrofit和Volley

在 Android 中&#xff0c;有许多流行的网络库可以用来进行网络请求&#xff0c;每个库都有自己的优点和适用场景。以下是几个常用的库及其简要介绍和示例代码&#xff1a; 1. OkHttp OkHttp 是一个高效的 HTTP 客户端&#xff0c;广泛用于 Android 应用中。 添加依赖 depe…

整理好了!2024年最常见 20 道 Redis面试题(四)

上一篇地址&#xff1a;整理好了&#xff01;2024年最常见 20 道 Redis面试题&#xff08;三&#xff09;-CSDN博客 七、Redis 单线程模型是如何工作的&#xff1f; Redis 是一个基于单线程模型的高性能键值存储数据库。尽管 Redis 操作大多数是单线程执行的&#xff0c;但它…

SpringBoot中使用AOP实现日志记录功能

目录 一、SpringBoot框架介绍 二、什么是 AOP 三、日志记录的必要性 四、SpringBoot中如何使用AOP实现日志记录功能 一、SpringBoot框架介绍 SpringBoot是一个开源的Java开发框架&#xff0c;旨在简化基于Spring框架的应用程序的开发。它提供了一套开箱即用的工具&#xf…

express.js--连接数据库,并且增删改查(四)

使用数据库需要在电脑安装mysql&#xff0c;然后使用navicat 我没有下载mysql,我使用的是小皮里面的数据库&#xff0c;需要破解版的navicat可以私信我 安装mysql npm i mysql 数据库的基本信息&#xff0c;我是直接写到配置文件里面的 config/index.js module.exports {…

【Android】联系人列表补充

真布局--叠起来垂直管 效果展示 部分代码&#xff08;在activity_main&#xff09;里面 <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"…

如何在Windows下使用Docker Desktop运行CentOS容器

引言&#xff1a; 在Windows操作系统中&#xff0c;我们可以使用Docker Desktop来轻松运行和管理各种Linux容器&#xff0c;包括CentOS。今天&#xff0c;我们就来详细讲解一下如何在Windows环境下使用Docker Desktop来运行CentOS容器。 一、安装Docker Desktop 首先&#x…

WPF中CommandParameter用法

1. 界面样式 2. XAML中代码部分 <ButtonGrid.Row"0"Grid.Column"1"Command"{Binding BtnClick_Number}"CommandParameter"7"Content"7"Style"{StaticResource BtnStyle_Num}" /> <ButtonGrid.Row"…

基于Redisson实现延时队列

1.在application.yaml中配置延时队列信息 #延时队列 redis-delay-queue:enabled: truename: delay_queue_demo 2.定义延时队列 /** * 延时队列 */ public class RedisDelayedQueue {private static Logger logger LoggerFactory.getLogger(RedisDelayedQueue.class);Resour…

STM32中SPI的使用

SPI&#xff08;Serial Peripheral Interface&#xff09;是一种高速、全双工、同步的通信协议&#xff0c;它广泛应用于微控制器与外设或其他微控制器之间的通信。SPI通过至少四条线路进行通信&#xff1a;一条串行时钟&#xff08;SCLK&#xff09;、一条主设备输出/从设备输…

【MySQL精通之路】MySQL的使用(2)-配置

目录 1.配置方式 2.配置优先级 3.配置教程 3.1.使用命令行上的配置 3.2.使用配置文件 3.2.1 配置文件处理顺序 3.2.1.1 Windows配置 3.2.1.2 Unix和类Unix系统配置 3.2.2 配置文件语法 3.2.3 指定配置文件 3.3.影响配置文件处理的命令行选项 3.4.配置选项修改器 3…