如何在动态lightGallery视频画廊中为VideoJS添加Silvermine画质选择器

要在动态生成的lightGallery视频画廊中添加Silvermine画质选择器，核心是利用lightGallery的生命周期事件，在视频元素创建完成后初始化插件。具体步骤如下：

1. 确保引入所有依赖资源 #

先在页面中按顺序引入以下资源：

• VideoJS的CSS和JS
• Silvermine videojs-quality-selector的CSS和JS
• lightGallery的CSS、JS及所需插件（lgVideo、lgZoom等）

2. 修改lightGallery配置，添加多画质视频源 #

首先在dynamicEl的视频source中添加不同画质的资源，给每个source指定label（显示的画质名称）和res（分辨率数值，用于排序），同时通过lightGallery的事件初始化插件：

const dynamicGalleryVideo = window.lightGallery($dynamicGalleryVideo, {
  dynamic: true,
  download: false,
  plugins: [lgZoom, lgThumbnail, lgVideo],
  videojs: true,
  videojsOptions: {
    muted: false,
    autoplay: false,
    controls: true,
    autoplayFirstVideo: false,
    // 提前配置控件栏，指定画质选择器位置
    controlBar: {
      children: [
        'playToggle',
        'volumePanel',
        'currentTimeDisplay',
        'timeDivider',
        'durationDisplay',
        'progressControl',
        'qualitySelector',
        'fullscreenToggle',
      ],
    },
  },
  dynamicEl: [
    {
      video: {
        source: [
          {
            src: "https://example.com/video/Video-480p.mp4",
            type: "video/mp4",
            label: '480p',
            res: 480
          },
          {
            src: "https://example.com/video/Video-720p.mp4",
            type: "video/mp4",
            label: '720p',
            res: 720
          },
          {
            src: "https://example.com/video/Video-1080p.mp4",
            type: "video/mp4",
            label: '1080p',
            res: 1080
          },
        ]
      }
    }
  ],
  // 关键：在视频slide加载完成后初始化画质选择器
  afterSlideLoad: function(data) {
    const videoEl = data.slideContent.querySelector('video');
    if (videoEl && window.videojs.getPlayer(videoEl.id)) {
      const player = window.videojs.getPlayer(videoEl.id);
      // 初始化Silvermine画质选择器
      player.qualitySelector({
        defaultQuality: '720p',
        showAutomaticLabel: true,
      });
    }
  },
});

3. 关键说明 #

• afterSlideLoad事件：动态lightGallery的视频元素是在切换到对应slide时才会被创建并初始化VideoJS，因此必须在这个事件触发后才能获取到有效的VideoJS实例。
• 视频源要求：每个source必须包含label和res属性，Silvermine插件依赖这两个属性生成画质选项并按分辨率排序。
• 控件位置自定义：在videojsOptions.controlBar.children中加入qualitySelector，可以指定画质选择器在控件栏中的位置，避免默认位置不符合需求。

内容的提问来源于stack exchange，提问作者ali safaeyan