时间戳

首页 > 解决方案 > GLightbox 和 HTML5 视频 - 我如何设置海报图像？

html5-video - 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”，但我没有足够的代表。

标签： html5-videolightbox

解决方案

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

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

});

推荐阅读