HTML5视频如何禁止全屏显示

大家好，我们又见面了啊~本文《HTML5视频禁止全屏方法详解》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

webkit-playsinline 是 iOS 10 前私有属性，playsinline 是标准属性，需同时设置才能兼容各版本；未静音、无用户交互、CSS 变换、编码不支持等会导致内联失效；禁用全屏需监听 webkitbeginfullscreen 和 fullscreenchange 并调用对应退出方法。

video 标签的 webkit-playsinline 和 playsinline 有什么区别？

在 iOS Safari 上， 默认强制全屏播放，除非显式启用内联播放。早期 iOS（10 之前）只认 webkit-playsinline 这个私有属性；iOS 10+ 开始支持标准的 playsinline。两者必须同时写，否则在某些旧版微信 WebView 或 iOS 版本中会失效。

正确写法是：

<video controls playsinline webkit-playsinline src="video.mp4"></video>

注意：playsinline 是布尔属性，不写值（不是 playsinline="true"）；若用 JS 动态设置，应调用 video.setAttribute('playsinline', '')。

为什么加了 playsinline 还是跳全屏？

常见原因不是属性没加对，而是触发条件不满足：

• 视频未设置 muted 且首次自动播放被浏览器拦截（iOS 要求静音自动播才允许内联）
• 用户未与页面交互（如点击）就调用 play()，Safari 会降级到全屏上下文执行
• 父容器 CSS 设置了 transform、perspective 或 will-change，导致 iOS 认为“非标准渲染环境”，禁用内联
• 视频格式或编码不被 Safari 支持（比如 HEVC 编码的 mp4 在部分 iOS 版本无法内联）

最稳妥的初始化方式：

<video id="myVideo" muted playsinline webkit-playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('myVideo').play()">播放</button>

如何用 JS 强制禁止全屏事件触发？

即使启用了内联，用户仍可手动点全屏按钮。若业务明确不允许（如嵌入式教学组件），可监听并阻止：

• webkitbeginfullscreen（iOS Safari）和 fullscreenchange（通用）是关键事件
• 不能靠 event.preventDefault() 拦截，需在事件触发后立刻退出
• 退出时要区分平台：iOS 用 webkitExitFullscreen()，其他用 exitFullscreen()

示例代码：

const video = document.getElementById('myVideo');

video.addEventListener('webkitbeginfullscreen', (e) => {
  e.preventDefault();
  if (document.webkitFullscreenElement) {
    document.webkitExitFullscreen();
  }
});

video.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === video || document.webkitFullscreenElement === video) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
});

安卓和桌面端还需要处理吗？

安卓 Chrome / Firefox 和桌面 Safari/Chrome 原生支持内联播放，playsinline 属性基本无影响；但要注意：

• Android WebView（尤其旧版）可能忽略 playsinline，需配合 android:hardwareAccelerated="true" 和 WebView.setWebContentsDebuggingEnabled(true) 排查
• 桌面端无法完全禁用全屏按钮 UI，但可通过 CSS 隐藏控制栏：video::-webkit-media-controls-fullscreen-button { display: none; }
• 隐藏按钮只是视觉屏蔽，快捷键（F 等）或右键仍可触发，真正禁用仍需 JS 监听 + 退出逻辑

跨平台最简兜底方案：始终监听 fullscreenchange，检测到 video 进入全屏就立刻退出 —— 这条逻辑在所有现代浏览器都有效，且不依赖平台特性。

别漏掉 webkitExitFullscreen 的兼容判断，很多项目只写了 exitFullscreen，结果 iOS 上退出失败，视频卡在黑屏全屏状态。

终于介绍完啦！小伙伴们，这篇关于《HTML5视频如何禁止全屏显示》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！