使用Lightbox2显示视频

Question

网站：http://blieque.comli.com/motion

在开始之前，我知道 Lightbox2（Lokesh Dhakar 的）有很多替代品来显示视频，但我想避免使用三种不同的 JavaScript 东西，已经使用 MooTools 和 JQuery，因为我想将 HTTP 请求保持在最低限度，因为以及磁盘使用情况。

Lightbox2 不支持视频，完全停止。然而，我注意到，当灯箱打开时，JavaScript 本质上是获取

a

的

href

属性的内容并将其放入

img

的

src

属性中。据我所知，将

img

更改为

iframe

（完成）并将锚点标签的

href

设置为

youtube.com/embed/*video-id*

应该会生成一个包含该 YouTube 视频的

iframe

（将

watch?id=

替换为

embed/） 

呈现视频的全屏版本。

然后，我还在默认的

class="lb-image"

之上添加了宽度、高度和框架边框属性的 JavaScript。现在，当页面加载并且 Lightbox 调用时，它会创建一个空窗口。如果您检查代码，您可以看到所有属性都在那里，但框架中的页面未加载，只是创建了一个空的

head

和

body

标签。

我只是想知道这是服务器问题还是代码问题，如果是，如何解决。有什么办法可以让它发挥作用吗？

谢谢

注意：我没有使用 Drupal，因此

lightvideo

选项不可用。

Answer 1

也许有人仍在寻找解决方案。

我的项目中也遇到了同样的问题。 YouTube iframe 没有，但实现它并不困难。 Lightbox2 无法扩展，所以我编写了简单的类，添加了侦听器和观察者。为了正确显示，要求视频具有相同尺寸的海报。这是保持弹出窗口正确大小的最快方法。

在href中需要添加带有图像url的数据集href

<a href="POSTER_URL" data-href="VIDEO_URL" data-lightbox="Videos">
Open Lightbox
</a>

SCSS 在加载时覆盖弹出窗口中的图像并设置淡入淡出效果

.lightbox {
  .lb {
    &-outerContainer {
      video {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        width: 100%;
        height: auto;
        opacity: 1;
        transition: opacity 300ms ease-in-out;
        border: none;
        outline: none;
        &:hover, &:focus {
          border: none;
          outline: none;
        }
      }
      &.animating {
        video {
          opacity: 0;
        }
      }
    }
    &-container {
      position: relative;
      .lb-image {
        border: none;
      }
    }
  }
}

还有创建视频并将其设置为弹出窗口的 JS 类。也许有点乱，但我不在乎。这只是快速解决方案。

class LightBoxVideo {
    constructor() {
        this.videos = {};
        this.lightBoxVideo();
    }

    lightBoxVideo = () => {
        this.setEvents();
        this.setMutationObserver();
    }

    setMutationObserver = () => {
        const observer = new MutationObserver(mutation => {
            const imageMutations = mutation.filter((m) => {
                return m.attributeName === "src" && m.target.className === 'lb-image'
            });
            
            const overlayDisplay = window.getComputedStyle(document.querySelector('.lightboxOverlay'), null).display;
            if("none" === overlayDisplay) {
                this.removeVideoElement();
            }
            
            if(imageMutations.length > 0) {
                if(this.videos[imageMutations[0].target.src]) {
                    this.removeVideoElement();
                    this.setVideoElement(this.videos[imageMutations[0].target.src]);
                }
            }
        });

        observer.observe(document.body, {
            childList: false,
            attributes: true,
            subtree: true,
            characterData: false
        });
    }

    setEvents = () => {
        const videoLinks = this.findVideoLinks();
        videoLinks.forEach((link) => {
            this.videos[link.href] = link;
            link.addEventListener('click', (e) => {
                this.removeVideoElement();
                this.setVideoElement(e.target);
            });
        });
    }

    setVideoElement = (element) => {
        const lightbox = document.querySelector('.lightbox')
        const container = lightbox.querySelector('.lb-container');

        const videoElement = this.createVideoElement(element);
        container.prepend(videoElement);
    }

    removeVideoElement = () => {
        const lightbox = document.querySelector('.lightbox')
        const container = lightbox.querySelector('.lb-container');
        const video = container.querySelector('video');

        if(video) {
            container.removeChild(video);
        }
    }

    createVideoElement = (element) => {
        const video = document.createElement('video');

        video.setAttribute('poster', element.href);
        video.setAttribute('controls', 'true');

        const source = document.createElement('source');
        source.setAttribute('src', element.dataset.href);
        source.setAttribute('type', 'video/mp4');

        video.append(source);

        return video;
    }

    findVideoLinks = () => {
        const hrefs = document.querySelectorAll('a[data-lightbox]');
        const regex = /\.(mp4|mov|flv|wmv)$/;
        if(0 === hrefs.length) {
            return [];
        }
        return Array.from(hrefs).filter((href) => {
            return !! href.dataset.href.match(regex);
        });
    }
}

要预览它是如何工作的 - 请在此处使用 codepen：https://codepen.io/PatrykN/pen/RwKpwMe