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

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 */

}