HTML5中可通过video的ended事件触发浮窗推荐与重播交互：监听ended显示fixed定位浮窗，内含重播按钮（重置currentTime并play）和推荐链接，配合hidden类控制显隐、标志位防重复、键盘支持及移动端适配。
在 HTML5 中，利用 <video></video> 标签的原生事件（尤其是 ended）配合简单的 DOM 操作，就能在视频播放结束后触发浮窗推荐与重播交互，无需依赖第三方库。
监听播放完成事件并显示浮窗
视频结束时会触发 ended 事件，可在此回调中显示自定义浮窗（如 <div class="overlay">），并暂停/隐藏原生控件以提升体验：
<ul>
<li>给 <code><video></video> 添加 id="myVideo" 方便 JS 获取
video.addEventListener('ended', handler) 绑定逻辑position: fixed 居中覆盖，背景半透明，z-index 高于视频浮窗内集成重播与推荐按钮
浮窗内容应轻量、响应明确。常见结构如下：
-
“立即重播”按钮：点击后调用
video.currentTime = 0; video.play();，并隐藏浮窗 -
“推荐视频”区域：可放 2–3 个带缩略图和标题的
<a></a>或卡片，href 指向新页面或通过 JS 加载新视频（如替换src+load()） - 添加
tabindex="0"和键盘支持（如回车触发重播），提升可访问性
增强体验的小技巧
让交互更自然，注意几个细节：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 播放中隐藏浮窗：
video.addEventListener('play', () => overlay.classList.add('hidden')) - 避免重复触发：
ended可能因网络中断等误触发，加个标志位（如isEndedHandled = true）防多次弹出 - 移动端适配：浮窗按钮字号不小于 16px，留足点击热区；iOS Safari 中自动播放受限，重播需用户手势触发（已满足，因是点击触发）
- 样式示例关键 CSS：
.overlay { display: none; } .overlay.show { display: block; }，JS 控制show类切换
基础代码结构示意
核心逻辑简洁明了：
<video id="myVideo" src="demo.mp4" poster="cover.jpg"></video><br><div id="recommendOverlay" class="overlay hidden"><br> <button id="replayBtn">? 重播</button><br> <h3>你可能还喜欢</h3><br> <a href="video2.html">教程第二集</a><br></div>
对应 JS：
const video = document.getElementById('myVideo');<br>const overlay = document.getElementById('recommendOverlay');<br>const replayBtn = document.getElementById('replayBtn');<br><br>video.addEventListener('ended', () => {<br> overlay.classList.remove('hidden');<br>});<br><br>replayBtn.addEventListener('click', () => {<br> video.currentTime = 0;<br> video.play().catch(e => console.warn('Auto-play prevented:', e));<br> overlay.classList.add('hidden');<br>});
