javascript - 在用户离开或关闭页面之前保存 HTML5 视频 currentTime

Question

我想在用户离开网页时将 HTML5 视频的 currentTime 位置保存到数据库中。似乎 window.onbeforeunload 不是一个可靠的方法(更不用说它会给出一个不受欢迎的弹出窗口!)。有更好的方法吗？

除了定期将位置保存到服务器之外，我想不出任何其他方法。但这似乎是浪费资源/带宽。 Netflix 似乎在记住您上次查看的位置方面做得很好。他们如何能够可靠地实现这一目标？可能是低级服务器端 C/C++ 代码？

Answer 1

有多种方法可以保存这些东西:

本地(对于同一个域)

卸载前

这使您可以根据需要取消卸载事件。但是，弹出窗口是可选的。

卸载

此事件无法取消，但您仍然可以完全访问所有节点和 JavaScript 变量。因此，如果不需要取消，您可以进行最后的清理/保存。您可以使用任何您喜欢的保存方法，例如document.cookie 或 window.localStorage。

window.onunload = function () {
    window.localstorage[myVideo.currentTime] = document.getElementById("myVid").currentTime;
}

如果您可以处理这样一个事实，即您只能在用户返回您的站点时处理 cookie 和 localStorage。我认为这种方法是完美的。您只需保存当前时间，在用户下次访问时您将获得更新的信息。

在后端

如果您确实需要将该信息保存到您的后端，您可以尝试一些其他的东西。

数据库轮询

根据您对准确性的需求，您可以每 10 - 20 秒发送一次 ajax 请求以更新播放时间。如果您只包含视频 ID 和当前时间，则请求非常小，不会对性能产生影响。但是请记住，如果您有很多域 cookie，它可能会极大地增加请求的大小，并且您的 500 字节有效负载可能带有 5kB header 。