HTML5 中的 video 标签是如何进行旋转设置的？
EXDestroyer · exdestroyer · 2015-10-28 10:04:24 +08:00 · 7313 次点击这是一个创建于 3301 天前的主题，其中的信息可能已经有所发展或是发生改变。
使用 video 标签的时候，有些在手机录制的视频会被旋转，这个是如何进行识别和控制的？
 |
1
learnshare 2015-10-28 10:11:20 +08:00
单纯旋转的话，可以使用 CSS 旋转 video 元素来实现，不过控制组件也会旋转。
video 没办法识别视频的方向，一般得靠人来做。 |
 |
2
EXDestroyer OP @learnshare 那么在手机上横屏拍摄的视频在页面上变成了竖屏是什么原因呢
|
 |
3
paloalto 2015-10-28 10:28:47 +08:00 via iPhone
是用户手机拍了视频传到网上 然后前端展示视频的时候发现有这个问题吗？
我没写过视频上传的处理程序，但觉得应该由后端处理。 跟上传图片差不多，以前遇到过用户相机拍的照片上传后被自动旋转的问题，后端（当时用的 python ）可以根据判断图片的某个值来知道图片是横的还是竖的，在后端重新存一下正常了。 前端 video 标签只负责展示视频，不对视频的渲染作处理。 |
|
4
paloalto 2015-10-28 10:31:29 +08:00 via iPhone
dirty 一点的做法是 js 判断视频的高宽比，然后 css 旋转，但这样会把视频的控制条也一起旋转了。如果本身隐藏了控制条，倒是可以考虑这么做。不过这样的确很 dirty 。
|
|
5
EXDestroyer OP @paloalto 是的 是用户拍摄的视频出现这个问题
|
|
6
learnshare 2015-10-28 10:54:03 +08:00
@EXDestroyer 这就是正常的显示方向
|
 |
7
holystrike 2015-10-28 10:57:43 +08:00
视频元数据里有没有 orientation 信息？
有的话就可以转码旋转输出 |
 |
8
SourceMan 2015-10-28 11:12:33 +08:00
千万不要让前端做太多的事，你只负责把处理好的视频能播放出来就可以了
|
|
9
EXDestroyer OP @holystrike 前端怎么获取 orientation 信息
|
Select Language