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。…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON，依赖模型推理阶段输出进行差分测试，但在训练阶段是不可行的，因为训练阶段直到最后才有固定输出，中间过程是不断变化的。API 库覆盖低，因为各个 API 都是在各种具体场景下使用。…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...