当前位置： 首页 > news >正文

前端 mp4 视频改成 m3u8 流模式

news 2025/9/18 3:39:55

前端 mp4 视频改成 m3u8 流模式

mp4 视频的问题

1、mp4 视频通常对应一个文件，播放时需要加载全部文件，消耗网络资源。如果用户从中间某个时间访问，也会从头开始下载，浪费服务器性能。

2、mp4 视频文件容易被用户下载到本地。有些版权方不希望普通用户下载到本地。

解决思路

这个问题，很多视频网站已经给出了成熟方案，就是流模式加密形式。如果不是专业的视频网站，就不需要这么复杂的加密，直接转换成流模式即可满足需求。就是把 mp4 转换成 m3u8 视频流，然后分片下载并播放。

开发环境和第三方库：

Mac OS

Video.js 处理网页视频显示 ： https://www.npmjs.com/package/video.js

FFmpeg 处理视频格式转换和切分： https://blog.csdn.net/INNER_PEACE_DS/article/details/136235886

实际上音视频转换，是前端一个单独的分类，技术很复杂，我这里只是简单的把一个文件转换成流模式的需求

下面我使用原生 JS 实现一下需求，如果是其他框架，也是类似的方法。

解决步骤

第一步

准备一个 mp4 文件，使用原生 JS + videojs 创建网页，测试页面加载 mp4 视频。具体 video.js 参考这里 https://www.npmjs.com/package/video.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 头部引入本地的 video.css 和 video.js，或者引入 CDN 链接 --><link href="./video-js.min.css" rel="stylesheet"><script src="./video.min.js"></script><link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet"><script src="//vjs.zencdn.net/8.3.0/video.min.js"></script><!-- 美化一下样式 --><style>.video-js {width: 500px;height: 400px;}</style>
</head>
<body><!-- 这里创建 video 元素 --><videoid="my-player"class="video-js"controlspreload="auto"data-setup='{}'><source src="./mp4/demo.mp4" type="video/mp4"></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video>
</body>
</html>

本地打开后，可以看到 mp4 视频一次性加载出来。

第一步目的：测试 mp4 文件正常，videojs 配置正常。
在这里插入图片描述

第二步

使用 brew 本地安装转换器 ffmpeg

brew install ffmpeg

如果提示 brew 工具不存在，可以先安装一下 brew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成后，测试一下版本号正常输出

ffmpeg -version
第三步

转换MP4视频 -> 到 m3u8 + TS

将MP4文件分割成小的TS视频切片，然后创建M3U8播放列表文件

ffmpeg -i demo.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

这一步转换+切片取决于 mp4 视频大小。建议测试使用一个小一点的 mp4 文件。

第四步

插入到前端页面中，注意 source 改一下，改动 src 是 m3u8 的文件，type 改成流模式

这一行

<source src="./mp4/demo.mp4" type="video/mp4"></source>

改成

<source src="./mp4/output.m3u8" type='application/x-mpegURL'></source>

然后重新打开 HTML 即可。

在这里插入图片描述

配置 ffmpeg

转换的核心是 ffmpeg 程序，前端只是做了一个视频展示。如果需要复杂功能，根据实际情况调试下面参数：

  • -i xxx.mp4 指定输入文件的路径（避免中文路径）
  • -c:v libx264 指定视频编码器为libx264（H.264）
  • -crf 20 设置CRF（常量速率因子）的值。这是视频质量的控制，范围从0（无损）到51（最糟），通常使用18到28的值。
  • -c:a aac 指定音频编码器为AAC。
  • -strict experimental 允许使用实验性的编码器。
  • -b:a 192k 设置音频比特率为192k。
  • -codec: copy：复用编解码器，这意味着不重新编码视频和音频。
  • -start_number 0：每个TS切片的起始编号从0开始。
  • -hls_time 10：每个TS切片的持续时间为10秒。
  • -hls_list_size 0：播放列表中的TS切片数量没有限制。
  • -f hls：输出格式为HLS。
  • output.m3u8：输出的M3U8播放列表文件名。
  • -s（设置分辨率）
  • -b:v（设置视频比特率）

其他问题和解决

Windows 参考：https://blog.csdn.net/weixin_41897680/article/details/128785382

mac 参考：https://www.jianshu.com/p/87dfbf76751e

服务器存在跨域怎么处理：https://blog.csdn.net/gshzh00/article/details/114002868

反向实现 m3u8 转换 mp4

实现原理类似，把需要转换的网址转换输入进行转换

ffmpeg -i "https://v-blog.csdnimg.cn/asset/c096ba1166c72ea0bf849edb6c843b32/play_video/5f09992800031887a7699e3388734d2b.m3u8" -c copy -bsf:a aac_adtstoasc output.mp4
参数说明

在这个命令中：

-i 表示输入文件，后面跟的就是M3U8链接地址。

-c copy 表示直接复制流而不重新编码，能加快处理速度并保持原始视频的质量。

-bsf:a aac_adtstoasc 用于修复音频流，以确保音频正确转换并与MP4容器兼容。

output.mp4 是输出文件的名称，可以将其更改成你喜欢的文件名。

存在的问题

登录授权问题

有些网站的M3U8链接可能需要授权或Cookies。可以先用浏览器找出必要的请求头信息，并在FFmpeg命令中增加相应参数。

ffmpeg -headers "Cookie: 替换为具体的Cookie" -i "http://替换为真实的地址.m3u8" -c copy -bsf:a aac_adtstoasc output.mp4

如果网络不稳定或者视频服务器的下载速度受限，下载可能中途失败。此时可以使用带有-timeout选项的ffmpeg命令来设定重试间隔和次数，以提高成功几率。

ffmpeg -i "http://替换为真实的地址.m3u8" -c copy -bsf:a aac_adtstoasc -timeout 3000000 output.mp4

实际解析过程中，还有的切片格式是 png 等格式，这样浏览器误认为下载图片格式，实际上是剪切的视频格式。具体还需要多使用才能熟练掌握。

参考链接

https://blog.csdn.net/g310773517/article/details/140035215

相关文章：

前端 mp4 视频改成 m3u8 流模式

前端 mp4 视频改成 m3u8 流模式 mp4 视频的问题 1、mp4 视频通常对应一个文件&#xff0c;播放时需要加载全部文件&#xff0c;消耗网络资源。如果用户从中间某个时间访问&#xff0c;也会从头开始下载&#xff0c;浪费服务器性能。 2、mp4 视频文件容易被用户下载到本地。有…...

编程日记 2024/12/12 8:29:33

聚焦港口智能接处警，开启平安海运之门

一、概述 港口作为海运的关键枢纽&#xff0c;安全保障至关重要。港口智能接处警系统凭借智能化、数字化、信息化手段&#xff0c;融合 AI 与大数据等前沿技术&#xff0c;旨在实现对港口各类警情的快速、精准处理&#xff0c;有效提升港口应急响应能力&#xff0c;开启平安海…...

编程日记 2024/12/12 8:28:32

`yarn list --pattern element-ui` 是一个 Yarn 命令，用于列出项目中符合指定模式（`element-ui`）的依赖包信息

文章目录 命令解析&#xff1a;功能说明&#xff1a;示例输出&#xff1a;使用场景&#xff1a; yarn list --pattern element-ui 是一个 Yarn 命令&#xff0c;用于列出项目中符合指定模式&#xff08; element-ui&#xff09;的依赖包信息。 命令解析&#xff1a; yarn list…...

编程日记 2024/12/12 8:25:28

ElementEye，网页分析器

介绍 我们经常使用Python写爬虫&#xff0c;爬到网页数据之后&#xff0c;就需要用beautifulSoup进行解析。因为写爬虫并不是我的主营工作&#xff0c;大多数只是用来分析一下想要的数据而已&#xff0c;所以经常会忘记beautifulSoup的用法。 同时&#xff0c;我们总是分析页面…...

编程日记 2024/12/12 8:17:20

健康管理系统(Koa+Vue3)

系统界面(源码末尾获取) 系统技术 Vue3 Koa Nodejs Html Css Js ....... 系统介绍 系统比较简单,轻轻松松面对结业课堂作业.采用的是基于nodejs开发的Koa框架作为后端,采用Vue框架作为前端,完成快速开发和界面展示. 系统获取 啊啊啊宝/KoaVue3https://gitee.com/ah-ah-b…...

编程日记 2024/12/12 8:16:19

智创 AI 新视界 -- AI 助力金融风险管理的新策略（16 - 10）

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

编程日记 2024/12/12 8:12:15

Linux内核 -- 字符设备之read write poll基本实现

Linux字符设备&#xff1a;read、write和poll函数实现及完整代码 1. read函数 原型 ssize_t read(struct file *file, char __user *buf, size_t count, loff_t *pos);实现步骤 检查用户缓冲区&#xff1a;使用copy_to_user将数据从内核空间复制到用户空间。返回已读取的字…...

编程日记 2024/12/12 8:09:11

腾讯微信C++面试题及参考答案

64 匹马 8 个赛道，找出前四名，最少赛多少场 为了找出64匹马中的前四名，我们可以按照以下步骤来组织比赛，尽量减少所需要的比赛次数： 初步分组: 将64匹马分成8组，每组8匹马。分别为A、B、C、D、E、F、G、H这8组。每组进行一次比赛来确定各组的速度排序。每个组比赛一次总…...

编程日记 2024/12/12 8:06:07

如何查看内网设备访问互联网时的出口 IP 地址？

在企业VPC中我们通常是一个机房公用一个公网IP&#xff0c;也就是所有的设备共用同一个出口IP。 那么如何查看如何查看内网设备访问互联网时的出口 IP 地址呢&#xff1f; 要查看一台 Linux 内网设备访问互联网时的出口 IP 地址&#xff0c;可以使用以下几种方法&#xff1a;…...

编程日记 2024/12/12 8:00:01

ESP32-S3模组上跑通ES8388（24）

接前一篇文章：ESP32-S3模组上跑通ES8388（23） 二、利用ESP-ADF操作ES8388 2. 详细解析 上一回解析完了es8388_init函数中的第8段代码，本回继续往下解析。为了便于理解和回顾，再次贴出es8388_init函数源码，在components\audio_hal\driver\es8388\es8388.c中，如下： ​ …...

编程日记 2024/12/12 7:59:00

【AIGC系列】frequency_penalty如何通过控制参数提升文本生成的多样性与创造性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/12/12 7:56:57

Python+OpenCV系列：图像的运算

文章目录 PythonOpenCV系列&#xff1a;图像的加权和、覆盖1. 图像加权和&#xff08;加权融合&#xff09;2. 图像覆盖&#xff08;区域叠加&#xff09;3. 应用场景4. 总结 PythonOpenCV系列&#xff1a;图像的加权和、覆盖 在图像处理中&#xff0c;图像的加权和与覆盖是两…...

编程日记 2024/12/12 7:55:55

【Unity技巧】Unity项目中哪些文件不用管理（.gitignore）

Unity的项目编译后一般都比较大&#xff0c;动辙几个G。这里面一般我们只需要把Assets, Packages, ProjectSettings这三个文件夹进行源代码管理就可以&#xff0c;其他文件就可以通过下面的.gitignore来忽略掉。 .gitignore文件的内容如下&#xff1a; # 将此 .gitignore 文件…...

编程日记 2024/12/12 7:54:55

ansible 自动化运维工具（三）playbook剧本

目录 Playbook的定义 Playbook组成 Playbook命令 Playbook剧本编写格式 基本组件 Handlers处理器 tags标签 Facts组件 Register&#xff1a;注册变量 Debug模块 Playbook循环 With_items循环 With_dict循环&#xff08;字典循环&#xff09; With_nested循环&…...

编程日记 2024/12/12 7:53:54

图论【Lecode_HOT100】

文章目录 1.岛屿数量No.2002.腐烂的橘子No.9943.课程表No.2074.实现Trie&#xff08;前缀树&#xff09;No.208 1.岛屿数量No.200 class Solution {public int numIslands(char[][] grid) {if (grid null || grid.length 0) {return 0;}int numIslands 0;int rows grid.len…...

编程日记 2024/12/12 7:50:50

day10性能测试（2）——Jmeter

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、LoadRunner vs Jmeter 1.1 LoadRunner 1.2 Jmeter 1.3 对比小结 2、Jmeter 环境安装 2.1 安装jdk 2.2 安装Jmeter 2.3 小结 3、Jmeter 文件目录结构 4、Jmeter默认配置修改 5、Jmeter元件、组…...

编程日记 2024/12/12 7:45:46

Y3编辑器文档4：触发器

文章目录 一、触发器简介1.1 触发器界面1.2 ECA语句编辑及快捷键1.3 参数设置1.4 变量设置1.5 实体触发器1.6 函数库与触发器复用 二、触发器的多层结构2.1 子触发器&#xff08;在游戏内对新的事件进行注册&#xff09;2.2 触发器变量作用域2.3 复合条件2.4 循环2.5 计时器2.6…...

编程日记 2024/12/12 7:44:45

1. 机器学习基本知识(3)——机器学习的主要挑战

1.5 机器学习的主要挑战 1.5.1 训练数据不足 对于复杂问题而言&#xff0c;数据比算法更重要但中小型数据集仍然很普遍&#xff0c;获得额外的训练数据并不总是一件轻而易举或物美价廉的事情&#xff0c;所以暂时不要抛弃算法。 1.5.2 训练数据不具有代表性 采样偏差&#…...

编程日记 2024/12/12 7:43:44

prometheusgrafana实现监控告警

Prometheus负责集群数据的监控和采集&#xff0c;然后传递给grafana进行可视化&#xff0c;集成睿象云可实现监控报警&#xff0c;为了方便操作&#xff0c;可以通过iframe嵌套grafana到指定的页面。 文章目录 1.Grafana集成Prometheus2.iframe内嵌grafana3.监控告警 1.Grafana…...

编程日记 2024/12/12 7:42:43

Ubuntu防火墙管理(五)——ufw源规则解读与修改

firewalld与nftables 在 /etc/firewalld/firewalld.conf 文件中&#xff0c;FirewallBackend 选项用于指定 Firewalld 使用的防火墙后端实现。具体来说&#xff1a; nftables&#xff1a;这是当前的默认选项&#xff0c;表示 Firewalld 将使用 nftables 作为防火墙后端。nftab…...

编程日记 2024/12/12 7:40:41

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/17 3:19:40

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/8/4 15:55:44

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/9/2 19:12:26

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/9/12 23:22:08

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/17 14:10:43

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/9/6 0:31:52

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/9/12 15:03:05

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/9/10 3:34:26

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/9/4 5:13:46