前端 mp4 视频改成 m3u8 流模式

server/2024/12/16 19:34:37/

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


http://www.ppmy.cn/server/150708.html

相关文章

相机(Camera)硬件组成详解

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正。 写在前面&#xff1a;可以去B站观看一些相机原理的视频来配合学习&#xff0c;这里推荐&#xff1a;推荐1&#xff0c;推荐2&#xff0c;推荐3 相机&#xff08;Camera&#xff09;是一种复杂的光…

绘图方式集合

1. 流程图 1.1 PlantUML 代码绘制流程图 1.1.1 简介 1.1.2 网站 你可以使用以下网站来将 PlantUML 代码转换成可视化的流程图&#xff1a; PlantUML 官方网站 网站地址&#xff1a;https://plantuml.com/plantuml此网站提供了一个在线工具&#xff0c;可以直接输入 PlantUM…

分享从零开始学习网络设备配置--任务6.4 使用高级ACL限制服务器端口防攻击

任务描述 某公司构建了互联互通的办公网。北京总部的网络核心使用一台三层路由器设备连接不同子网&#xff0c;构建企业办公网络。通过三层技术一方面实现办公网络互联互通&#xff0c;另一方面把办公网接入Internet网络。 公司在天津设有一分公司&#xff0c;使用三层设备的…

【反无人机目标检测与跟踪】DUT Anti-UAV数据集介绍

DUT Anti-UAV数据集是IEEE TITS 2023上大连理工大学团队提出的Vision-based Anti-UAV Detection and Tracking论文中提出的一个可见光反无人机检测与跟踪数据集。 因为反无人机目标检测与跟踪的数据集都比较少&#xff0c;因此这个数据集也非常宝贵。 这个数据集的链接如下 数…

NLP大模型学习总结

参考课程 【清华NLP】刘知远团队大模型公开课全网首发&#xff5c;带你从入门到实战-知乎 一、自然语言处理基础 1.1 自然语言处理的基本任务 让计算机理解人所说的文本 语音 词性标注&#xff1a;区分每个词名词、动词、形容词等词性命名实体的识别&#xff1a;名词的具体…

昇思25天学习打卡营第33天|共赴算力时代

文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。…

简单的Java小项目

学生选课系统 在控制台输入输出信息&#xff1a; 在eclipse上面的超级简单文件结构&#xff1a; Main.java package experiment_4;import java.util.*; import java.io.*;public class Main {public static List<Course> courseList new ArrayList<>();publi…

Unreal的Audio::IAudioCaptureStream在Android中录制数据异常

修改OpenAudioCaptureStream启动参数为PCM_32&#xff0c;在PC上正常&#xff0c;在Android系统&#xff0c;读取的的数据计算出的音量值在0.4-0.6之间跳动&#xff0c;数据异常。 Audio::FAudioCaptureDeviceParams Params;/** 设置声卡不支持的采样数和通道数开始音频流不会成…