使用lightGallery创建图片与HTML5视频混合轮播时视频加载失败求助

AI 小北

2026-10-8

问题排查与解决方案

核心错误点

lightgallery初始化时未显式声明启用video插件，即使引入了插件文件也不会自动加载
视频相关的data-video/data-lg-size等属性放错了位置：你配置的轮播项选择器是.item，属性需要直接挂载在.item元素上，而不是内部的<a>标签，lightgallery不会自动读取子元素的配置属性
可选优化：如果不需要使用video.js的特殊功能，无需额外引入video.js的CSS和JS文件，lightgallery原生支持HTML5视频播放

修改方案

1. 调整初始化JS

在初始化参数中添加plugins配置，显式引入用到的插件：

lightGallery(document.getElementById('slideShow'), {
    selector: '.item',
    plugins: [lgVideo, lgThumbnail, lgAutoplay, lgFullscreen],
    videojs: false // 不需要用到video.js功能就保留该配置，需要使用的话删除该行即可
});

2. 调整HTML视频项结构

把视频相关属性移到.item元素上：

<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"
        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>
</div>