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

前端 mp4 视频改成 m3u8 流模式

news 2026/2/10 20:00:46

前端 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 视频通常对应一个文件，播放时需要加载全部文件，消耗网络资源。如果用户从中间某个时间访问，也会从头开始下载，浪费服务器性能。 2、mp4 视频文件容易被用户下载到本地。有…...

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

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

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

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

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

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

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

ElementEye，网页分析器

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

编程日记 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）

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

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

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

Linux字符设备：read、write和poll函数实现及完整代码 1. read函数原型 ssize_t read(struct file *file, char __user *buf, size_t count, loff_t *pos);实现步骤检查用户缓冲区：使用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，也就是所有的设备共用同一个出口IP。那么如何查看如何查看内网设备访问互联网时的出口 IP 地址呢？ 要查看一台 Linux 内网设备访问互联网时的出口 IP 地址，可以使用以下几种方法：…...

编程日记 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如何通过控制参数提升文本生成的多样性与创造性

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

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

Python+OpenCV系列：图像的运算

文章目录 PythonOpenCV系列：图像的加权和、覆盖1. 图像加权和（加权融合）2. 图像覆盖（区域叠加）3. 应用场景4. 总结 PythonOpenCV系列：图像的加权和、覆盖在图像处理中，图像的加权和与覆盖是两…...

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

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

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

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

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

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

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

文章目录 1.岛屿数量No.2002.腐烂的橘子No.9943.课程表No.2074.实现Trie（前缀树）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

【没有所谓的运气🍬，只有绝对的努力✊】目录 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 子触发器（在游戏内对新的事件进行注册）2.2 触发器变量作用域2.3 复合条件2.4 循环2.5 计时器2.6…...

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

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

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

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

prometheusgrafana实现监控告警

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

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

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

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

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

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2026/1/22 15:36:10

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/12/31 8:38:23

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2026/2/7 10:47:09

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。一、通道的基本分类类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2026/2/10 10:58:14