FFMPEG 转换的视频在 HTML5 中不起作用
Posted
技术标签:
【中文标题】FFMPEG 转换的视频在 HTML5 中不起作用【英文标题】：FFMPEG Converted Video Not Working In HTML5 【发布时间】：2015-05-12 19:13:16 【问题描述】：使用 FFMPEG 将 Avi 转换为 Mp4，转换后的视频在 html 中不起作用 5 标签
我的网页中有一个部分，用户可以上传任何类型的任何格式的视频，目前仅限于 .mp4 和 .avi。成功上传后，我向用户显示了相同的视频。我已经绑定了 HTML5 视频中的路径，以便用户可以查看他/她上传的内容。扩展名为 .mp4 的视频无疑可以正常工作，因为 HTML5 支持它们。棘手的部分是它不支持 Avi 文件。现在这里出现了什么问题。为了显示 avi 视频，我使用 FFMPEG 将扩展名为 .avi 的视频转换为 .mp4。通过大量的谷歌搜索和阅读论坛，我成功地将 avi 视频转换为 mp4。这是我用过的：-
ffmpeg -i input.avi -acodec libfaac -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 output.mp4
ffmpeg -i input.avi -c:v libx264 -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 output.mp4
以上两个工作完美，他们已成功转换视频。但是当我在 HTML5 中的浏览器和新选项卡（已安装 Flash Player 插件）中运行它们时，HTML5 无法播放，并且 Flash 播放器返回错误消息“无法播放视频，因为文件已损坏强>”。但是当我在 KMplayer 和 Window 媒体播放器 上播放它们时，它们运行良好。
我去过 *** 中与将 avi 转换为 mp4 相关的各种线程，在这里我在一个论坛中找到了以下内容。其中一位用户已经接受了这个正确答案，但对我来说却没有成功。
ffmpeg -y -i sample.avi -b:v 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 sample.mp4
上述参数返回给我以下错误“找不到预设‘慢’的文件”。
在我进一步搜索之后，我发现了这个线程ffmpeg convert mov file to mp4 for HTML5 video tag IE9。下面的论点工作得很好，它能够以在浏览器上播放的方式转换视频。
ffmpeg -y -i input.avi -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_aacenc -b:a 128k -pix_fmt yuv420p output.mp4。
我在这里遇到的问题是视频被转换为 420p 分辨率，质量不达标。较小分辨率的视频被放大并且看起来像素化了
因此，我最终不得不提出一个问题。如果有人可以为上述问题提供解决方案，我将非常感激。我需要将 avi 视频转换为 HTML5 视频标签支持的 mp4。它应该能够在浏览器上播放它，并且在视频转换过程中它应该保持原始音频和视频质量以及分辨率。
谢谢
我的 C# 代码：
public void Create(string input, string output, string parametri, string ThumbnailPhysicalPath, int ConvertType)
ffmpeg = new Process();
if (ConvertType == Convert.ToInt32(ConversionType.Thumbnail))
ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -vframes 1 \"" + output + "\"";
else if (ConvertType == Convert.ToInt32(ConversionType.AviToMp4))
ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -c:v libx264 -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 \"" + output + "\"";
//ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_aacenc -b:a 128k -pix_fmt yuv420p \"" + output + "\"";
ffmpeg.StartInfo.FileName = ThumbnailPhysicalPath + @"ffmpeg.exe";
ffmpeg.StartInfo.UseShellExecute = false;
ffmpeg.StartInfo.RedirectStandardOutput = true;
ffmpeg.StartInfo.RedirectStandardError = true;
ffmpeg.StartInfo.CreateNoWindow = true;
try
ffmpeg.Start();
ffmpeg.WaitForExit();
string error = ffmpeg.StandardError.ReadToEnd();
catch (Exception Ex)
Common.WriteLog("Exception occurred during conversion. Error Message :- " + Ex.Message + "\n Input Parameter :- " + input+ "\n Output Paramenter :- "+ output);
finally
ffmpeg.Close();
if (ConvertType == Convert.ToInt32(ConversionType.AviToMp4))
UpdateConvertedVideoDetails(input,output);
命令提示符 FFMPEG 输出：-
样本 3 结果：-
D:\Client\WebSite\Converter_Tools>ffmpeg -y -i sample.avi -b:v 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 sample.mp4
ffmpeg version N-70239-g111d79a Copyright (c) 2000-2015 the FFmpeg developers
built with gcc 4.9.2 (GCC)
configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --enable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libblu
ray --enable-libbs2b --enable-libcaca --enable-libfreetype --enable-libgme --enable-libgsm --enable-libilbc --enable-libmodplug --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrw
b --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvo-aacenc --
enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-lzma --enable-decklink --enab
le-zlib
libavutil 54. 19.100 / 54. 19.100
libavcodec 56. 26.100 / 56. 26.100
libavformat 56. 23.105 / 56. 23.105
libavdevice 56. 4.100 / 56. 4.100
libavfilter 5. 11.101 / 5. 11.101
libswscale 3. 1.101 / 3. 1.101
libswresample 1. 1.100 / 1. 1.100
libpostproc 53. 3.100 / 53. 3.100
[avi @ 037c8480] non-interleaved AVI
Guessed Channel Layout for Input Stream #0.1 : mono
Input #0, avi, from 'sample.avi':
Duration: 00:00:34.00, start: 0.000000, bitrate: 1433 kb/s
Stream #0:0: Video: cinepak (cvid / 0x64697663), rgb24, 320x240, 15 fps, 15 tbr, 15 tbn, 15 tbc
Stream #0:1: Audio: pcm_u8 ([1][0][0][0] / 0x0001), 22050 Hz, 1 channels, u8, 176 kb/s
File for preset 'slow' not found
示例 4 结果：-
D:\Client\WebSite\Converter_Tools>ffmpeg -y -i input.avi -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_
aacenc -b:a 128k -pix_fmt yuv420p output.mp4
ffmpeg version N-70239-g111d79a Copyright (c) 2000-2015 the FFmpeg developers
built with gcc 4.9.2 (GCC)
configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --enable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libblu
ray --enable-libbs2b --enable-libcaca --enable-libfreetype --enable-libgme --enable-libgsm --enable-libilbc --enable-libmodplug --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrw
b --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvo-aacenc --
enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-lzma --enable-decklink --enab
le-zlib
libavutil 54. 19.100 / 54. 19.100
libavcodec 56. 26.100 / 56. 26.100
libavformat 56. 23.105 / 56. 23.105
libavdevice 56. 4.100 / 56. 4.100
libavfilter 5. 11.101 / 5. 11.101
libswscale 3. 1.101 / 3. 1.101
libswresample 1. 1.100 / 1. 1.100
libpostproc 53. 3.100 / 53. 3.100
Input #0, avi, from 'input.avi':
Duration: 00:00:03.93, start: 0.000000, bitrate: 3255 kb/s
Stream #0:0: Video: msrle ([1][0][0][0] / 0x0001), pal8, 300x250, 3301 kb/s, 15 fps, 15 tbr, 15 tbn, 15 tbc
[libx264 @ 002ec860] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2
[libx264 @ 002ec860] profile High, level 2.2
[libx264 @ 002ec860] 264 - core 144 r2525 40bb568 - H.264/MPEG-4 AVC codec - Copyleft 2003-2014 - http://www.videolan.org/x264.html - options: cabac=1 ref=5 deblock=1:0:0 analyse=0x3:0x113 me=umh subm
e=8 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=6 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 i
nterlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=2 b_bias=0 direct=3 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=15 scenecut=40 intra_refresh=0 rc_lookahead=50 rc
=cbr mbtree=1 bitrate=500 ratetol=1.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 vbv_maxrate=500 vbv_bufsize=1000 nal_hrd=none filler=0 ip_ratio=1.40 aq=1:1.00
Output #0, mp4, to 'output.mp4':
Metadata:
encoder : Lavf56.23.105
Stream #0:0: Video: h264 (libx264) ([33][0][0][0] / 0x0021), yuv420p, 576x480, q=-1--1, 500 kb/s, 15 fps, 15360 tbn, 15 tbc
Metadata:
encoder : Lavc56.26.100 libx264
Stream mapping:
Stream #0:0 -> #0:0 (msrle (native) -> h264 (libx264))
Press [q] to stop, [?] for help
frame= 59 fps= 30 q=-1.0 Lsize= 229kB time=00:00:03.80 bitrate= 493.5kbits/s
video:227kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.637976%
[libx264 @ 002ec860] frame I:3 Avg QP:26.53 size: 10657
[libx264 @ 002ec860] frame P:25 Avg QP:30.49 size: 5608
[libx264 @ 002ec860] frame B:31 Avg QP:32.26 size: 1935
[libx264 @ 002ec860] consecutive B-frames: 22.0% 16.9% 20.3% 40.7%
[libx264 @ 002ec860] mb I I16..4: 16.7% 69.0% 14.4%
[libx264 @ 002ec860] mb P I16..4: 11.1% 29.9% 3.8% P16..4: 21.3% 6.8% 2.6% 0.0% 0.0% skip:24.6%
[libx264 @ 002ec860] mb B I16..4: 1.7% 3.0% 0.3% B16..8: 29.7% 5.6% 0.8% direct: 2.1% skip:56.8% L0:50.5% L1:45.6% BI: 3.9%
[libx264 @ 002ec860] 8x8 transform intra:66.5% inter:79.4%
[libx264 @ 002ec860] direct mvs spatial:93.5% temporal:6.5%
[libx264 @ 002ec860] coded y,uvDC,uvAC intra: 40.3% 48.8% 25.7% inter: 12.4% 8.4% 1.4%
[libx264 @ 002ec860] i16 v,h,dc,p: 19% 59% 6% 17%
[libx264 @ 002ec860] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 10% 25% 16% 7% 8% 6% 11% 7% 10%
[libx264 @ 002ec860] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 20% 21% 9% 7% 9% 8% 10% 7% 10%
[libx264 @ 002ec860] i8c dc,h,v,p: 41% 33% 13% 13%
[libx264 @ 002ec860] Weighted P-Frames: Y:0.0% UV:0.0%
[libx264 @ 002ec860] ref P L0: 67.6% 8.1% 9.6% 5.4% 6.6% 2.8%
[libx264 @ 002ec860] ref B L0: 84.6% 10.5% 3.9% 1.0%
[libx264 @ 002ec860] ref B L1: 95.9% 4.1%
[libx264 @ 002ec860] kb/s:472.20
【问题讨论】：
MPEG-4 Part 2 视频（编码器mpeg4）不受 HTML5 视频支持。如您所见，在使用libx264 时，应使用-preset 而不是-vpre。您需要显示命令 #4 的完整控制台输出。
@LordNeckbeard：我已经用#3 和#4 的命令propmt 输出更新了我的问题。
请以文本而不是图像的形式提供输出。
@LordNeckbeard：完成用文本输出替换图像。
对于命令 #4 删除 -vprofile high 并添加 -movflags +faststart。它现在可以在 IE 中使用吗？你为什么要升级？当然这会降低质量。
【参考方案1】：
问题 1：HTML5 不支持 MPEG-4 Part 2 视频
命令 #1 正在使用编码器 mpeg4。 HTML5 不支持生成的视频格式。请改用libx264。
命令#2 声明libx264 和mpeg4。这没有任何意义，因为您只能为每个输出视频流选择一个编码器，并且由于 mpeg4 列在最后，这很可能是使用的编码器。
问题2：使用-preset而不是过时的-vpre
我在这里指的是你的命令#3。
使用libx264 编码时，请使用-preset 而不是旧的-vpre 选项。 -preset 将访问内部 x264 预设。 -vpre 用于访问基于文本文件的自定义预设。
在尝试使用 H.264 配置文件（例如 -profile:v baseline）时，请使用 -profile:v 而不是 -vpre。
问题 3：升级不好
较小分辨率的视频被放大，看起来像素化了。
为什么要高档？升级会降低质量。想象一下将小尺寸图像缩放到大尺寸。它看起来很糟糕，因为必须将现有信息内插到新的大小。不可能神奇地放大图像并使其看起来像“原件”，因为信息根本不存在。
问题 #4：Internet Explorer
我不知道为什么 IE 没有播放命令 #4 的输出，但据我所知，添加 -movflags +faststart 的建议似乎解决了这个问题。编码完成后，此选项会将一些数据重新定位到文件的开头，以便在完全下载之前开始播放。但是，您的输入只有大约 3 秒长，因此应该不会有太大影响。
如果您仍然遇到问题，您可以尝试一些配置文件，例如 baseline 或 main，具体取决于您的目标浏览器或设备可以解码的内容。
【讨论】：
以上是关于FFMPEG 转换的视频在 HTML5 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 视频加载数据事件在 IOS Safari 中不起作用
使用 ffmpeg 提取的电视音频在 iOS 中不起作用（但在模拟器中起作用）