我正在尝试以 MP4 和 WEBM 格式提供 HTML5 视频。但我无法让所有浏览器都工作:
最小 JSFiddle 位于:
浏览器错误:
-
IE11:11.0.9600.17126 / 11.0.9 KB2957689
Error: Unsupported video type of invalid file path
-
Android 浏览器和 Chrome Android:
没有错误,视频只是拒绝开始
健全性测试 - 以下三个值相等:
接收到的文件大小:curl <video URL> | wc -c
实际文件大小:stat -c %s <video file>
服务器指定的文件大小:Content-Length
HTTP 标头。
有问题的视频之一位于:
-
MP4: http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4 http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4
Content-Type: video/mp4
无法在 Chrome / IE11 / Chrome Android / Android 浏览器中播放
在 VLC 中播放
FFMPEG编码参数:
-an -vcodec libx264 -s hd720
-flags +loop+mv4
-cmp 256
-partitions +parti4x4+parti8x8+partp4x4+partp8x8
-subq 6 -trellis 0 -refs 5 -bf 0 -coder 0 -me_range 16 -g 250
-keyint_min 25 -sc_threshold 40 -i_qfactor 0.71
-qmin 10 -qmax 51 -qdiff 4
-movflags faststart
这些内容是通过深入搜索为移动浏览器编码 MP4 的最佳方式而收集的。
如果我使用-an -vcodec libx264 -s hd720
那么该视频也无法在浏览器中播放。
-
WEBM: http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm
Content-Type: video/webm
在 Chrome/Firefox 中播放
FFMPEG编码参数:
-an -vcodec libvpx -s hd720
相关 HTML(类别、海报等已删除):
<video preload="metadata" controls="controls">
<source type="video/mp4" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4">
<source type="video/webm" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm">
</video>
JSFiddle 在
实际上似乎没有一个 MP4 播放浏览器能够完全支持 MP4 - 对于试图围绕该格式创建皇室地狱/垄断的 MS 和 Apple 浏览器来说尤其成问题。
我通过使用以下 FFMPEG 参数重新编码来使其工作:
-pix_fmt yuv420p
-preset slow
-profile:v baseline
给出完整的命令行:
ffmpeg
<INPUT DEFINITION> # e.g. -i <FILE>
-an # if you won't want audio, otherwise -acodec libaac -b:a 128k
-s hd720
-vcodec libx264
-b:v BITRATE # e.g. 4M
-vcodec libx264
-pix_fmt yuv420p
-preset slow
-profile:v baseline
-movflags faststart
-y <OUTPUT PATH>
问题最终是专有软件供应商没有正确支持自己的标准的又一个例子。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)