如何在Android设备上复刻iOS无playsinline属性时的视频自动全屏行为

核心结论 #

• 不存在纯HTML标签属性的简化实现路径：iOS设备会在视频缺失playsinline属性时，默认在用户点击播放后自动进入全屏，但Android系浏览器、WebView没有内置这套兜底逻辑，无法靠加个属性就复刻和iOS完全一致的行为。
• 整套对齐逻辑不需要复杂代码，用几十行轻量JavaScript就能实现，兼容绝大多数Android端的主流浏览器和WebView版本。

具体实现方法 #

要做到和iOS原生行为完全统一（即无playsinline的视频点击播放自动全屏，有playsinline的视频保持内联小窗播放），只需要在页面初始化时绑定统一的事件监听即可：

1. 通过用户代理字符串判断当前访问环境为Android，避免干扰iOS设备的原生播放逻辑
2. 遍历页面内所有video元素，绑定统一的play播放事件监听
3. 视频触发播放时先检查标签是否带有playsinline属性，有该属性的视频直接放行，保持小窗播放
4. 对没有该属性的视频，主动调用兼容多内核的全屏API，触发全屏播放

参考实现代码 #

// 识别Android设备运行环境
const isAndroid = /Android/i.test(navigator.userAgent);
if (isAndroid) {
  document.querySelectorAll('video').forEach(videoEl => {
    videoEl.addEventListener('play', async () => {
      // 和iOS的判断逻辑保持一致：标记了playsinline的视频不强制全屏
      if (videoEl.hasAttribute('playsinline')) return;
      try {
        // 兼容不同Android内核的全屏方法前缀
        const enterFullscreen = videoEl.requestFullscreen 
          || videoEl.webkitRequestFullscreen 
          || videoEl.webkitEnterFullscreen;
        if (enterFullscreen) {
          await enterFullscreen.call(videoEl);
        }
      } catch (err) {
        // 全屏触发失败时不阻塞视频的正常播放流程
      }
    })
  })
}

常见注意事项 #

• 浏览器安全策略要求全屏动作必须绑定用户交互触发的流程，绑定play事件的时机刚好对应用户点击播放按钮的交互链路，不会被浏览器拦截、触发权限报错。
• 不需要额外为iOS环境写判断逻辑：iOS本身就具备「无playsinline自动全屏」的原生能力，加上UA判断后，JS代码也不会和iOS的原生逻辑产生冲突。
• 部分国内厂商定制的Android浏览器可能存在全屏API权限限制，通过异常捕获做兜底即可，不会影响页面整体运行稳定性。

内容的提问来源于stack exchange，提问作者frownyface