0

我正在尝试使用 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>
4

1 回答 1

1

我认为，不同的嵌套深度可能会导致问题。
如果您查看官方混合内容文档，代码应如下所示：

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>中间没有）

更新

此外，您将包含多个 lightGallery 插件，而无需像这样激活它们：

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    ... other settings
});
于 2021-08-11T08:07:03.510 回答