问题描述
我正在一个项目中使用 GLightBox。我有一个超链接,其中包含指向自托管 MP4 视频的 URL。视频在 GLightBox 中打开。我已经为我的视频设置了海报图片,但我不知道在 GlightBox 设置中在哪里设置海报图片。这是我的 html 链接,用于在灯箱中启动视频。
<a href="<?= $video_url; ?>" class="standard-lightBox">
这是我在 site.js 文件中的 javascript 配置:
let standardLightBoxSlideHTML = `<div class="gslide">
<div class="gslide-inner-content">
<div class="ginner-container">
<div class="gslide-media">
</div>
<div class="gslide-description">
<div class="gdesc-inner">
<h4 class="gslide-title"></h4>
<div class="gslide-desc"></div>
</div>
</div>
</div>
</div>
</div>`;
var standardLightBox = GLightBox({
selector: '.standard-lightBox',width: '1280px',height: '720px',skin: 'modern',cloSEOnOutsideClick: true,slideHTML: standardLightBoxSlideHTML,type:'video',autoplayVideos: false,plyr: {
config: {
ratio: '16:9',// or '4:3'
muted: false,hideControls: false,autoplay: false,autopause: true,volume: 0.5,controls: ['play-large','play','progress','volume','mute','fullscreen']
}
}
});
我已尝试向超链接添加数据海报值。那没有用。那就是我想设置它的地方,然后我想 GLightBox 使用它。任何想法如何使它起作用?
我想将此帖子标记为“glightBox”,但我没有足够的代表。
解决方法
我能够通过这种方式解决我的问题。
在 wordpress 中,我设置了两个新字段,一个用于视频的 url,另一个用于海报图像。
我更改了代码以在点击的超链接中输出网址和海报网址。
在我的 Glightbox 设置中,我只是获取这些值并使用 javascript 将其动态添加到视频标签中。我还在超链接中添加了一个计数器,以便我可以附加计数值来为视频创建 ID 选择器。
standardLightbox.on('slide_after_load',(data) => {
const { slideIndex,slideNode,slideConfig,player,trigger } = data;
var btnClicked = document.getElementById(trigger.id);
var posterimage = btnClicked.getAttribute('data-html5videoposter');
var videoid = btnClicked.getAttribute('data-videoid');
// use the index
var getVideoTag = document.getElementById(videoid);
getVideoTag.setAttribute('poster',posterimage);
});