在微信内置浏览器中防止视频自动全屏，需同时设置playsinline和webkit-playsinline属性，强制静音（muted），并添加x5-video-player-type="h5"等微信专属属性以启用同层H5播放器。
在微信内置浏览器中防止视频自动全屏，核心是让 在页面内嵌播放，而不是跳转到原生全屏界面。这需要同时满足 HTML 属性、静音策略和微信特有兼容要求。
必须加的两个关键属性
仅写 playsinline 不够，iOS 旧版本和微信 WebView 都依赖以下组合：
- playsinline：标准 HTML5 属性，声明内联播放意图
- webkit-playsinline：iOS Safari（尤其是 iOS 10–12）及微信 WebView 的必需兼容属性
二者都写在 标签上，不赋值，例如：
静音（muted）是硬性前提
iOS 和微信对自动播放限制极严。即使不设 autoplay，只要想实现点击即内联播放，也强烈建议加 muted：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 有
muted才允许autoplay自动触发（否则 Safari 直接拦截） - 无
muted时，用户首次点击播放仍可能被强制全屏（尤其微信） - 若需带声音，必须由用户手势（如 click/touchstart）明确触发
play()，且不能在异步回调中调用
微信专属优化：启用同层 H5 播放器
微信 WebView 提供了专有属性，能进一步确保视频渲染在网页层，避免遮挡、黑边或广告干扰：
- x5-video-player-type="h5"：强制使用同层 H5 播放器（非系统级）
- x5-video-player-fullscreen="true"（可选）：声明支持全屏，让微信把标题栏高度纳入视口计算，避免上下黑块
- x5-video-orientation="portrait"（可选）：控制横竖屏行为，默认竖屏
这些属性需在 标签初始渲染时就存在，动态添加无效。
CSS 与交互辅助项
属性到位后，再补几个小细节提升稳定性：
- 给
设置width: 100%; height: 100%; object-fit: cover;，防布局抖动 - 加
object-position: center，避免裁剪偏移 - 如需隐藏默认控件，用
controls="false"；若要禁右键，加oncontextmenu="return false" - 背景视频场景下，务必加
loop和muted，并用poster提供首帧占位图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
