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

如何仅删除选定懒散视频上的覆盖图像?

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

    在下面的脚本中,我正在懒洋洋地加载两个视频。我的脚本用于在单击时从所选视频中删除覆盖图像。然而,它也从第二个视频中删除覆盖图像,并将其置于其上方。再次单击会删除重复的图像,第三次单击会播放视频。

    如何在不影响页面上第二个视频的情况下仅删除选定视频的图像?

    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`
        ];
    
        removeElems(node);
        
        //Checks if above scripts are already loaded, and if they are... they won't be loaded again
        const id = 'script-ev1';
        if (!document.getElementById(id)) {
          // const id = 'script-ev1';
          var script = document.createElement('script');
          script.id = id;
          script.onload = () => {
            console.log('Ev-1.js loaded and ready to go!');
          };
          script.src = `https://fast.wistia.com/assets/external/E-v1.js` ;
          document.getElementsByTagName('head')[0].appendChild(script);
        } else {
          console.log(`Ev-1.js script with id: ${videoId} already loaded.`);
        }     
        
        //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;
            console.log(`JSONP script was added.`);
          }
    
          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) {
            playedOnce = true;
            video.popover.show();
            video.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>
    0 回复  |  直到 4 年前
        1
  •  2
  •   Maksim I. Kuzmin    4 年前

    把这个放到你的CSS中:

    .wistia_embed {
        display: none;
    }
    
    .wistia.shown .wistia_embed {
        display: block;
    }
    

    然后,把这个放到你的JS中:

    if (!node.classList.contains("shown")) {
        node.classList.add("shown");
    } else {
        return;
    }
    

    就在事件侦听器函数的开头。

    解释

    这个 E-v1.js 脚本一次显示所有视频,当您使用以下代码第一次单击加载此脚本时:

    const id = 'script-ev1';
    if (!document.getElementById(id)) {
        // const id = 'script-ev1';
        var script = document.createElement('script');
        script.id = id;
        script.onload = () => {
            console.log('Ev-1.js loaded and ready to go!');
        };
        script.src = `https://fast.wistia.com/assets/external/E-v1.js`;
        document.getElementsByTagName('head')[0].appendChild(script);
    } else {
        console.log(`Ev-1.js script with id: ${videoId} already loaded.`);
    }
    

    加载此脚本之前,没有视频,只有 <source> 元素。你从来没有用CSS表示视频应该是不可见的;从今以后,它们在默认情况下是可见的,一旦 E-v1.js 脚本加载它们。

    现在,当你在上面添加这个CSS片段时,你指出 .wistia_embed 元素基本上就是加载的视频,从一开始就必须是不可见的。

    使用这一行JS代码,点击时只会显示一个视频(设置 .shown 类,其中包含 display: block; 属性 wistia_先生 ).

    未定义 video.popover

    enter image description here

    我对Witia API不太了解,但浏览器告诉我没有 video.popover.show() 作用请将其从代码中删除,否则单击第二个视频将无法自动播放。

    onReady: function (video) {
        playedOnce = true;
        video.popover.show(); // remove
        video.play();
    }
    

    完整工作代码

    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", () => {
            if (!node.classList.contains("shown")) {
                node.classList.add("shown");
            } else {
                return;
            }
    
            const videoId = getVideoId(node);
            let wistiaSupportScripts = [
                //adds jsonp file to provide security over requests
                `https://fast.wistia.com/embed/medias/${videoId}.jsonp`
            ];
    
            removeElems(node);
    
            //Checks if above scripts are already loaded, and if they are... they won't be loaded again
            const id = 'script-ev1';
            if (!document.getElementById(id)) {
                // const id = 'script-ev1';
                var script = document.createElement('script');
                script.id = id;
                script.onload = () => {
                    console.log('Ev-1.js loaded and ready to go!');
                };
                script.src = `https://fast.wistia.com/assets/external/E-v1.js`;
                document.getElementsByTagName('head')[0].appendChild(script);
            } else {
                console.log(`Ev-1.js script with id: ${videoId} already loaded.`);
            }
    
            //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;
                    console.log(`JSONP script was added.`);
                }
    
                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) {
                    playedOnce = true;
                    video.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%;
    }
    
    .wistia_embed {
        display: none;
    }
    
    .wistia.shown .wistia_embed {
        display: block;
    }
    <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>