如何用JS/CSS实现视频播放后隐藏 并设置每小时仅展示一次规则

你当前的JS代码存在API调用错误：getElementByClassName 是错误写法，正确的原生API是复数形式的 getElementsByClassName，该接口返回的是符合类名条件的元素集合，无法直接调用 classList 方法。
以下是修正方案：

1. 修正JS逻辑，建议直接用 querySelector 选中单个元素，同时同步隐藏外层容器避免空容器遮挡页面内容：

function videoEnded() {
  const videoEl = document.querySelector(".fullscreen-bg-video");
  const containerEl = document.querySelector(".fullscreen-bg");
  videoEl.classList.add("hidevideo");
  containerEl.classList.add("hidevideo");
}

2. 补充外层容器的隐藏CSS样式：

.fullscreen-bg.hidevideo {
  display: none;
}

可以用浏览器原生的 localStorage 实现该需求，localStorage 是前端本地持久化存储能力，数据会保存在用户本地浏览器，不会随页面关闭或刷新丢失。
实现逻辑如下：

1. 页面加载时读取本地存储中记录的上次视频展示时间戳
2. 计算当前时间与上次展示时间的差值，小于1小时则直接隐藏视频容器
3. 视频播放完成后将当前时间戳写入本地存储，用于后续访问判断

完整实现代码：

// 页面加载完成后先判断是否需要展示视频
window.addEventListener('load', () => {
  const ONE_HOUR = 3600 * 1000; // 1小时对应的毫秒数
  const lastShowTime = localStorage.getItem('lastVideoShowTime');
  const containerEl = document.querySelector(".fullscreen-bg");
  
  // 距离上次展示不足1小时，直接隐藏视频
  if (lastShowTime && Date.now() - Number(lastShowTime) < ONE_HOUR) {
    containerEl.classList.add('hidevideo');
  }
})

function videoEnded() {
  const videoEl = document.querySelector(".fullscreen-bg-video");
  const containerEl = document.querySelector(".fullscreen-bg");
  videoEl.classList.add("hidevideo");
  containerEl.classList.add("hidevideo");
  // 记录本次播放完成的时间到本地存储
  localStorage.setItem('lastVideoShowTime', String(Date.now()));
}

如果需要只要加载出视频就算一次展示，不需要等播放完成，可以将写本地存储的逻辑移动到页面加载判断为需要展示的分支中即可。

内容的提问来源于stack exchange，提问作者Karl