HTML5 中的 video 标签是如何进行旋转设置的?

2015-10-28 10:04:24 +08:00
 EXDestroyer

使用 video 标签的时候,有些在手机录制的视频会被旋转,这个是如何进行识别和控制的?

7362 次点击
所在节点    HTML
9 条回复
learnshare
2015-10-28 10:11:20 +08:00
单纯旋转的话,可以使用 CSS 旋转 video 元素来实现,不过控制组件也会旋转。

video 没办法识别视频的方向,一般得靠人来做。
EXDestroyer
2015-10-28 10:24:27 +08:00
@learnshare 那么在手机上横屏拍摄的视频在页面上变成了竖屏是什么原因呢
paloalto
2015-10-28 10:28:47 +08:00
是用户手机拍了视频传到网上 然后前端展示视频的时候发现有这个问题吗?

我没写过视频上传的处理程序,但觉得应该由后端处理。

跟上传图片差不多,以前遇到过用户相机拍的照片上传后被自动旋转的问题,后端(当时用的 python )可以根据判断图片的某个值来知道图片是横的还是竖的,在后端重新存一下正常了。

前端 video 标签只负责展示视频,不对视频的渲染作处理。
paloalto
2015-10-28 10:31:29 +08:00
dirty 一点的做法是 js 判断视频的高宽比,然后 css 旋转,但这样会把视频的控制条也一起旋转了。如果本身隐藏了控制条,倒是可以考虑这么做。不过这样的确很 dirty 。
EXDestroyer
2015-10-28 10:37:36 +08:00
@paloalto 是的 是用户拍摄的视频出现这个问题
learnshare
2015-10-28 10:54:03 +08:00
@EXDestroyer 这就是正常的显示方向
holystrike
2015-10-28 10:57:43 +08:00
视频元数据里有没有 orientation 信息?
有的话就可以转码旋转输出
SourceMan
2015-10-28 11:12:33 +08:00
千万不要让前端做太多的事,你只负责把处理好的视频能播放出来就可以了
EXDestroyer
2015-10-28 16:00:46 +08:00
@holystrike 前端怎么获取 orientation 信息

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/231624

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX