Chrome HTML5 视频横向翻转纵向

Posted 2023-03-05

【中文标题】Chrome HTML5 视频横向翻转纵向

【英文标题】：Chrome HTML5 Video Flipping Portrait Sideways

【发布时间】：2012-09-11 07:10:45

【问题描述】：

我正在建立一个网站来显示从 iPhone 录制的视频。视频采用纵向，288x352。 Safari 可以很好地显示此视频，但在 Chrome 中，视频被翻转为横向模式，352x288。我的头偏向一边。 :-(

这里是有问题的页面： http://aaron.tiberiuslog.com/B4F4CC56-172E-4D84-9656-BE04E6E475A0

如果有帮助，这就是视频本身。

http://tiberiuslog.s3.amazonaws.com/output_D7DB78A9-8019-4D09-9B22-EB8738F844BB-2380-000001530B13BE09.mov

我尝试过使用原生 html5 标记，现在添加了 VideoJS，尽管它对这个问题没有任何影响。

更新：我现在对我的问题有了一半的答案。似乎需要在设备上设置一些编码选项，以确保所有查看器都尊重正确的方向，包括 VLC 和 Chrome（例如）。这个问题没有足够的能力得到答案，所以I've created a new one。希望我们能针对这个问题找到合适的解决方案！

更新 2：我找到了答案！ The other question I posted led me to the technique for correctly encoding the video on ios.

【参考方案1】：

请参阅 videojs 支持论坛上的this post，这表明这可能取决于 iPhone 编码视频的方式，因为它包含 QuickTime 可以读取但其他播放器不能读取的信息。建议您在 iOS 上使用 AVFoundation 对视频进行编码并旋转它。大概其他一些标准编码库也可以工作。

【讨论】：

我猜你得到了部分功劳，但这对我来说还不是一个完整的解决方案。我可以看到它与 AVFoundation 编码视频的方式有什么关系，但我不知道如何更改它。我想这意味着我正在研究另一个问题。 :-(

【参考方案2】：

这有点难看，但您可以将-webkit-transform:rotate(90deg); 添加到video 标记的style 属性中。但是，这也会旋转您的控件。

我刚刚通过 VLC 播放器从 AWS 流式传输视频，视频似乎逆时针旋转了 90 度。 Apple 使用元数据标志来指示旋转，而不是简单地以不同的方向录制视频。不幸的是，许多播放器/浏览器会忽略此标志，包括 VLC 和 Chrome。

要解决此问题，您需要旋转实际的视频文件。您可以通过在 VLC 播放器中打开它来执行此操作，转到 Tools > Effects and Filters。点击Video Effects，然后点击Geometry。启用Transform 并从下拉菜单中选择Rotate by 90 degrees。单击OK 然后关闭 VLC。视频现在应该已经准备好了，尽管我无法在您的页面上对其进行测试。

您现在可能需要移除旋转元数据标签，以便 Safari 不会进一步旋转视频。同样，我还没有对此进行测试。

【参考方案3】：

此问题已于 2016 年 6 月 2 日修复。请参阅 firefox 错误here。这个问题不是 Iphone 如何编码视频，而是与支持 mp4 文件的 firefox 有关，但与 mp4 文件中的方向元数据无关。

无论如何，可以使用exiftool -Rotation video.mp4检查视频文件是否有旋转

注意： 对于仍然看到此问题的任何人，此更新尚不可用，因为我的最新更新未正确自动定位视频。仔细一看，bug 页面说目标是 mozilla49。