用手机横着录制了一段视频，放到播放器上发现视频竖过来了。
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:
可以给你个思路，具体能不能用我就不知道了。
判断设备是纵向还是横向：
纵向：@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 */