使用 lightGallery 创建图像和 HTML5 视频的单个幻灯片放映
Create a single slide show of images and HTML5 videos using lightGallery
我正在尝试使用 lightgallery.js 创建图像和 HTML5 视频的混合滑块。
图像显示在滑块中,而视频不播放。它给出了这个错误:
Oops..fail to load content
下面是我项目中包含的 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>
我想,不同的嵌套深度可能会导致问题。
如果你查看官方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
});
我正在尝试使用 lightgallery.js 创建图像和 HTML5 视频的混合滑块。
图像显示在滑块中,而视频不播放。它给出了这个错误:
Oops..fail to load content
下面是我项目中包含的 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>
我想,不同的嵌套深度可能会导致问题。
如果你查看官方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
});