h5 视频全屏-横屏实现，遇到问题以及解决方案

在H5中实现视频全屏或横屏，可以通过监听视频元素的resize事件来检测方向变化，并适当调整样式以实现全屏或横屏。以下是一个简单的示例代码：

HTML:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

CSS:

#myVideo {
  width: 100%;
  height: auto;
}
 
/* 横屏样式 */
.landscape {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

JavaScript:

const video = document.getElementById('myVideo');
 
function checkOrientation() {
  if (window.innerWidth > window.innerHeight) {
    video.classList.add('landscape');
  } else {
    video.classList.remove('landscape');
  }
}
 
// 初始检查
checkOrientation();
 
// 监听方向变化
window.addEventListener('resize', checkOrientation);

这段代码会在用户旋转设备时，检测窗口的宽高比例，并根据比例给视频元素添加或移除一个.landscape类。当类存在时，视频会以横屏全屏的方式显示，否则保持正常的纵屏模式。