Firefox和IE中的MP4视频不符合旋转 [英] MP4 videos in Firefox and IE not respecting rotation
问题描述
我们有一个网页，在< video> 标签中播放快速入门MP4 - 非常简单，在Chrome和Safari中效果很好。然而，似乎Firefox 36和IE10不符合视频的旋转，所以他们最终可以颠倒或旋转90 *。
We have a webpage that plays back a faststart MP4 in a <video> tag - pretty simple, and it works great in Chrome and Safari. However, it seems as though Firefox 36 and IE10 are not respecting the rotation of the video, so they end up playing either upside down or rotated 90*.
这是什么 ffprobe 说到其中一个视频：
Here is what ffprobe says about one of the videos:
╰ - $ ffprobe测试
ffprobe版本2.6版权所有（c）2007-2015 FFmpeg开发人员
搭配Apple LLVM 6.0版（clang-600.0.57）（基于LLVM 3.5svn）
配置： 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
从'test'输入＃0，mov，mp4，m4a，3gp，3g2，mj2：
元数据：
major_brand：qt
minor_version：512
compatible_brands：qt
日期：2015-03-03T15：57：38-0800
date-eng：2015-03-03T15：57：38-0800
编码器：Lavf56.25.101
持续时间：00：00：06.29，开始：0.000000，比特率：25699 kb / s
流＃0：0（eng）：视频：h264（高）（avc1 / 0x31637661），yuv420p（tv，bt709），1920x1080,25862 kb / s，59.98 fps，60 tbr，19200 tbn，38400 tbc（默认值）
元数据：
rotate：180
handler_name ：DataHandler
编码器：H.264
边数据：
displaymatrix：旋转180.00度
流＃0：1（eng）：音频：aac （LC）（mp4a / 0x6134706D），44100 Hz，mono，fltp，63 kb / s（默认）
元数据：
handler_name：DataHandler
我已经Google搜索，没有找到任何有关这方面的信息或错误报告，所以我想知道这是否是我们遗漏或做错了。视频本身只是通过ffmpeg来运行，使其快速启动，所以我们可以流式传输 - 没有其他编码/转码完成。
I've Googled around and haven't found any information or bug reports on this, so I'm wondering if it's something we're missing or doing wrong. The video itself is only run through ffmpeg to make it faststart so we can stream it - no other encoding/transcoding is done.
我希望有一个更好的解决方案在视频中返回旋转并通过CSS进行转换 - 特别是因为它在Chrome和Safari中正确旋转。
I'm hoping there's a better solution than to return the rotation alongside the video and transform it via CSS - especially because it's rotated properly in Chrome and Safari.
谢谢！
推荐答案
您正在使用的.mp4包含旋转元数据。
The .mp4 you're using contains rotation metadata.
我们还没有测试IE10，但IE11和Edge 12,13确实支持它。 Firefox 42（今天最新版本）仍然不支持。我们已经组织了一个玩家名单 （包括浏览器）支持旋转元数据。
We haven't tested IE10, but IE11 and Edge 12,13 do support it. Firefox 42 (latest version as of today) still does not support it. We've put together a list of players (including browsers) that do support the rotation metadata.
我们可以找到的唯一跨浏览器解决方案是：
The only cross-browser solution we could find was to:
- 使用FFmpeg旋转视频（以便Firefox正确显示）
- 删除元数据（以便其他浏览器做不转动）
这篇关于Firefox和IE中的MP4视频不符合旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
