如何在焦点离开网页时暂停视频(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';
});

您可以使用此代码获取窗口选项卡的焦点和蓝色事件，并从此处调用您的play和pause函数。

Answer 2

如果第三方链接在同一选项卡中打开(而不是新的选项卡或弹出窗口)，则在保存它之前，您将不能仅从您停止的位置开始。

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

浏览器当前支持的w3 here web存储的web存储规范here

但是，如果页面从未卸载，它只是失去了焦点，您只需在页面的html上添加一个侦听器，在blur事件上触发pause。继续关注焦点。