html video记录视频播放的进度

Posted 2023-04-13

自己做了一个在线视频播放的网站，我用JS获取了video的时长，计算当前视频播放的进度。但是通过什么事件来返回给服务器呢？我想到的是用户关闭浏览器的时候来记录这个值，返回给服务器。但是总感觉怪怪的，求大神们给个意见，帮我分析分析 ！！！

参考技术A 为什么会怪？
这种需求的可用事件，无外乎是“定时”、“暂停”、“关闭”、“拖拽进度”，如果有必要，可覆盖的事件当然越广越好。
如果是个人的小站，我建议使用 localstorage 来储存用户的播放进度，除非你需要多端支持，电脑看完，手机想继续，这样同步进度才有意义。

自定义video控件

参考技术A 自定义您的媒体播放器

您可能决定希望音频或视频播放器在浏览器中具有一致的外观，或者只是希望对其进行调整以匹配您的站点。实现此目的的一般技术是省略该controls属性以便不显示默认浏览器控件，使用 HTML 和 CSS 创建自定义控件，然后使用 JavaScript 将您的控件链接到音频/视频 API。

如果您需要额外的东西，可以添加默认播放器中当前不存在的功能，例如播放速率、质量流切换甚至音频频谱。您还可以选择如何让您的播放器响应——例如，您可以在某些情况下删除进度条。

您可以检测点击、触摸和/或键盘事件来触发播放、暂停和滑动等操作。为了用户的方便和可访问性，记住键盘控件通常很重要。

一个简单的例子——首先在 HTML 中设置你的音频和自定义控件：

一个简单的例子——首先在 HTML 中设置你的音频和自定义控件：

复制到剪贴板

添加一些 JavaScript 来检测播放和暂停音频的事件：