HTML视频标签怎么实现学习进度打点的视频播放-H5教程-PHP中文网

html 标签本身不支持学习进度打点，但可通过 javascript 监听 timeupdate 事件、存储时间点到 localstorage 或服务端，并实现跳转、高亮提示及跨设备同步。

html视频标签怎么实现学习进度打点的视频播放

HTML `

1. 基础视频结构 + 时间点数据存储

先用标准 `

<video id="studyVideo" controls width="800"><source src="course.mp4" type="video/mp4"></source></video><button id="addBookmark">+ 打点</button>
<div id="bookmarkList"></div>

点击“打点”时，读取当前播放时间：
`const currentTime = video.currentTime;`
再将 `{ time: currentTime, desc: "此处讲了递归原理" }` 推入数组，并存入 localStorage 持久化。

2. 点击打点快速跳转到对应时间

为每个打点生成可点击的列表项，绑定跳转逻辑：

给列表项添加 `data-time="42.5"` 属性
点击时设置 `video.currentTime = parseFloat(timeAttr)`
自动触发播放（可选）：`video.play().catch(e => console.warn("自动播放被阻止"))`

注意：部分浏览器要求用户手势触发播放，所以跳转后若暂停状态，建议加个“播放”按钮或提示用户点击一次视频区域。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

3. 播放中高亮/提示已打点位置

利用 `timeupdate` 事件实时监听播放进度，对比当前时间是否接近某个打点（比如 ±1 秒内）：

video.addEventListener('timeupdate', () => {
  const now = Math.round(video.currentTime);
  const nearPoint = bookmarks.find(b => Math.abs(b.time - now)  isNotified = false, 2000); // 防止连续触发
  }
});

也可在视频进度条上绘制小图标（需自定义进度条或叠加 canvas/svg），但原生控件不支持，需隐藏默认控件并手写 UI。

4. 进阶：同步打点到服务端（登录用户）

如果产品需要跨设备同步，可在添加/删除打点时调用 API：

POST `/api/bookmarks` 带 `{ videoId: "xxx", time: 128.3, desc: "DFS遍历过程", userId: 123 }`
页面加载时 GET `/api/bookmarks?videoId=xxx` 初始化列表
注意处理并发编辑（如防重复提交、乐观更新）

本地仍建议保留 localStorage 缓存，提升响应速度和离线可用性。

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