用Lightbox2显示视频

Question

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

在我开始之前，我知道Lightbox2 (Lokesh Dhakar's)有很多其他选项可以显示视频，但我想避免使用三种不同的JavaScript工具，它们已经使用了MooTools和JQuery，因为我希望将HTTP请求和磁盘使用量保持在最低限度。

随着它的到来，Lightbox2不支持视频，完全停止。然而，我注意到，JavaScript实际上是在打开灯箱时，将a的href属性的内容放入img的src属性中。据我所见，将这个img更改为iframe (已完成)并将锚标记的href设置为youtube.com/embed/*video-id*应该生成一个iframe，其中包含该YouTube视频(将watch?id=替换为embed/ )，显示了视频的全屏版本。

然后，我还在默认的JavaScript之上添加了宽度、高度和帧边框属性的class="lb-image"。现在，当页面被加载并且Lightbox被调用时，它会创建一个空窗口。如果检查代码，可以看到所有属性都在那里，但是框架框架中的页面没有加载，只是创建了一个空的head和body标记。

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

谢谢

注意:我不使用Drupal，因此选项不可用。

Answer 1

也许有人还在寻找解决办法。

我的项目也有同样的问题。如果有youtube的话，这并不难，但要实现并不难。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);
        });
    }
}

要预览它是如何工作的-代码在这里：https://codepen.io/PatrykN/pen/RwKpwMe

Answer 2

支持视频支持

默认情况下，对视频的支持是禁用的。但是，可以通过检查admin/ can /lightbox2 2上的enable视频支持选项来轻松启用这一功能。

基本实例

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">This Video</a>

参考文献