前端之家

  1. 首页
  2. 问答

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

• 问答

我正在一个项目中使用 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”，但我没有足够的代表。

cjxk01 回答：GLightbox 和 HTML5 视频 - 如何设置海报图像？

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

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

});
html5-videolightbox
本文链接：https://www.f2er.com/87467.html

大家都在问