Chrome HTML5视频侧身翻转肖像

Aar*_*egh 10 html5 google-chrome html5-video

我正在建立一个网站来显示从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

我已经尝试过使用vanilla HTML5标记,现在已经添加了VideoJS,尽管这个问题没有任何区别.

更新:我现在对我的问题有半个答案.看来设备上需要设置一些编码选项,以确保所有观众都能正确定位,包括VLC和Chrome(例如).这个问题没有得到答案,所以我创建了一个新问题.希望我们能为这个问题拼凑出合适的解决方案!

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

net*_*eet 5

请参阅videojs支持论坛上的这篇文章,该帖子暗示它可能与iPhone编码视频的方式有关,因为它包含了QuickTime可以读取但其他玩家无法读取的信息.建议您使用AVFoundation在iOS上编码视频并旋转它.据推测,其他一些标准编码库也可以使用.


MTC*_*ter 5

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

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

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

您现在可能需要删除旋转元数据标签,以便 Safari 不会进一步旋转视频。再说一次,我还没有测试过这个。