0

在下面的示例中，我尝试延迟加载 Wistia 用于播放视频的脚本。在这种情况下，我没有使用嵌入式视频。相反，我使用的是弹出式视频。首先加载 Wistia 视频所需的脚本依赖项，然后播放视频。在开发工具中观看网络选项卡时，脚本会在第一次单击时加载，但需要第二次单击才能播放视频。

为什么要点击 2 次才能播放此视频？

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

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

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

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

    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");
      },
    });
  });
});
//button
.btn--blue {
  background: #005fec;
  color: #fff;
  text-decoration: none;
}

.btn--blue {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  position: relative;
  border-radius: 4px;
  transition: all 200ms ease;
  cursor: pointer;
  box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.14);
  width: fit-content;
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 1rem 2rem;
}

.wistia {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.wistia__overlay {
  width: 100%;
  height: auto;
}

.wistia::before {
  display: block;
  content: "";
}

.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}
<div class="wistia">
  <div class="wistia_embed wistia_async_vhkqhqhzyq popover=true popoverContent=link">
    <a href="#oquote-hero-section" class="btn--blue">
      <span class="btn__txt">Meet the team</span>
    </a>
  </div>          
</div>

4

0 回答 0