2

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

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

因为它来了，Lightbox2 不支持视频，句号。但是，我注意到 JavaScript 本质上是在灯箱打开时获取a'href属性的内容并将其放入img'属性中。src据我所见，将其更改img为iframe(done) 并将锚标记设置href为youtube.com/embed/*video-id*应该生成iframe包含该 YouTube 视频的内​​容（替换watch?id=为embed/呈现视频的全屏版本。

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

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

谢谢

注意：我没有使用 Drupal，因此该lightvideo选项不可用。

4

2 回答 2

0

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

我在我的项目中遇到了同样的问题。不适用于 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

于 2021-04-01T14:34:04.733 回答
-8

启用视频支持

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

基本示例

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

参考

于 2012-07-19T10:01:01.037 回答