原生alert对话框不支持嵌入视频，必须使用自定义DOM弹层实现；通过document.createElement创建遮罩层和video元素，动态插入并控制播放，注意autoplay需muted、路径规范及事件分离以确保兼容性与安全性。
警告对话框里不能嵌入视频
浏览器原生的 alert() 对话框是纯文本界面，不支持 HTML、CSS 或任何多媒体内容。试图在 alert("...") 里写 <video></video> 标签，只会显示为原始字符串，甚至可能被截断或报错。
常见错误现象：调用 alert("<video src="a.mp4"></video>") 后弹出的只是那一长串字符，不是播放器；或者控制台报 Invalid or unexpected token（因为引号嵌套混乱）。
真正能插入视频的，必须是自定义 DOM 弹层——也就是用 <div> 模拟对话框，再把 <code><video></video> 插进去。
用 document.createElement 动态插入带视频的弹层
这是最轻量、不依赖框架的实现方式。核心是创建容器、插入视频元素、控制显隐，而非调用原生警告函数。
立即学习“前端免费学习笔记（深入）”；
- 先用
document.createElement("div")创建遮罩层和内容区两个节点 - 视频元素用
document.createElement("video")创建，设置controls、autoplay（注意：自动播放需静音）、src属性 - 把视频 append 到内容区，再把内容区 append 到遮罩层，最后
document.body.appendChild(遮罩层) - 点击关闭按钮时，用
remove()删除整个遮罩层节点
示例关键片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const modal = document.createElement("div");
modal.innerHTML = `
<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;">
<div style="background:#fff;padding:20px;border-radius:8px;text-align:center;">
<video controls autoplay muted width="400">
<source src="demo.mp4" type="video/mp4">
</video>
<button onclick="this.parentElement.parentElement.parentElement.remove()" style="margin-top:12px;">关闭</button>
</div>
</div>
`;
document.body.appendChild(modal);
动态插入视频时要注意的兼容性坑
不是所有视频都能立刻播放，尤其在移动端或 Chrome 新策略下，容易卡在加载或静音限制上。
-
autoplay必须配合muted，否则多数浏览器会阻止（报错DOMException: play() failed because the user didn't interact with the document first） - 视频路径建议用相对路径或完整 URL，避免用
file://协议——本地双击打开 HTML 时，Chrome 会因安全策略拒绝加载媒体 - 如果视频较大，可加
preload="metadata"减少首帧等待时间；但不要设preload="auto"，可能触发无意义下载 - 移动端 Safari 对
<video></video>的全屏行为有特殊处理，若想禁用全屏按钮，得加x5-video-player-type="h5-page"和x5-video-player-fullscreen="false"这类私有属性
别用 innerHTML 拼接复杂视频逻辑
如果视频需要监听播放状态、切换清晰度、加载字幕或响应用户操作，硬塞进 innerHTML 字符串里会让代码难以维护、调试困难，也容易 XSS 漏洞（比如 src 来自用户输入却没转义）。
更稳妥的做法是：先创建空容器，再用 JS 分步设置属性、添加事件监听器。
- 用
videoEl.src = url而非拼字符串赋值src - 用
videoEl.addEventListener("canplay", handler)替代内联oncanplay - 字幕用
videoEl.addTextTrack()动态添加，而不是写死在 HTML 字符串里 - 若需多个视频轮播，建议封装成函数，传入
container和videoConfig对象，而不是重复复制大段 innerHTML
动态多媒体插入的本质不是“怎么塞进去”，而是“怎么让视频在正确时机、正确环境、可控状态下启动”。原生 alert 从设计上就排除了这种可能性，绕不开这层限制。
