踩坑ffmpeg录制的mp4无法在浏览器上播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了踩坑ffmpeg录制的mp4无法在浏览器上播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

使用ffmpeg编译好的程序在电脑上进行音视频转换，可以参考这篇：《windows电脑FFmpeg安装教程手把手详解_windows安装ffmpeg》，而我们要做的是在游戏引擎中集成ffmpeg源码用来录制游戏视频。

我们游戏目前只支持录制avi格式的视频，但是近期有个运营需求：在上架商品的时候在游戏内录制一段视频提供给网页端进行播放。

首先简单的了解了一下，ffmpeg是支持录制mp4格式的，于是简短地改了几行代码就实现了录制mp4，然后把录制出来的视频发给网页同学部署测试。

第二天收到反馈我们录制的视频无法在网页上播放，由于我也是第一次接触ffmpeg，不知道为什么mp4无法在浏览器上播放，整个过程就是不断通过chatgpt查阅资料，不断修改代码调试，最终在某个夜晚跑通了。

问题：浏览器上无法播放mp4

我们游戏录制出来的mp4，右键 - 打开方式，选择浏览器，或者直接拖动mp4文件到浏览器里面，让它打开，表现为无法播放

踩坑ffmpeg录制的mp4无法在浏览器上播放

查看视频详细信息

通过ffmpeg工具提供的一些指令用来查看视频的详细信息，有助于调试

ffprobe -v quiet -print_format json -show_format -show_streams 你的文件名

ffprobe -v quiet -print_format json -show_format -show_streams video.mp4

查看视频每一帧的信息：

ffprobe -show_packets -of xml -i video.mp4

使用ffmpeg将mp4转为h264文件

我的第一个验证想法，使用ffmpeg把游戏录制的视频转换看看转换之后的视频是否在浏览器上播放，结果：转换后就可以在浏览器中就可以播放了

指令：ffmpeg -i video.mp4 -vcodec h264 -crf 10 test.mp4

说明：-crf 的数值是0~51，代表压缩等级，值越大画质越差，体积越小

使用h264编码

通过chatgpt查阅资料，了解到需要把mp4使用h264编码，于是就改了这个接口，这样来看格式虽然是h264了，但是仍然无法在网页上播放

avformat_alloc_output_context2(&oc, NULL, NULL, file_name);
//把第三个参数，输出格式强制指定为H264
avformat_alloc_output_context2(&oc, NULL, "h264", file_name);

对比差异

既然通过格式转换是可以播放的，那就对比一下两个视频文件的详细对比差异，差异如下所示：

踩坑ffmpeg录制的mp4无法在浏览器上播放

可以播放的视频	游戏录制的视频
"codec_tag_string": "avc1",	`"codec_tag_string": "[0][0][0][0]",`
"is_avc": "true",	"is_avc": "false",

游戏录制的缺少了以下部分字段：

"start_pts": 0,
"start_time": "0.000000",
"duration_ts": 45824,
"duration": "3.580000",
"bit_rate": "2161030",
"nb_frames": "179",

手动设置codec_tag

一开始我的重点方向是：codec_tag

在 MP4 文件中，codec_tag 是一个用于标识视频和音频编解码器的标签。它通常是一个四个字母的代码，例如“avc1”表示 H.264 视频编解码器，“mp4a”表示 AAC 音频编解码器。codec_tag 可以帮助播放器确定正确的解码器来解码视频和音频流。在使用 MP4 文件时，确保你的播放器支持所使用的 codec_tag。

然后使用chatgpt查到示例代码加到游戏内但代码编译不通过，原因我们是自己编译的ffmpeg.lib，还需要修改export才能用某些接口，这个问题后面再说

但是手动设置tag之后，问题依赖存在

断点查证

在断点的时候发现调用：avcodec_find_encoder传入的格式并不是h264，而是mpeg4

踩坑ffmpeg录制的mp4无法在浏览器上播放

于是手动在上面添加了一行用来修改编码格式，但是还是一样的结果

其实在这个时候，我还是有些分不清楚codec_tag和codec的关系

查一些正确的示例

所以让chatgpt给我举例一些使用ffmpeg来编码h264的视频，然后对照我们的代码来分析是问题出在那里，后面了解到某位同事对ffmpeg比较懂，已于向他请教，大大加速了查证过程。

视频每一帧的数据中无pts和dst

ffprobe -show_packets -of xml -i video.mp4，使用这个指令来查看视频中每帧的数据，发现录制出来的视频没有pts和dst

<ffprobe>
Input #0, h264, from 'video.mp4':
  Duration: N/A, bitrate: N/A
  Stream #0:0: Video: h264 (Main), yuv420p(progressive), 1904x1002 [SAR 1:1 DAR 952:501], 25 fps, 100 tbr, 1200k tbn
    <packets>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="34080" pos="0" flags="K__"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="4995" pos="34080" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="817" pos="39075" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="428" pos="39892" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="89" pos="40320" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="169" pos="40409" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="75" pos="40578" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="71" pos="40653" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="71" pos="40724" flags="___"/>
        <packet codec_type="video" stream_index="0" duration="24000" duration_time="0.020000" size="672" pos="40795" flags="___"/>
    </packets>
</ffprobe>

正常情况下每帧的视频数据中是有pts和dst的，于是在写入每帧数据时手动给pts和dst赋值

av_packet_rescale_ts(pkt, *time_base, st->time_base);
pkt->stream_index = st->index;
this->video_st.write_size += pkt->size;
int step = 1000 / this->fps;//ptk.pts每帧加的数值=1000/帧率
pkt->pts = step * m_frameNum;
pkt->dts = step * m_frameNum;
/* Write the compressed frame to the media file. */
return av_interleaved_write_frame(fmt_ctx, pkt);

在av_interleaved_write_frame之前写入pts，之后pts的值就无效了

手动计算pts播放起来非常卡

这样改完之后pts的值是有了，但是播放速度不正常，表现会非常卡，原因就是pts计算错误

踩坑ffmpeg录制的mp4无法在浏览器上播放

assert中断

试过强制修改codec_id，但是碰到问题：在结束录制的时候会中多线程的Assert导致录制得到的视频数据是空的，代码：lib\cstdmf\concurrency.hpp void grab() MF_ASSERT(id_ != gid);

让ffmpeg自动选择输出格式

反复阅读代码然后不断尝试，发现在调用avformat_alloc_output_context2接口不指定格式，而只给输出文件的后缀，录制出来的视频是有pts和dts的！！！

这一下就回到最初的地方，在最早的时候我就是没有设置这个选项的。

踩坑ffmpeg录制的mp4无法在浏览器上播放

接口定义和解释如下：

int avformat_alloc_output_context2(AVFormatContext **ctx, AVOutputFormat *oformat, const char *format_name, const char *filename);

ctx：输出格式上下文的指针，函数执行成功后会将创建的上下文赋值给该指针。
oformat：输出格式，可以为 NULL，表示让 FFmpeg 自动选择输出格式。
format_name：输出格式的名称，可以为 NULL，表示让 FFmpeg 自动选择输出格式。
filename：输出文件名，可以为 NULL，表示不需要输出到文件。