如何在Plyr中添加自定义主题设置选项？

可行性说明 #

完全可以实现自定义设置选项，Plyr提供了灵活的事件系统和DOM扩展能力，只是官方文档针对这类自定义设置的完整示例较少，以下是具体实现方案：

实现步骤 #

1. 初始化时配置自定义设置项
   在Plyr初始化的settings数组中加入自定义的theme选项，让它出现在默认设置面板里：

   const player = new Plyr('#player', {
     controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
     settings: ['captions', 'quality', 'speed', 'theme'] // 加入theme选项
   });
   

2. 动态插入Theme选项的DOM结构
   监听settingsopen事件，在设置面板打开时，给theme选项添加显示结构（默认显示Light）：

   player.on('settingsopen', () => {
     const settingsPanel = document.querySelector('.plyr__menu__container');
     // 避免重复插入
     if (!settingsPanel.querySelector('.plyr__setting--theme')) {
       const themeItem = document.createElement('div');
       themeItem.className = 'plyr__setting plyr__setting--theme';
       themeItem.innerHTML = `
         <button class="plyr__control plyr__setting__button" data-plyr="theme">
           <span class="plyr__tooltip" role="tooltip">Theme</span>
           <span class="plyr__setting__value">Light</span>
         </button>
       `;
       // 插入到speed选项之后
       const speedItem = settingsPanel.querySelector('[data-plyr="speed"]').parentElement;
       speedItem.insertAdjacentElement('afterend', themeItem);
     }
   });
   

3. 构建Theme子选项面板
   监听controlclick事件，点击Theme选项时替换面板内容为主题选择列表，同时添加返回按钮：

   player.on('controlclick', (event) => {
     const target = event.detail.plyr;
     if (target === 'theme') {
       event.preventDefault();
       const settingsPanel = document.querySelector('.plyr__menu__container');
       settingsPanel.innerHTML = `
         <button class="plyr__control plyr__setting__button plyr__back" data-plyr="back">
           <span class="plyr__tooltip" role="tooltip">Back</span>
           ← Back
         </button>
         <div class="plyr__setting">
           <button class="plyr__control plyr__setting__button" data-plyr="theme-light">
             <span class="plyr__setting__value">Light</span>
           </button>
         </div>
         <div class="plyr__setting">
           <button class="plyr__control plyr__setting__button" data-plyr="theme-dark">
             <span class="plyr__setting__value">Dark</span>
           </button>
         </div>
         <div class="plyr__setting">
           <button class="plyr__control plyr__setting__button" data-plyr="theme-blue">
             <span class="plyr__setting__value">Blue</span>
           </button>
         </div>
       `;
     }
   });
   

4. 处理选项选择与返回逻辑
   继续监听controlclick事件，完成返回主面板、设置主题变量、更新显示值的逻辑：

   player.on('controlclick', (event) => {
     const target = event.detail.plyr;
     // 返回主设置面板
     if (target === 'back') {
       event.preventDefault();
       player.emit('settingsopen');
     }
     // 处理主题选择
     if (target.startsWith('theme-')) {
       event.preventDefault();
       const themeValue = target.split('-')[1];
       // 设置全局变量
       window.themeValue = themeValue;
       // 更新主面板的Theme显示值
       const displayValue = document.querySelector('.plyr__setting--theme .plyr__setting__value');
       if (displayValue) {
         displayValue.textContent = themeValue.charAt(0).toUpperCase() + themeValue.slice(1);
       }
       // 返回主面板
       player.emit('settingsopen');
       // 可选：触发自定义事件供其他逻辑监听
       player.emit('themechange', themeValue);
     }
   });
   

5. 样式适配（可选）
   添加少量CSS让自定义选项更贴合Plyr风格：

   .plyr__setting--theme {
     border-top: 1px solid rgba(255,255,255,0.1);
     padding-top: 8px;
     margin-top: 8px;
   }
   .plyr__back {
     margin-bottom: 12px;
     padding-left: 0;
   }
   

相关文档参考 #

Plyr官方文档的以下核心板块包含扩展所需的基础逻辑：

• Controls（自定义控件）：讲解如何添加自定义控制按钮与绑定事件
• Modals & Settings（模态框与设置）：说明设置面板的DOM结构与触发机制
• Events（事件系统）：介绍如何监听、触发Plyr的各类内置事件

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