GLightbox 和 HTML5 视频 - 如何设置海报图片？

Question

我在我正在处理的项目中使用 GLightbox。我有一个 hyperlink，它有一个 URL 到一个自托管的 MP4 视频。视频在 GLightbox 中打开。我已经为我的视频设置了 poster 图像，但我不知道在 Glightbox 设置中在哪里设置 poster 图像。这是我在灯箱中启动视频的 html link。

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

我试过向 hyperlink 添加一个 data-poster 值。那没有用。那是我想设置它的地方，然后我想 GLightbox 使用它。有什么想法可以让它发挥作用吗？

我想将此 post 标记为“glightbox”，但我没有足够的代表。

Answer 1

我能够通过这种方式解决我的问题。

在 wordpress 中，我设置了两个新字段，一个用于 url 视频，另一个用于海报图像。

我更改了代码以在单击的超链接中输出 url 和海报 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);

});

GLightbox 和 HTML5 视频 - 如何设置海报图片？

GLightbox and HTML5 videos - how can I set a poster image?

lightbox

html5-video