javascript - 如何在用户每次返回主页时停止播放背景视频？

Question

我收到了一个设计，需要在用户点击主页时加载背景视频。我意识到这不是最佳实践，但设计已由客户签署，因此尝试为其开发一个不错的解决方案。我有视频并且运行良好。

我还被要求确保视频仅在用户访问网站时加载一次，并且当用户浏览网站时，如果他们返回主页，视频不应再次播放。

我一直在网上搜索，但找不到这方面的先例。有人能建议一个可能的解决方案吗？或者我可以访问一些文档来获取源代码？

该网站是用 HTML、CSS 和 JQuery 编写的。

我很高兴没有任何代码可看，但任何建议将不胜感激。

感谢所有偶然发现此问题的人。

Answer 1

使用localStorage或sessionStorage :

假设您有一个带有 id 的视频元素，例如:

<video id="myVideo">...</video>

您的脚本可能如下所示:

if (!localStorage.getItem('alreadyPlayedVideo')) {
  const myVideo = document.getElementById('myVideo');
  myVideo.play();
  localStorage.setItem('alreadyPlayedVideo', true);
}

它看起来与 sessionStorage 相同。两者之间的主要区别在于，当用户退出浏览器或关闭选项卡时，sessionStorage 会被清除，而 localStorage 在 session 之间仍然存在。