HTML5 中怎么用 video 标签实现视频播放完成后的浮窗推荐与重播交互-H5教程-PHP中文网

HTML5中可通过video的ended事件触发浮窗推荐与重播交互：监听ended显示fixed定位浮窗，内含重播按钮（重置currentTime并play）和推荐链接，配合hidden类控制显隐、标志位防重复、键盘支持及移动端适配。

html5 中怎么用 video 标签实现视频播放完成后的浮窗推荐与重播交互

在 HTML5 中，利用标签的原生事件（尤其是 ended）配合简单的 DOM 操作，就能在视频播放结束后触发浮窗推荐与重播交互，无需依赖第三方库。

监听播放完成事件并显示浮窗

视频结束时会触发 ended 事件，可在此回调中显示自定义浮窗（如

），并暂停/隐藏原生控件以提升体验：
给  添加 id="myVideo" 方便 JS 获取
  用 video.addEventListener('ended', handler) 绑定逻辑
  浮窗建议用 position: fixed 居中覆盖，背景半透明，z-index 高于视频

浮窗内集成重播与推荐按钮
浮窗内容应轻量、响应明确。常见结构如下：


“立即重播”按钮：点击后调用 video.currentTime = 0; video.play();，并隐藏浮窗
  
“推荐视频”区域：可放 2–3 个带缩略图和标题的  或卡片，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>});

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！