如何在焦点离开我的网页时暂停视频（html5）

Question

我希望能够在用户单击链接到第三方网站的 href 时暂停视频，并在焦点返回时再次启动视频。我已经搜索了事件，但无法找到有效的事件，例如 onunload onchange。我有一个事件处理程序，当视频停止并向下滚动页面（javascript）时，它会启动一个新视频，但我陷入了这个问题。我尝试了一个调用 JavaScript 函数的 href，但它变得混乱（href 是动态生成的）。

Answer 1

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

您可以使用此代码获取窗口选项卡的焦点和模糊事件，并从此处调用播放和暂停函数。

Answer 2

如果第三方链接在同一选项卡中打开（而不是新选项卡或弹出窗口），您将无法从上次中断的位置继续，直到保存为止。

您可以使用 html5 Web 存储在客户端上存储当前状态数据。您可能希望在 window.onbeforeunload 事件上触发此事件。当他们返回时，只需检查是否有任何存储的数据可以恢复播放。显然，并非所有浏览器都支持这一点。如果保存服务器端是一个选项，您也可以这样做。

w3 的网络存储规范这里 目前浏览器支持的网络存储这里

但是，如果页面永远不会卸载，它只是失去焦点，您可以在页面的 html 上添加一个侦听器来触发模糊事件的暂停。继续聚焦。