修改css设置videojs移动端全屏时横屏播放

要在移动端使用video.js时，实现全屏时横屏播放效果，您可以使用以下CSS和JavaScript代码：

首先，将video.js的全屏按钮的样式设置为隐藏，以防止用户手动点击进入全屏模式：

/* 隐藏video.js的全屏按钮 */
.vjs-fullscreen-control {
  display: none !important;
}

然后，使用JavaScript代码监听video.js的全屏事件`fullscreenchange`，在进入全屏模式时强制将屏幕旋转为横屏模式：

var player = videojs('my-video');

player.ready(function() {
  player.on('fullscreenchange', function() {
    if (player.isFullscreen()) {
      // 进入全屏模式时旋转屏幕
      if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('landscape');
      } else if (screen.lockOrientation) {
        screen.lockOrientation('landscape');
      }
    }
  });
});

在这个示例中，我们使用`.vjs-fullscreen-control`样式将video.js的全屏按钮隐藏。然后，使用JavaScript代码监听video.js的全屏事件，并在进入全屏模式时将屏幕旋转为横屏模式。

请注意，这种方法可能在不同的移动设备和浏览器中有所差异，并且某些设备和浏览器可能不支持自动旋转屏幕。因此，在实际使用时，最好进行兼容性测试并提供备用方案。另外，还需要确保在使用video.js之前已经将video元素添加到HTML文档中，并正确初始化了video.js播放器。