使用 lightGallery 创建图像和 HTML5 视频的单个幻灯片

Question

我正在尝试使用 lightgallery.js 创建图像和 HTML5 视频的混合滑块。

图像显示在滑块中，而视频不播放。它给出了这个错误：

糟糕..无法加载内容

以下是我的项目中包含的 CSS 和 JS 文件。

任何人请建议我是否缺少任何 JS 或 CSS 文件或创建幻灯片的方式不正确。

JS部分：

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-autoplay.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-fullscreen.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-video.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lightgallery.min.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/autoplay/lg-autoplay.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/video/lg-video.min.js" ></script>

<script>
    lightGallery(document.getElementById('slideShow'), {
        selector: '.item',
    }); 
</script>

HTML 部分：

<div id="slideShow">
    <div class="item" data-src="../webroot/1.jpg">
        <img src="../webroot/1.jpg" />
    </div>
    <div class="item" data-src="../webroot/2.jpg">
        <img src="../webroot/2.jpg" />
    </div>
    <div class="item" data-src="../webroot/3.jpg">
        <img src="../webroot/3.jpg" />
    </div>
    <div class="item">
        <a
            data-lg-size="1280-720"
            data-video='{
                "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
                "attributes": {"preload": false, "controls": true}
            }'
            data-poster="../webroot/1.jpg">
            <img
                width="300"
                height="100"
                class="img-responsive"
                src="../webroot/1.jpg"
            />
        </a>
    </div>
</div>

Answer 1

我认为，不同的嵌套深度可能会导致问题。
如果你查看官方Mixed Contents docs，代码应该是这样的：

HTML 结构：

<div id="gallery-mixed-content-demo">
    <!-- Image -->    
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>

    <!-- HTML5 Video --->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
</div>

JavaScript：

lightGallery(document.getElementById('gallery-mixed-content-demo'));

所以在你的情况下，视频部分应该是这样的：

<div class="item"
     data-lg-size="1280-720"
     data-video='{
        "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
        "attributes": {"preload": false, "controls": true}
     }'
     data-poster="../webroot/1.jpg"
>
    <img width="300"
         height="100"
         class="img-responsive"
         src="../webroot/1.jpg"
    />
</div>

（中间没有<a>）

更新

此外，您还包含多个不带activating 的 lightGallery 插件，如下所示：

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    ... other settings
});