V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
EXDestroyer
V2EX  ›  HTML

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

  •  
  •   EXDestroyer ·
    exdestroyer · 2015-10-28 10:04:24 +08:00 · 7328 次点击
    这是一个创建于 3313 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    9 条回复    2015-10-28 16:00:46 +08:00
    learnshare
        1
    learnshare  
       2015-10-28 10:11:20 +08:00
    单纯旋转的话,可以使用 CSS 旋转 video 元素来实现,不过控制组件也会旋转。

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

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

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

    前端 video 标签只负责展示视频,不对视频的渲染作处理。
    paloalto
        4
    paloalto  
       2015-10-28 10:31:29 +08:00 via iPhone
    dirty 一点的做法是 js 判断视频的高宽比,然后 css 旋转,但这样会把视频的控制条也一起旋转了。如果本身隐藏了控制条,倒是可以考虑这么做。不过这样的确很 dirty 。
    EXDestroyer
        5
    EXDestroyer  
    OP
       2015-10-28 10:37:36 +08:00
    @paloalto 是的 是用户拍摄的视频出现这个问题
    learnshare
        6
    learnshare  
       2015-10-28 10:54:03 +08:00
    @EXDestroyer 这就是正常的显示方向
    holystrike
        7
    holystrike  
       2015-10-28 10:57:43 +08:00
    视频元数据里有没有 orientation 信息?
    有的话就可以转码旋转输出
    SourceMan
        8
    SourceMan  
       2015-10-28 11:12:33 +08:00
    千万不要让前端做太多的事,你只负责把处理好的视频能播放出来就可以了
    EXDestroyer
        9
    EXDestroyer  
    OP
       2015-10-28 16:00:46 +08:00
    @holystrike 前端怎么获取 orientation 信息
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3533 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:25 · PVG 12:25 · LAX 20:25 · JFK 23:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.