webkit-playsinline 是 iOS 10 前私有属性，playsinline 是标准属性，需同时设置才能兼容各版本；未静音、无用户交互、CSS 变换、编码不支持等会导致内联失效；禁用全屏需监听 webkitbeginfullscreen 和 fullscreenchange 并调用对应退出方法。
video 标签的 webkit-playsinline 和 playsinline 有什么区别？
在 iOS Safari 上， 默认强制全屏播放，除非显式启用内联播放。早期 iOS（10 之前）只认 webkit-playsinline 这个私有属性；iOS 10+ 开始支持标准的 playsinline。两者必须同时写，否则在某些旧版微信 WebView 或 iOS 版本中会失效。
正确写法是：
注意：playsinline 是布尔属性，不写值（不是 playsinline="true"）；若用 JS 动态设置，应调用 video.setAttribute('playsinline', '')。
为什么加了 playsinline 还是跳全屏？
常见原因不是属性没加对，而是触发条件不满足：
立即学习“前端免费学习笔记（深入）”；
- 视频未设置
muted且首次自动播放被浏览器拦截（iOS 要求静音自动播才允许内联） - 用户未与页面交互（如点击）就调用
play()，Safari 会降级到全屏上下文执行 - 父容器 CSS 设置了
transform、perspective或will-change，导致 iOS 认为“非标准渲染环境”，禁用内联 - 视频格式或编码不被 Safari 支持（比如 HEVC 编码的 mp4 在部分 iOS 版本无法内联）
最稳妥的初始化方式：
如何用 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 上退出失败，视频卡在黑屏全屏状态。
