问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

<video>视频文件有方向怎么处理？

头像
利维坦少女
    3.4k96886

    用手机横着录制了一段视频，放到播放器上发现视频竖过来了。

    mediainfo:

    概要
完整名称                                     : E:\ownCloud\draft\20160720\2016-07-21_01-01-29_41347700.mp4
文件格式                                     : MPEG-4
格式简介                                     : Base Media / Version 2
编码设置ID                                   : mp42 (mp41/mp42/isom)
文件大小                                     : 325 KiB
长度                                       : 6秒 0ms
平均混合码率                                   : 443 Kbps
编码日期                                     : UTC 2016-07-20 10:44:46
标记日期                                     : UTC 2016-07-20 10:44:46

视频
ID                                       : 2
文件格式                                     : AVC
文件格式/信息                                  : Advanced Video Codec
格式简介                                     : High@L1.3
格式设置, CABAC                              : 是
格式设置, ReFrames                           : 2 frames
编码设置ID                                   : avc1
编码设置ID/信息                                : Advanced Video Coding
长度                                       : 6秒 0ms
码率                                       : 386 Kbps
画面宽度                                     : 240像素
画面高度                                     : 320像素
画面比例                                     : 0.750
Rotation                                 : 90°
帧率模式                                     : 可变
帧率                                       : 30.000 fps
最小帧率                                     : 28.571 fps
最大帧率                                     : 35.294 fps
色彩空间                                     : YUV
色度抽样                                     : 4:2:0
位深度                                      : 8位
扫描方式                                     : 逐行扫描
bits/(pixel*frame)(数据密度)                 : 0.168
大小                                       : 283 KiB (87%)
标题                                       : Core Media Video
编码日期                                     : UTC 2016-07-20 10:44:46
标记日期                                     : UTC 2016-07-20 10:44:46
colour_range                             : Limited
颜色初选                                     : BT.709
传输特质                                     : BT.709
矩阵系数                                     : BT.601

音频
ID                                       : 1
文件格式                                     : AAC
文件格式/信息                                  : Advanced Audio Codec
格式简介                                     : LC
编码设置ID                                   : 40
长度                                       : 6秒 0ms
Source_Duration/String                   : 6秒 107ms
码率模式                                     : CBR
码率                                       : 50.8 Kbps
额定码率                                     : 64.0 Kbps
声道                                       : 2声道
Channel(s)_Original                      : 1声道
声道位置                                     : Front: C
采样率                                      : 44.1 KHz
帧率                                       : 43.066 fps (1024 spf)
压缩模式                                     : 有损压缩
大小                                       : 37.2 KiB (11%)
Source_StreamSize/String                 : 37.9 KiB (12%)
标题                                       : Core Media Audio
编码日期                                     : UTC 2016-07-20 10:44:46
标记日期                                     : UTC 2016-07-20 10:44:46

    能看到有旋转90度。

    之后用<video>标签写了段html代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <p>
            video:
        </p>
        <video src="http://192.168.214.130/2016-07-21_01-01-21_45791600.mp4" controls></video>
        <p>
            video2:
        </p>
        <video src="http://192.168.214.130/2016-07-21_01-01-29_41347700.mp4" controls></video>
        <p>
            end
        </p>
    </body>
</html>

    之后用浏览器查看。
    PC端：IE、Firefox都是竖着的，但Chrome却自动转为横着的了。

    手机端：Adblock Browser是竖着的（抱歉我手机上就这么一个正经浏览器），微信是横着。

    我查了mdn，<video>标签貌似没有处理视频方向的方法。谷歌也没搜到靠谱的办法。好像现有解决办法就是引入第三方js播放器。
    有什么办法能让这种带方向的视频统一显示吗？
    需要兼容手机，最好是html5、css的原生方法。

    补充1：
    用了transform: rotate，这什么鬼，不仅内容旋转了，连控件都旋转了……
    IE:
    图片描述

    视频html5csscanvas
    阅读 10.8k
    1 个回答
    得票最新
    头像
    ivanilla
      2.8k54053

      可以给你个思路，具体能不能用我就不知道了。

      判断设备是纵向还是横向：

      纵向：@media all and (orientation : landscape)
横向：@media all and (orientation : portrait)

      强制横屏：在判断是纵向之后加入：

      transform: rotate(90deg);
transform-origin: left bottom;
-ms-transform: rotate(90deg); /* Internet Explorer 9 */
-ms-transform-origin: left bottom; /* Internet Explorer 9 */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin: left bottom; /* Firefox */
-webkit-transform: rotate(90deg); /* Safari & Chrome */
-webkit-transform-origin: left bottom; /* Safari & Chrome */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: left bottom; /* Opera */
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题