0

我用这段代码添加了一些 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

4

1 回答 1

0

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

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

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

于 2019-01-19T15:28:18.203 回答