html video全屏横屏播放视频怎么实现

要在HTML中让`<video>`元素全屏并横屏播放视频，你可以结合CSS和JavaScript来实现。下面是一个基本步骤：

1. 首先，在HTML里添加`<video>`元素，并设置一些基础属性，如`src`、`controls`等：

<video id="myVideo" src="your_video.mp4" controls></video>

2. 然后，在CSS中隐藏默认的控制条（如果你不想显示），并设置宽度和高度为100%，以便适应屏幕：

#myVideo {
  display: none;
  width: 100%;
  height: 100%;
}

3. 使用JavaScript监听`fullscreenchange`事件，当视频进入全屏模式时，改变其样式以实现横屏。这通常需要检查设备的屏幕方向：

document.addEventListener('fullscreenchange', function() {
  var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
  
  if (isFullScreen) {
    // 当处于全屏时，切换到横屏模式
    // 这部分通常依赖于浏览器的支持，可以使用CSS `transform` 或者 JavaScript 来旋转视口
    // 例如，使用 CSS:
    // document.body.style.transform = 'rotateY(90deg)';
    
    // 或者使用 JS 和 CSS Flexbox (假设你的 HTML 结构支持):
    const container = document.getElementById('myVideo');
    container.parentNode.style.display = 'flex';
    container.style.flexDirection = 'column-reverse';
  } else {
    // 撤出全屏或恢复竖屏
    // ...这里处理退出全屏后的横屏恢复
  }
});

请注意，由于不同浏览器对全屏API的支持可能有差异，上述代码可能需要调整以兼容所有主流浏览器。