一、安装FFmpeg
🔹 macOS
brew install ffmpeg
🔹 Windows
去官网下载：https://ffmpeg.org/download.html
或者直接：
-
https://www.gyan.dev/ffmpeg/builds/
-
下载 “ffmpeg-release-essentials.zip”
3. 下载后解压
这一步需要把文件地址复制一下，后续配置环境变量，这个就是值
二、配置环境变量
1. 选择此电脑（电脑桌面/文件夹）
2. 右键，点击“属性”
3. 点击打开“高级系统设置”
以上的步骤也可直接在开始地方，搜索“高级系统设置”实现
4.选择 高级系统设置 -> 高级 -> 环境变量
5. 在系统变量中，选择 Path，然后编辑（内容就是解压后bin里面的文件地址）：
如果没有Path就新增。最后一定要点击确定！！！
6. 检查是否安装配置成功 win+r，输入 cmd 打开命令行窗口，输入： ffmpeg -version，有版本信息输出，则证明配置成功！！
三、本地用 FFmpeg 分片生成 HLS
安装配置成功之后
1. 生成储存分片的文件夹：mkdir hls_output
2.可参考这段将自己的视频进行分片（根据自己的文件大小做调整）
ffmpeg -i 123.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:v 4000k -b:a 128k -hls_time 6 -hls_list_size 0 -f hls hls_output/index.m3u8
| -i 123.mp4 | 输入文件 | 123.mp4 | 指定要转换的源视频文件。 |
| -c:v libx264 | 视频编码器 | libx264 | 使用 H.264 编码器（最兼容浏览器的编码格式）。 |
| -profile:v baseline | H.264 配置档 | baseline | 使用 Baseline Profile，提高旧设备（如早期 iPhone/Android）的兼容性。 |
| -level 3.0 | H.264 等级 | 3.0 | 限制码率、分辨率和帧率，确保移动端和低端设备能播放。 |
| -c:a aac | 音频编码器 | aac | 使用 AAC 音频编码（主流播放器广泛支持）。 |
| -b:v 4000k | 视频比特率 | 4000k | 设定视频输出码率为 4000 kbps，影响画质与文件大小。 |
| -b:a 128k | 音频比特率 | 128k | 设定音频输出码率为 128 kbps，音质与体积的平衡。 |
| -hls_time 6 | 分片时长 | 6 | 每个 HLS 分片（.ts 文件）时长为 6 秒。 |
| -hls_list_size 0 | m3u8 列表大小 | 0 | 设置为 0 表示不限制分片数量，适合点播（非直播）场景。 |
| -f hls | 输出格式 | hls | 指定输出为 HLS（HTTP Live Streaming）格式。 |
| hls_output/index.m3u8 | 输出文件 | index.m3u8 | 最终生成的播放列表文件，播放器从这里加载 .ts 分片播放。 |
四、代码编写
1. 将分片后的数据存入到到吗文件的 public ->创建文件夹hls_output -> 将生成的所有分片文件存入进去
2. 安装hls.js：npm install hls.js
3. 在你的项目中创建 VideoPlayer.tsx：
import { useEffect } from "react";
import Hls from "hls.js";
export default function VideoPlayer() {
useEffect(() => {
const video = document.getElementById("video") as HTMLVideoElement;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource("/hls_output/index.m3u8"); // 根据你的静态目录调整路径
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play().catch(() => console.log("自动播放被浏览器阻止"));
});
} else {
video.src = "/hls_output/index.m3u8";
video.addEventListener("loadedmetadata", () => video.play());
}
}, []);
return (
<div className="w-full h-full bg-black flex justify-center items-center">
<video
id="video"
controls
muted
autoPlay
loop
className="w-full h-full object-contain"
/>
</div>
);
}
4. 在你的某个文件展示你的视频
<div className="mt-20">
<div className="relative w-full max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-2xl bg-black">
<VideoPlayer />
</div>
</div>
以上就是前端实现分片播放大文件视频（FFmpeg – 全详细教程），如果觉得有用点赞收藏把，更多疑问可以在评论区发起哦
