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

前端 mp4 视频改成 m3u8 流模式

news 2026/2/4 0:55:59

前端 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

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/1/28 12:29:35

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。一、I…...

编程新知 2026/2/2 2:19:38

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题，前来答题。每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...

编程新知 2026/1/31 9:25:11

macOS 终端智能代理检测

🧠 终端智能代理检测：自动判断是否需要设置代理访问 GitHub 在开发中，使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新，例如： fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2026/1/22 15:34:33

TJCTF 2025

还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/12/2 12:05:07

FOPLP vs CoWoS

以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...

编程新知 2025/10/24 6:08:42

前端 mp4 视频改成 m3u8 流模式

mp4 视频的问题

解决思路

解决步骤

第一步

第二步

第三步

第四步

配置 ffmpeg

其他问题和解决

反向实现 m3u8 转换 mp4

参数说明

存在的问题

参考链接

相关文章：