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内容太多无法插入,绑定在本文资源中。

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

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

相关文章

【云原生】云原生后端:监控与观察性

目录 引言一、监控的概念1.1 指标监控1.2 事件监控1.3 告警管理 二、观察性的定义三、实现监控与观察性的方法3.1 指标收集与监控3.2 日志管理3.3 性能分析 四、监控与观察性的最佳实践4.1 监控工具选择4.2 定期回顾与优化 结论参考资料 引言 在现代云原生架构中&#xff0c;监…

【感知模块】深度神经网络实现运动预测

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言运动预测(Motion Prediction)感知中的运动预测(深度神经网络)前言 认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长! …

数据库之多表查询

一.子查询 在SQL语句中嵌套select语句&#xff0c;称为嵌套查询&#xff0c;又称子查询 # 语法select * from 表1 where 字段1(select 字段1 from 表2); 子查询是一个嵌套在select、insert、update 或delete 语句或其他子查询中查询 注意&#xff1a;将子查询和比较运算符联…

业务流程顺畅度为何受制于数据失真

在当今数字化驱动的商业环境中&#xff0c;企业的业务流程高度依赖于数据的准确性和完整性。然而&#xff0c;数据失真问题却如同隐匿在流程中的“暗礁”&#xff0c;频繁地给企业的业务流程顺畅度带来严重挑战&#xff0c;进而影响企业的整体运营效率和竞争力。 数据失真的表…

使用 Pandas 进行时间序列分析的 10个关键点

使用Pandas进行时间序列分析的10个关键点&#xff08;由于篇幅限制&#xff0c;这里调整为10个&#xff0c;但实际操作中可能涉及更多细节&#xff09;如下&#xff1a; 1. 创建时间序列数据 时间序列数据是指在多个时间点上形成的数值序列。在Pandas中&#xff0c;可以使用t…

vscode和pycharm在当前工作目录的不同|python获取当前文件目录和当前工作目录

问题背景 相信大家都遇到过一个问题&#xff1a;一个项目在vscode&#xff08;或pycharm&#xff09;明明可以正常运行&#xff0c;但当在pycharm&#xff08;或vscode&#xff09;中时&#xff0c;却经常会出现路径错误。起初&#xff0c;对于这个问题&#xff0c;我也是一知…

RN如何实现页面渐变背景

在React Native&#xff08;RN&#xff09;中&#xff0c;实现页面渐变背景通常需要使用LinearGradient组件。LinearGradient是React Native的一个第三方库&#xff0c;它允许你创建线性渐变效果。以下是一个简单的步骤指南&#xff0c;教你如何在React Native中实现页面渐变背…

基于Java的电商书城系统源码带本地搭建教程

技术框架&#xff1a;jQuery MySQL5.7 mybatis jsp shiro 运行环境&#xff1a;jdk8 IntelliJ IDEA maven3 宝塔面板 系统功能介绍 该系统分为前台展示和后台管理两大模块&#xff0c;前台主要是为消费者服务。该子系统实现了注册&#xff0c;登录&#xff0c; 以及…

闯关leetcode——232. Implement Queue using Stacks

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/implement-queue-using-stacks/description/ 内容 Implement a first in first out (FIFO) queue using only two stacks. The implemented queue should support all the functions of a normal …

自动化测试覆盖率提升的关键步骤

自动化测试覆盖不足的问题可以通过增加测试用例的数量和质量、引入代码覆盖率分析工具、加强团队的测试意识和技能、优化测试框架和工具、自动化测试与手动测试相结合等方式来解决。其中&#xff0c;引入代码覆盖率分析工具是关键&#xff0c;它可以帮助我们精准地识别未被测试…

手机柔性屏全贴合视觉应用

在高科技日新月异的今天&#xff0c;手机柔性显示屏作为智能手机市场的新宠&#xff0c;以其独特的可弯曲、轻薄及高耐用性特性引领着行业潮流。然而&#xff0c;在利用贴合机加工这些先进显示屏的过程中&#xff0c;仍面临着诸多技术挑战。其中&#xff0c;高精度对位、应力控…

大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来(4 - 4)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

JS补原型链

在JavaScript中&#xff0c;补足一个对象的原型链通常是指确保一个对象继承自另一个对象。这涉及到原型和构造函数。 对于构造函数&#xff08;通常首字母大写&#xff0c;如 Animal&#xff09;&#xff0c;它们有一个 prototype 属性&#xff0c;这个属性是一个对象&#xf…

fastjson/jackson对getter,setter和constructor的区分

在复现完fastjson1.2.24-1.2.80和jackson的所有相关漏洞后&#xff0c;总结的一些规则 以下均指对json的反序列化过程 setter fastjson调用setter&#xff1a;遍历所有方法&#xff0c;找出所有满足setter要求的方法&#xff0c;再根据传入的json去反射调用 jackson调用set…

STM32外设应用

STM32是基于ARM Cortex-M系列内核的微控制器&#xff0c;具有高性能、低功耗和丰富的外设资源。其广泛应用于物联网、工业控制、智能家居和嵌入式系统等领域。本文将简要介绍STM32常用外设的功能及应用实例&#xff0c;帮助大家更好地理解和使用STM32外设。 1. GPIO&#xff0…

近端串扰和远端串扰

近端串扰和远端串扰 近端串扰噪声持续时间长&#xff0c;远端串扰噪声峰值大 远端串扰噪声随耦合长度增加而增大 近端串扰:耦合长度小时&#xff0c;噪声随耦合长度增加而增大 远端串扰具有如下4个特性: 表层走线有远端串扰&#xff0c;内层走线之间可近似认为不存在远端串扰…

opencv学习笔记(5): 图像预处理(图像格式和通道、点运算)

1. 图像格式和通道 1.1 图像格式 图像格式是指计算机存储图像的格式。OpenCV目前支持的图像格式包括Windows位图文件BMP、DIB&#xff0c;JPEG文件JPEG、JPG、JPE&#xff0c;便携式网络图形文件PNG等。 ①. BMP BMP&#xff08;全称Bitmap&#xff0c;位图&#xff09;是Win…

VMware workstation的3种网络类型

虚拟机想要和主机进行通信必须借助网桥或者交换机&#xff0c;VMware workstation提供了3种网络交换机&#xff1a;仅主机类型交换机、NAT类型交换机、桥接类型交换机。 介绍下这三种类型的交换机 仅主机类型 通过VMware workstation添加一个仅主机类型的虚拟交换机后&#…

Kubernetes固定Pod IP和Mac地址

方案1&#xff1a; 在 Calico GitHub Issues#5196 问题的 commits#6249 提交中&#xff0c;引入新的 Pod 注释cni.projectcalico.org/hwAddr&#xff0c;用于将指定的 MAC 地址分配给容器端 Veth 接口。 将Calico升级至v3.24.1或以上版本&#xff0c;使用如下注解轻松设置Pod…

【Java数据结构】树】

【Java数据结构】树 一、树型结构1.1 概念1.2 特点1.3 树的类型1.4 树的遍历方式1.5 树的表示形式1.5.1 双亲表示法1.5.2 孩子表示法1.5.3 孩子双亲表示法1.5.4 孩子兄弟表示法 二、树型概念&#xff08;重点&#xff09; 此篇博客希望对你有所帮助&#xff08;帮助你了解树&am…