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

前端 mp4 视频改成 m3u8 流模式

news 2025/12/25 22:34:50

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

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/17 11:45:21

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/12/25 9:07:36

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/12/16 7:09:20

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/12/16 0:36:19

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/12/18 3:07:12

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

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

编程新知 2025/12/15 2:28:05

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/12/9 16:40:19

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/12/19 17:21:25

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2025/12/24 20:33:52

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13