HTML5的video标签对视频的播放方向是如何处理的？

Question

在手机上录制的视频有些是横屏的有些是竖屏的，我发现使用video标签播放的时候横屏的视频有时候会变成竖屏播放，即使设置了宽高。这个播放方向是如何确定的

Answer 1

先说一个场景
随便在微信打开一个带有视频的文章 你点击视频 视频播放 你把手机翻转变成横屏
你期望的结果是视频边横屏 并且 全屏 但实际当前视窗 已经横屏不知道哪里去了 视频还是在那个小窗口里播放

video标签本身不具备响应横竖屏的事件

能捕获横竖屏方向的事件和方法

1. window.orientation属性与onorientationchange事件

2. resize监听 通过计算来判断

3. css媒体查询

/* 竖屏 */
@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* 横屏 */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

Answer 2

怎么设置不让他自动变向的