javascript - 如何捕获所有视频以在视频播放器脚本中播放？

Question

在下面的示例中，我正在 try catch 此脚本中的所有视频。但是，我只能捕获第一个视频。我知道这与 getElementById 有关而不是 querySelectorAll ，但我不确定如何在这个脚本中实现它。

var videoId = document.getElementById("wistia_video");
var uniqueVideoId = Array.from(videoId.classList)
  .find((c) => c.startsWith("wistia_async_"))
  .substring(13);
// console.log(uniqueVideoId);

const clickToPlay = document.querySelectorAll('.wistia')[0];

clickToPlay.addEventListener('click', function() {
  const playVideo = clickToPlay.querySelectorAll('.wistia__overlay, .embed-youtube__play');
  Array.from(playVideo).forEach((elem) => elem.remove());

  //supporting scripts
  let wistiaSupportScripts = [
    `https://fast.wistia.com/assets/external/E-v1.js`,
    //adds jsonp file to provide security over requests
    `https://fast.wistia.com/embed/medias/${uniqueVideoId}.jsonp`
  ];

  //loads supporting scripts into head
  for (var i = 0; i < wistiaSupportScripts.length; i++) {
    let wistiaSupportScript = document.createElement("script");
    wistiaSupportScript.src = wistiaSupportScripts[i];
    let complete = false;
    if (!complete && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
      complete = true;
    }

    let wistiaContainers = document.querySelector(".wistia");

    wistiaContainers ? document.getElementsByTagName("head")[0].appendChild(wistiaSupportScript) : console.log("No Wistia videos here.");
  }

  window._wq = window._wq || [];
  _wq.push({
    //globally scoped
    id: uniqueVideoId,
    options: {
      autoPlay: true,
      volume: 0.5
    },

    onReady: function(video) {
      video.bind("play");
    }
  });
});

.wistia {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.wistia__overlay {
  width: 100%;
  height: auto;
}
.wistia::before {
  display: block;
  content: "";
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: background 0.2s;
  width: 10%;
  aspect-ratio: 1/1;
  max-height: 15%;    
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible,
.wistia button.embed-youtube__play:focus {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}

<div class="wistia">
  <picture>
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" alt="some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_vhkqhqhzyq videoFoam=true" id="wistia_video"></div>
  <button class="embed-youtube__play"></button>
</div>

<div class="wistia">
  <picture>
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" alt="Some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_8ei13wuby7 videoFoam=true" id="wistia_video"></div>
  <button class="embed-youtube__play"></button>
</div>

Answer 1

您只选择了第一个 .wistia用这条线阻止:const clickToPlay = document.querySelectorAll('.wistia')[0];另一个问题是重复的 id正如您所指出的，这样只有第一个视频才能正确加载。我已删除 id属性完全来自 HTML，并更新了 JS 以正确循环每个 .wistia div，附加一个点击处理程序，然后从关联的子节点读取视频 ID。
变化的要点是:

// Loop over every .wistia node and attach a click handler to each
Array.from(document.querySelectorAll(".wistia")).forEach(node => {
  node.addEventListener('click', () => {
    // Read the video ID from within the current .wistia blocks children
    const videoId = getVideoId(node)

    // The rest is mostly how you had it before

  })
})

const getVideoId = (ele) => {
  const classes = Array.from(ele.querySelector(".wistia_embed").classList);
  const idClass = classes.find((cls) => cls.startsWith("wistia_async_"));
  const id = idClass.replace("wistia_async_", "");

  return id;
};
const removeElems = (ele) => {
  const toRemove = Array.from(
ele.querySelectorAll(".wistia__overlay, .embed-youtube__play")
  );

  toRemove.forEach((node) => node.remove());
};

Array.from(document.querySelectorAll(".wistia")).forEach((node) => {
  node.addEventListener("click", () => {
const videoId = getVideoId(node);
let wistiaSupportScripts = [
  `https://fast.wistia.com/assets/external/E-v1.js`,
  //adds jsonp file to provide security over requests
  `https://fast.wistia.com/embed/medias/${videoId}.jsonp`,
];

removeElems(node);

//loads supporting scripts into head
for (var i = 0; i < wistiaSupportScripts.length; i++) {
  let wistiaSupportScript = document.createElement("script");
  wistiaSupportScript.src = wistiaSupportScripts[i];
  let complete = false;
  if (
    !complete &&
    (!this.readyState ||
      this.readyState == "loaded" ||
      this.readyState == "complete")
  ) {
    complete = true;
  }

  let wistiaContainers = document.querySelector(".wistia");

  wistiaContainers
    ? document
        .getElementsByTagName("head")[0]
        .appendChild(wistiaSupportScript)
    : console.log("No Wistia videos here.");
}

window._wq = window._wq || [];
_wq.push({
  //globally scoped
  id: videoId,
  options: {
    autoPlay: true,
    volume: 0.5,
  },

  onReady: function (video) {
    video.bind("play");
  },
});
  });
});

.wistia {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.wistia__overlay {
  width: 100%;
  height: auto;
}
.wistia::before {
  display: block;
  content: "";
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: background 0.2s;
  width: 10%;
  aspect-ratio: 1/1;
  max-height: 15%;    
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible,
.wistia button.embed-youtube__play:focus {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}

<div class="wistia">
  <picture>
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embedwistia-a.akamaihd.net/deliveries/48f1d62d1ceddb4284ad9cf67c916235.jpg?auto=format&w=310" alt="some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_vhkqhqhzyq videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>

<div class="wistia">
  <picture>
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=640" media="(min-width: 1200px)">
    <source srcset="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" media="(min-width: 768px)">
    <img src="https://embed-fastly.wistia.com/deliveries/2eab84ad71cf5acd9c7572d36667d255.jpg?auto=format&w=310" alt="Some text" class="wistia__overlay lazy" loading="lazy">
  </picture>
  <div class="wistia_embed wistia_async_8ei13wuby7 videoFoam=true"></div>
  <button class="embed-youtube__play"></button>
</div>