FireFox上的视频方向不正确

Question

我有视频的html5视频标签。 在Chrome上一切都很好，在Firefox上，风景视频的方向是错误的......

即使尝试使用video.js，也没有变化。

我读到这是一个问题，因为视频来自iOS。

所以有2个问题： 1.我怎样才能克服这个问题。真的没有解决方案吗？ 2.（出于好奇） - 铬如何克服这个问题？

网址示例（在章节中向下滚动以查看垂直视频）：
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22

Answer 1

  

我读到这是一个问题，因为视频来自iOS。

使用移动设备录制的所有视频都将包含旋转元数据，包括来自iOS和Android设备的视频。可能需要4个值：0（向左倾斜），90（纵向） ），180和270：

  

在Chrome上一切都很好，在Firefox上，风景视频的方向是错误的......

Firefox和IE 10是唯一不支持轮播元数据的主要浏览器。这里的Firefox与Chrome相比：

最新版本，截至今日的Firefox 42仍然不支持它。 IE11和Edge 12,13确实支持它。

支持轮换信息的移动/桌面播放器列表：https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/

  

我怎样才能克服这个问题。真的没有解决方案吗？

有关解决方案，请参阅this answer，基本上您需要：

1. 使用FFmpeg旋转视频（因此Firefox和其他不支持旋转元数据的浏览器会正确显示视频）
2. 移除轮播元数据（以便其他玩家不会旋转视频，因为它已经被FFmepg旋转了）

图片提供：https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/

Answer 2

我猜Chrome是尊重width="360"标签的height="640"和<video>属性，而Firefox则不然。如果我下载了您的某个视频并在Media Player Classic中播放，则说明方向不正确。但就像在网络浏览器中一样，存在不一致性：在VLC播放器中打开的同一视频以正确的方向播放。

如果可以的话，我建议您使用名为AVIdemux的（免费）程序重新编码视频。我刚刚在你的一个视频上试过它，并且只需很少的努力就能很好地工作。作为奖励，它大大缩小了你的视频，只有极少的质量损失。

以下是步骤：

1. 从http://www.fosshub.com/Avidemux.html
下载AVIdemux
2. 安装并运行AVIdemux
3. 转到“文件”菜单，然后选择“打开”。选择要重新编码的视频。
4. 转到视频菜单，然后选择过滤器
5. 选择转换＆gt;旋转（双击）＆gt;旋转270度（OK）
6. 单击“预览”按钮以检查输出
7. 单击“关闭”按钮
8. 在主窗口的“视频输出”下，选择“MPEG4-AVC（x264）
”
9. 在“输出格式”下，选择“MP4 Muxer”
10. 单击“保存视频”图标，然后在结果窗口中键入文件名，然后单击“保存”按钮。

然后您需要重新上传视频。

Answer 3

由于问题出在一些 iOS特定的编码选项，许多非Apple播放器无法读取，我能想到的最简单的解决方案是转码和旋转视频

已经在网上讨论了很多这样的帖子，而且这里有SO ......例如：

Video orientation using video.js

HTML5 mp4 video with firefox resizing video

Chrome HTML5 Video Flipping Portrait Sideways

http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong

Answer 4

可能不是真正可行的解决方案，而是添加CSS规则，例如

video {
 -moz-transform: rotate(90deg);
}

至少会让视频在Firefox中以正确的方向播放。问题：

• 在没有规则的情况下以正确方向播放的视频将使用规则以错误的方向播放

• 视频控件也会轮换

• 海报将以错误的方向显示

我看到您的网站使用了video.js.可能值得一看https://github.com/xbgmsharp/videojs-rotatezoom？