手机投屏电视不是全屏的主因是视频分辨率不足、设备比例不匹配（如手机20:9 vs 电视16:9）及未开启手机旋转功能；需结合协议兼容性（AirPlay/Miracast/DLNA）与电视设置调整。
全屏播放时视频被投屏的底层原因
浏览器全屏（requestFullscreen()）和投屏（Chromecast、AirPlay）是两套独立机制。全屏只是让 元素占满视口，但不阻止系统级媒体路由——只要页面里有可识别的媒体源（如带 src 或 MediaSource 的 ），iOS 的 AirPlay 按钮或 Chrome 的投屏菜单就可能自动出现。
禁用 AirPlay 和 Chromecast 的 HTML 属性
最直接有效的方式是在 标签上显式关闭投屏入口：
-
webkit-playsinline="1"：让 iOS Safari 在行内播放（避免进入原生全屏，间接抑制 AirPlay 按钮） -
x5-playsinline="1"和x5-video-player-type="h5"：针对微信/QQ 内置浏览器（X5 内核） -
disablePictureInPicture：禁用画中画（虽非投屏，但常被误点，且部分安卓浏览器会联动隐藏投屏按钮） -
controlsList="nodownload noplaybackrate nofullscreen"：隐藏原生控件中的投屏按钮（Chrome 78+ 支持，对noairplay无效，但能压制部分 UI 入口）
完整示例：
<video controlslist="nodownload noplaybackrate nofullscreen" disablepictureinpicture webkit-playsinline x5-playsinline x5-video-player-type="h5"><source src="video.mp4" type="video/mp4"></source></video>
JavaScript 阻断投屏触发的兼容性处理
仅靠 HTML 属性不能 100% 拦截所有场景（比如用户手动打开系统投屏菜单后选择当前标签页）。此时需结合 JS 检测并干预：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
webkitbeginfullscreen/webkitendfullscreen（Safari）和fullscreenchange（通用），在进入全屏后立即调用video.pause()+video.play()可打断部分投屏握手流程 - 检测
navigator.userAgent中是否含Macintosh.*AppleWebKit或Windows NT.*Edge，对高风险环境额外设置video.setAttribute('x5-video-player-fullscreen', 'false') - 避免使用
MediaSource动态加载流——这类源在 Chrome 中更容易被识别为“可投屏媒体”，改用普通src或blob:URL 更稳妥
为什么 disableRemotePlayback 大多无效
disableRemotePlayback="true" 是 W3C 标准属性，理论上应禁用投屏，但实际支持极差：
- Chrome 直到 v120 才开始实验性支持，且仅对
MediaStream类型生效，对src视频完全忽略 - Safari 完全不识别该属性；Firefox 未实现
- 即使生效，它只隐藏按钮，不阻止已建立的投屏会话（比如用户已在投屏中，再刷新页面）
所以别依赖它，把它当装饰属性即可。
真正起作用的是组合策略：HTML 属性压制 UI 入口 + JS 干预播放状态 + 避开易触发投屏的媒体加载方式。最麻烦的一环其实是微信——X5 内核行为不透明，必须同时写齐 x5-* 属性，漏一个都可能在某个安卓机型上失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
