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

【问题标题】：How to pause a video when focus leaves my web page (html5)当焦点离开我的网页时如何暂停视频（html5）
【发布时间】：2013-06-20 06:19:47
【问题描述】：

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

【问题讨论】：

你指的href是在新标签页还是在同一个标签页打开第三方网站。如果在同一个标签页，恐怕你不能保存你的状态视频并轻松返回，除非您正在进行 AJAX 调用以保存状态、使用网络存储、创建会话等。你可以看看stackoverflow.com/questions/3648120/…
对不起，我没有想到要提它，它会打开一个新的网页。

标签： javascript jquery html events

【解决方案1】：

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

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

您可以使用此代码获取窗口选项卡的焦点和蓝色事件，并从此处调用您的播放和暂停功能。

【讨论】：

是的，我已经检查过了。通过创建不在 JS Fiddle 上的测试页面来测试它

【解决方案2】：

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

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

来自 w3 here 的网络存储规范浏览器目前支持的网络存储here

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

【讨论】：