Chrome HTML5视频翻转纵向侧边



我正在构建一个网站来显示从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(例如)。这个问题无法得到答案,所以我创建了一个新问题。希望我们能为这个问题找到合适的解决方案!

更新2:我发现了答案!我发布的另一个问题让我了解了在iOS上正确编码视频的技术。

在videojs支持论坛上看到这篇文章,这表明这可能取决于iPhone编码视频的方式,因为它包含QuickTime可以读取但其他玩家无法读取的信息。建议您使用AVFoundation在iOS上对视频进行编码并旋转。可能其他标准编码库也可以工作。

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

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

若要解决此问题,您需要旋转实际的视频文件。您可以在VLC Player中打开它,转到Tools > Effects and Filters。单击Video Effects,然后单击Geometry。启用Transform,然后从下拉菜单中选择Rotate by 90 degrees。单击OK,然后关闭VLC。视频现在应该已经准备好了,尽管我不能在你的页面上测试它。

您现在可能需要删除旋转元数据标记,以便Safari不会进一步旋转视频。再说一遍,我还没有对此进行测试。

此问题已于2016年6月2日解决。请在这里参考萤火虫虫。这个问题不是Iphone如何编码视频,而是与支持mp4文件的firefox有关,但与mp4文件中的方向元数据无关。

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

注意:对于仍然看到此问题的任何人来说,此更新还不可用,因为我的最新更新没有正确地自动调整视频方向。仔细看,错误页面显示目标是mozilla49。

最新更新