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。…...
RDF实战指南：从入门到精通
1. RDF基础入门：从概念到实战 第一次接触RDF时，我也被那些专业术语搞得一头雾水。直到把它想象成"资源界的快递单"，才突然开窍——就像快递单记录着"谁寄了什么给谁"，RDF用主语-谓语-宾语的三元组记录着"…...
Flink学习笔记：窗口
简介 langchain中提供的chain链组件，能够帮助我门快速的实现各个组件的流水线式的调用，和模型的问答 Chain链的组成 根据查阅的资料，langchain的chain链结构如下： $$Input \rightarrow Prompt \rightarrow Model \rightarrow Outp…...
用Python脚本让Crazyflie 2.X无人机动起来：手把手教你写第一个自主飞行程序
用Python脚本让Crazyflie 2.X无人机动起来：从零编写自主飞行程序 当第一次看到Crazyflie这个巴掌大的无人机在桌面上悬停时，我意识到微小型飞行器的编程控制远比想象中更有趣。与传统无人机不同，Crazyflie 2.X系列通过Python脚本就能实现毫米…...
3个步骤解决老旧系统Python支持难题：Windows 7及以上系统兼容性解决方案
3个步骤解决老旧系统Python支持难题：Windows 7及以上系统兼容性解决方案 【免费下载链接】PythonVista Python 3.9 installers that support Windows 7 SP1 and Windows Server 2008 R2 项目地址: https://gitcode.com/gh_mirrors/py/PythonVista 在企业办公…...
基于Mirage Flow的Java智能助手开发：SpringBoot集成与API封装
基于Mirage Flow的Java智能助手开发：SpringBoot集成与API封装 最近在做一个内部知识库项目，需要给系统加个智能问答的“大脑”。一开始想直接用现成的SaaS服务，但考虑到数据安全和定制化需求，还是决定自己动手，把大模…...
学术研究助手：OpenClaw+Qwen3.5-9B自动化文献综述
学术研究助手：OpenClawQwen3.5-9B自动化文献综述 1. 为什么需要自动化文献综述工具 作为经常需要阅读大量文献的科研人员，我深刻体会到手动整理文献的痛点。每次开题或写综述时，面对上百篇PDF论文，光是下载、分类、提取关键信息…...
终极foobox-cn配置指南：如何打造专业级音乐播放体验
终极foobox-cn配置指南：如何打造专业级音乐播放体验 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobox-cn作为foobar2000的DUI（自定义用户界面）配置方案&#…...
Java GeoTools实战：5分钟搞定热力图生成与TIFF文件导出（附完整代码）
Java GeoTools实战：5分钟搞定热力图生成与TIFF文件导出（附完整代码） 热力图作为一种直观的数据密度可视化工具，在GIS开发中扮演着重要角色。本文将带你快速掌握使用Java GeoTools库生成热力图并导出为TIFF文件的核心技巧ÿ…...
AI图像放大神器Upscayl：告别模糊时代的终极解决方案
AI图像放大神器Upscayl：告别模糊时代的终极解决方案 【免费下载链接】upscayl 🆙 Upscayl - Free and Open Source AI Image Upscaler for Linux, MacOS and Windows built with Linux-First philosophy. 项目地址: https://gitcode.com/GitHub_Trendi…...
SDXL-Turbo多场景落地教程：覆盖电商、游戏、教育、自媒体的6大用法
SDXL-Turbo多场景落地教程：覆盖电商、游戏、教育、自媒体的6大用法 1. 认识SDXL-Turbo：重新定义AI绘画体验 SDXL-Turbo不是传统的AI绘画工具，而是一个革命性的实时创作伙伴。想象一下，你打字的同时，画面就在眼前实时…...