MP4 videos in Firefox and IE not respecting rotati

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*.

Here is what ffprobe says about one of the videos:

╰─$ 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

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.

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.

Thanks!

回答1:

The .mp4 you're using contains rotation metadata.

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:

rotate the video using FFmpeg (so that Firefox shows it properly)
remove the metadata (so that other browsers do not rotate it)

Image courtesy of Rotation Metadata in Video Files Created by Mobile Devices

回答2:

Only transcoding like the answer on https://stackoverflow.com/a/31416252/1295622 is probably the one and only solution for that issue. First test works fine, so we build in an automatic transcoding in our workflow to avoid wrong orientations.

CSS- or JS-solutions are not helpful because side effects like wrong positioned video controls or rotated videos with correct orientations.