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

【问题标题】：Save HTML5 video currentTime before user leaves or closes page在用户离开或关闭页面之前保存 HTML5 视频 currentTime
【发布时间】：2012-07-26 11:06:30
【问题描述】：

当用户离开网页时，我想将 HTML5 视频的currentTime 的位置保存到数据库中。似乎window.onbeforeunload 不是一种可靠的方法（更不用说它提供了一个不受欢迎的弹出窗口！）。有没有更好的方法来做到这一点？

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

【问题讨论】：

有没有办法绕过数据库？您需要多个站点上的位置还是域 cookie/localStorage 就足够了？如果您真的需要数据库，您可以每 15 秒左右保存一次位置。如果您只是传输一个 id 和时间码，那么有效负载并没有那么大。但是，如果您的域中有大量 cookie（随每个请求一起发送），这可能是一种负担。
它在一个网站上，我可以完全控制那里托管的所有视频。没有多站点问题；因此 localStorage/cookie 就足够了。这是出于分析原因（此时人们最有可能从特定视频中跳出......等）。也许我不需要用户离开的确切位置。对足够大的集合进行抽样应该会给我一个粗略的想法。我会尝试每 10-15 秒保存一次，看看后端是如何处理的。请修改上述建议，我将其标记为“已回答”。谢谢。
我更新了我的答案。 Cookie 听起来对你来说是一个很好的解决方案。保存当前时间并在后续访问中更新统计数据。您还可以使用谷歌分析来跟踪包含此数据的自定义事件。

标签： javascript html ajax html5-video dom-events

【解决方案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 的标头。

【讨论】：

谢谢。我稍微编辑了问题，以更具体地说明我的意图。我实际上需要通过 ajax 将该 var 保存到数据库中......所以我希望有一种方法可以在离开页面之前完成调用（但没有 beforeunload 提示）。但是，只要我将 var 存储在 window 对象中并在下一页上使用全局脚本对其进行后处理以检测 var 的存在，您提出的建议就可以工作。但是，如果用户离开该站点，这将不起作用。想法？