Gin框架html/vue前端使用hls.js播放/点播m3u8(hls)格式视频
说明
在web应用开发时遇到在线播放m3u8格式视频，由于m3u8是多分片视频，原生video标签无法直接播放，所以需要js对m3u8处理才能播放，网上有很多插件，这里我选择最近简单方法hls.js播放，引入一个js文件即可。
实现代码
- Gin后端
后端用c.File返回数据，c是gin请求信息
//fileName 是文件名称，如：demo.m3u8
c.Header("Content-Type", "application/octet-stream")
c.Header("Content-Disposition", "attachment; filename="+fname)
c.Header("Content-Disposition", "inline;filename="+fname)
c.Header("Content-Transfer-Encoding", "binary")
//返回视频内容
c.File(filepath.Join(path, fileName))- 前端
这里用h5给大家演示，使用vue的开发发展自己根据请求引入。
html代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>演示：web点播m3u8(hls)格式视频</title>
<style>
</style>
</head>
<body>
<div class="container"><div class="container" style="width: 96%; margin: 30px auto"><video id="video" controls loop="false" width="100%"></video></div>
</div>
<script src="hls.js"></script><script>
var video = document.getElementById('video');if(Hls.isSupported()) {var hls = new Hls();hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();});}
</script>
</body>
</html>hls.js代码：
hls.js内容太多无法插入，绑定在本文资源中。
相关文章：
格式视频)
Gin框架html/vue前端使用hls.js播放/点播m3u8(hls)格式视频
说明 在web应用开发时遇到在线播放m3u8格式视频，由于m3u8是多分片视频，原生video标签无法直接播放，所以需要js对m3u8处理才能播放，网上有很多插件，这里我选择最近简单方法hls.js播放，引入一个js文件即可。…...
HarmonyOS 私仓搭建
1. HarmonyOS 私仓搭建 私仓搭建文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-ohpm-repo-quickstart-V5 发布共享包[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-har-publish-0000001597973129-V5]…...
Mybatis学习笔记（二）
八、多表联合查询 (一) 多表联合查询概述 在开发过程中单表查询不能满足项目需求分析功能，对于复杂业务来讲，关联的表有几张，甚至几十张并且表与表之间的关系相当复杂。为了能够实业复杂功能业务，就必须进行多表查询，…...
Google“Big Sleep“人工智能项目发现真实软件漏洞
据Google研究人员称，该公司的一个人工智能项目足够聪明，能够自行发现现实世界中的软件漏洞；Google的人工智能项目最近在开源数据库引擎 SQLite 中发现了一个之前未知的可利用漏洞。 该公司随后在正式软件发布之前报告了这一漏洞，这…...
npm入门教程5：package.json
一、package.json 文件的作用 依赖管理：列出项目所依赖的包（库）及其版本，便于其他开发者或自动化工具快速安装和更新这些依赖。元数据描述：提供项目的描述、作者、许可证等元信息，有助于项目的管理和维护。…...
docker-高级（待补图）
文章目录 数据卷(Volume)介绍查看方法删除方法绑定方法匿名绑定具名绑定Bind Mount 数据卷管理 网络bridge(桥接模式 默认)HOST(主机模式)Nonecontainer(指定一个容器进行关联网络共享)自定义(推荐)docker network 命令创建网络docker network create 实例展示-自定义实例展示-…...
Qt 文件目录操作
Qt 文件目录操作 QDir 类提供访问系统目录结构 QDir 类提供对目录结构及其内容的访问。QDir 用于操作路径名、访问有关路径和文件的信息以及操作底层文件系统。它还可以用于访问 Qt 的资源系统。 Qt 使用“/”作为通用目录分隔符，与“/”在 URL 中用作路径分隔符…...
Pandas 数据清洗
1.数据清洗定义 数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况，如果要使数据分析更加准确，就需要对这些没有用的数据进行处理。 2.清洗空值 DataFrame.dropna(axis0, howany, threshN…...
IO学习笔记
当前需求，希望进行游戏可以保存游戏进度，可以将游戏的进度保存到一个文本文件，每一次打完游戏更新文本内容，下一次打游戏读取游戏进度，这里就涉及到两个知识IO流和File的知识。 File类 概述 java.io.File 类是文件…...
汇编练习-1
1、要求 练习要求引自《汇编语言-第4版》实验10.3(P209页) -编程，将data段中的数据，以10进制的形式显示出来 data segment dw 123,12666,1,8,3,38 data ends 2、实现代码(可惜没找到csdn对8086汇编显示方式) assume cs:codedata segmentdw 16 dup(0) ;除…...
初识二叉树（ 二）
初识二叉树 二 实现链式结构二叉树前中后序遍历遍历规则代码实现 结点个数以及高度等层序遍历判断是否为完全二叉树 实现链式结构二叉树 ⽤链表来表示⼀棵二叉树，即用链来指示元素的逻辑关系。通常的方法是链表中每个结点由三个域组成，数据域和左右指针…...
AcWing1077-cnblog
问题背景 给定一个树形结构的图，每个节点代表一个地点，每个节点有一个守卫的代价。我们希望以最低的代价在树的节点上放置守卫，使得整棵树的所有节点都被监控。可以通过三种方式覆盖一个节点： 由父节点监控。由子节点监控。自己…...
)
五、SpringBoot3实战(1)
一、SpringBoot3介绍 1.1 SpringBoot3简介 SpringBoot版本：3.0.5 https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html#getting-started.introducing-spring-boot 到目前为止，你已经学习了多种配置Spring程序的方式…...
练习LabVIEW第三十三题
学习目标： 刚学了LabVIEW，在网上找了些题，练习一下LabVIEW，有不对不好不足的地方欢迎指正！ 第三十三题： 用labview编写一个判断素数的程序 开始编写： LabVIEW判断素数，首先要搞…...
如何在服务器端对PDF和图像进行OCR处理
介绍 今天我想和大家分享一个我在研究技术资料时发现的很好玩的东西——Tesseract。这不仅仅是一个普通的库，而是一个用C语言编写的OCR神器，能够识别一大堆不同国家的语言。我一直在寻找能够处理各种文档的工具，而Tesseract就像是给了我一把…...
Windows 下实验视频降噪算法 MeshFlow 详细教程
MeshFlow视频降噪算法 Meshflow 视频降噪算法来自于 2017 年电子科技大学一篇高质量论文。 该论文提出了一个新的运动模型MeshFlow，它是一个空间平滑的稀疏运动场 (spatially smooth sparse motion field)，其运动矢量 (motion vectors) 仅在网格顶点 (m…...
Python入门：如何正确的控制Python异步并发量（制并发量的关键技巧与易错点解析）
文章目录 📖 介绍 📖🏡 演示环境 🏡📒 异步并发量控制 📒📝 Python异步并发简介📝 为什么要限制并发量🎈 资源管理🎈 服务稳定性📝 新手容易犯的错误🎈 忽略并发量限制🎈 错误设置并发量📝 设置并发量要注意的事情🎈 了解任务类型🎈 考虑系统资…...
qt QCheckBox详解
QCheckBox 是 Qt 框架中的一个控件，用于创建复选框，允许用户进行选择和取消选择。它通常用于表单、设置界面和任何需要用户选择的场景。 QCheckBox继承自QAbstractButton类，因此继承了按钮的特性。它表示一个复选框，用户可以通过…...
PAT甲级-1041 Be Unique
题目 题目大意 从一组数字中选出第一个唯一出现的数，输出该数。如果没有，则输出None。 思路 哈希的思想，将数值作为索引，对应该数值出现的次数，然后遍历数组即可。 注意第一个数字是指数字的个数，不是数…...
【jvm】如何设置堆内存大小
目录 1. 使用命令行参数设置2. idea中设置3. 注意事项 1. 使用命令行参数设置 1.在Java命令后添加-Xms和-Xmx参数。2.-Xms参数用于设置JVM的初始堆内存大小，等价于-XX:InitialHeapSize。3.-Xmx参数用于设置JVM的最大堆内存大小，等价于-XX:MaxHeapSize。…...
kernel源码分析 do_msgsnd read_msg
笔者分析的源码是v 5.11.22 链接：msg.c - ipc/msg.c - Linux source code v5.11.22 - Bootlin do_msgsnd static long do_msgsnd(int msqid, long mtype, void __user *mtext,size_t msgsz, int msgflg) {struct msg_queue *msq;struct msg_msg *msg;int err;str…...
掌握 CTE 技巧，实现连续日期和月份的 SQL 报表统计
在 SQL 查询中，报表统计往往涉及到特定时间段内的数据汇总，如每日、每月的销售数据等。然而，面对缺少数据的日期或月份，传统 SQL 查询可能会直接跳过这些日期，使得输出的报表在视觉上并不连续。本文将展示如何利用 CTE…...
【表格解决问题】EXCEL行数过多，WPS如何按逐行分别打印多个纸张中
1 问题描述 如图：我的表格行数太多了。打印在一张纸上有点不太好看 2 解决方式 Step01：先选中你需要打印的部分，找到【页面】->【打印区域】->【设置打印区域】 Step02：先选中一行，找到【插入分页符】 Step0…...
Maven讲解从基础到高级配置与实践
一、基础认知 1.1 Maven 的主要作用 Maven 主要是用来管理 Java 项目构建流程的工具，包括以下几个方面： 依赖管理：通过 POM.xml 文件管理项目的外部依赖库，不同版本的依赖包可以通过 Maven 中央仓库自动下载，减少了…...
Vue3组件式父子传值
下面是使用 <script setup> 语法的 Vue 3 组件之间传值的示例。 示例 1：使用 Props 和 Emits 父组件 <template><div><h1>父组件</h1><ChildComponent :message="parentMessage" @reply="handleReply" /><p>…...
网页自动化测试和爬虫：Selenium库入门与进阶
网页自动化测试和爬虫：Selenium库入门与进阶 在现代Web开发和数据分析中，自动化测试和数据采集成为了开发流程中的重要部分。Python 的 Selenium 库是一种强大的工具，不仅用于网页自动化测试，也在网页爬虫中得到了广泛的应用。本…...
Cells 单元
Goto Data Grid 数据网格 Cells 单元 Content Alignment 内容对齐 显示数值的数据网格单元格会将其内容向右对齐。显示其他类型数据的单元格将其内容向左排列。若要更改单元格内容对齐方式，请处理 ColumnView.RowCellDefaultAlignment 事件。 Selection Modes 选…...
2024/11/2 安卓创建首页界面
Gradle 8.7 bin是指Gradle 8.7版本的二进制包，通常以.zip或.tar.gz格式提供。这个二进制包包含了运行Gradle所需的所有文件，用户可以直接下载并解压使用，无需从源代码编译。 首先了解最常用的布局 线性布局（从上到下&#x…...
SpringSession源码分析
默认对常规Session的理解和使用，如何使用Set-Cookie。 Maven库 常见的spring-session-data-redis依赖spring-session-core <dependency><groupId>org.springframework.session</groupId><artifactId>spring-session-core</artifactId&…...
IIC
IIC 目录 IIC BH1750型号的光照传感器 IIC通信协议 iic物理层 IIC软件层协议 -- 那么一主多从，怎么选中与指定的从机通信呢？ 从机设备地址 -- 从手册中查看 IIC 写操作 IIC 读操作 硬件IIC和模拟 IIC 使用 模拟 IIC 使用 ！&…...