Question

我用以下代码添加了一些youtube视频：

const youtube = document.querySelectorAll('.youtube');

  for (let i = 0; i < youtube.length; i++) {
    const source = `https://img.youtube.com/vi/${youtube[i].dataset.embed}/hqdefault.jpg`;
    const image = new Image();
    image.src = source;
    image.addEventListener('load', function() {
      youtube[i].appendChild(image);
    }(i)); // end eventListener

youtube[i].addEventListener('click', function() {
  const iframe = document.createElement('iframe');

  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('src', `https://www.youtube.com/embed/${this.dataset.embed}?rel=0&showinfo=0&autoplay=1`);
    this.innerHTML = '';
    this.appendChild(iframe);
 });
}

我正在将图像作为占位符加载，然后在您单击视频的图像上单击时，如何在window.onhashchange时停止视频？这是一个包含多个div的页面，这些页面基于哈希显示/隐藏，因此我不重新加载页面，而只是更改在同一页面上显示的内容。

此处是网站：

https://costanzolaini.com/proyectos.html#LolaDixieland

Answer 1

最后，我找到了一种简单的方法：

window.addEventListener('hashchange', function() {
  window.location.reload();
});

它会强制重新加载页面，并且所有视频都使用占位符重置为原始状态

停止更改哈希值的视频

1 个答案: