Firefox和IE中的MP4视频不尊重旋转

Question

我们有一个网页可以在<video>代码中播放快速入门MP4 - 非常简单，在Chrome和Safari中效果很好。然而，似乎Firefox 36和IE10不尊重视频的旋转，所以它们最终会颠倒或旋转90 *。

以下是ffprobe对其中一个视频的说法：

╰─$ ffprobe test ffprobe version 2.6 Copyright (c) 2007-2015 the FFmpeg developers built with Apple LLVM version 6.0 (clang-600.0.57) (based on LLVM 3.5svn) configuration: --prefix=/usr/local/Cellar/ffmpeg/2.6_1 --enable-shared --enable-pthreads --enable-gpl --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-libx264 --enable-libmp3lame --enable-libvo-aacenc --enable-libxvid --enable-libvorbis --enable-libvpx --enable-libfaac --enable-nonfree --enable-vda libavutil 54. 20.100 / 54. 20.100 libavcodec 56. 26.100 / 56. 26.100 libavformat 56. 25.101 / 56. 25.101 libavdevice 56. 4.100 / 56. 4.100 libavfilter 5. 11.102 / 5. 11.102 libavresample 2. 1. 0 / 2. 1. 0 libswscale 3. 1.101 / 3. 1.101 libswresample 1. 1.100 / 1. 1.100 libpostproc 53. 3.100 / 53. 3.100 Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'test': Metadata: major_brand : qt minor_version : 512 compatible_brands: qt date : 2015-03-03T15:57:38-0800 date-eng : 2015-03-03T15:57:38-0800 encoder : Lavf56.25.101 Duration: 00:00:06.29, start: 0.000000, bitrate: 25699 kb/s Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x1080, 25862 kb/s, 59.98 fps, 60 tbr, 19200 tbn, 38400 tbc (default) Metadata: rotate : 180 handler_name : DataHandler encoder : H.264 Side data: displaymatrix: rotation of 180.00 degrees Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 63 kb/s (default) Metadata: handler_name : DataHandler

我已经用Google搜索过，并且没有找到任何关于此的信息或错误报告，因此我想知道这是否是我们遗漏或做错的事情。视频本身只通过ffmpeg运行以使其快速启动，因此我们可以对其进行流式传输 - 无需进行其他编码/转码。

我希望有一个更好的解决方案，而不是将旋转与视频一起返回并通过CSS进行转换 - 特别是因为它在Chrome和Safari中正确旋转。

谢谢！

Answer 1

您使用的.mp4包含旋转元数据。

我们还没有测试IE10，但IE11和Edge 12,13确实支持它。 Firefox 42（截至今日的最新版本）仍然不支持它。我们整理了一个支持旋转元数据的list of players（包括浏览器）。

我们能找到的唯一跨浏览器解决方案是：

1. 使用FFmpeg旋转视频（以便Firefox正确显示）
2. 删除元数据（以便其他浏览器不会旋转它）

图片由Rotation Metadata in Video Files Created by Mobile Devices

提供

Answer 2

只有https://stackoverflow.com/a/31416252/1295622上的答案转码可能是该问题的唯一解决方案。第一次测试工作正常，因此我们在工作流程中构建自动转码以避免错误的方向。

CSS或JS解决方案没有帮助，因为副作用就像错误定位的视频控件或旋转的视频方向正确。