使用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

我认为，不同的嵌套深度可能会导致这个问题。
如果你检查了官方的混合内容文档，代码应该是这样的:

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
});