如何用JS实现网页全屏视频自动切换并锁定横屏（兼容安卓iOS）

这个需求是可行的，但必须依赖用户主动交互触发（比如点击按钮）——浏览器出于安全和用户体验考虑，不允许无交互情况下修改屏幕方向。下面是具体实现方案和兼容细节：

核心逻辑 #

监听视频的全屏状态变化，进入全屏时调用屏幕方向API锁定横屏，退出全屏时解锁方向。

代码实现 #

1. 基础HTML #

<button id="playFullscreenBtn">打开全屏视频</button>
<video id="targetVideo" src="your-video-source.mp4" controls></video>

2. JavaScript处理 #

const playBtn = document.getElementById('playFullscreenBtn');
const video = document.getElementById('targetVideo');

// 切换全屏并处理方向锁定
playBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen().then(() => {
      lockToLandscape();
    }).catch(err => {
      console.error('全屏请求失败:', err);
    });
  } else {
    document.exitFullscreen().then(() => {
      unlockOrientation();
    });
  }
});

// 监听全屏状态变化（覆盖用户手动切换全屏的情况）
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === video) {
    lockToLandscape();
  } else {
    unlockOrientation();
  }
});

// 锁定横屏
function lockToLandscape() {
  // 兼容不同浏览器的API前缀
  const lockFn = screen.orientation?.lock ||
                 screen.mozLockOrientation ||
                 screen.msLockOrientation;
  
  if (lockFn) {
    lockFn.call(screen, 'landscape').catch(err => {
      console.error('横屏锁定失败:', err);
      // 针对不支持的浏览器/iOS低版本，给出提示
      alert('请手动将屏幕旋转为横屏以获得最佳观看体验');
    });
  } else {
    alert('当前浏览器不支持自动锁定横屏，请手动旋转屏幕');
  }
}

// 解锁屏幕方向
function unlockOrientation() {
  const unlockFn = screen.orientation?.unlock ||
                   screen.mozUnlockOrientation ||
                   screen.msUnlockOrientation;
  unlockFn?.call(screen);
}

兼容细节 #

Android端 #

• 现代Chrome、Firefox等主流浏览器均支持screen.orientation API，但页面需为HTTPS协议（本地localhost不受限）。
• 部分国产浏览器可能需要额外测试，确保API调用正常。

iOS端 #

• iOS 16+ 的Safari才支持screen.orientation.lock()，低于该版本无法自动锁定，只能提示用户手动旋转。
• 注意：iOS Safari中视频进入全屏后会切换到系统原生播放器，此时网页脚本无法控制系统播放器的屏幕方向——这种情况下建议在用户点击全屏按钮时先尝试锁定方向，再打开全屏。
• 所有操作必须由用户交互触发，否则权限请求会被浏览器拦截。

关键限制 #

• 必须通过用户点击/触摸等交互触发，无交互的自动操作会被浏览器拒绝。
• 线上页面需使用HTTPS协议，否则无法调用屏幕方向API。
• 不同浏览器的API前缀差异需要做兼容处理。

内容的提问来源于stack exchange，提问作者havremjölk