代码之家  ›  专栏  ›  技术社区  ›  Millhorn

为什么Witia popover需要点击两下才能播放?

  •  0
  • Millhorn  · 技术社区  · 3 年前

    在我下面的例子中,我试图懒散地加载Wistia用来播放视频的脚本。在这种情况下,我没有使用嵌入式视频。相反,我使用的是popover视频。Witia视频需要的脚本依赖项将首先加载,然后播放视频。在dev tools中查看network选项卡时,脚本在第一次单击时加载,但需要第二次单击才能播放视频。

    为什么要点击两下才能播放这个视频?

    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>
    0 回复  |  直到 3 年前