尝试使用带有自定义html的plyr.js库将plyr控件与速度设置重新集成到我的视频中。

Question

我希望能够在中将自定义项附加到plyr.js视频中的控件中，但这会用速度设置删除设置项。

正如标题所述，我需要能够将设置控件与速度设置重新整合到我的视频中。我试着用自定义的HTML来做这件事，但是当点击设置图标时，我得到的是没有响应。

在播放机控件的默认/工作版本上，hidden=“”的属性似乎被移除/添加到plyr__controls__item、plyr-设置-{id}-home、plyr-设置-{id}-captions等以显示/隐藏它，但不使用手动添加的“设置”菜单。

具体来说，设置菜单中与javascript相关的功能似乎都不起作用。在浏览器中手动显示菜单和速度控制按钮时的隐藏和显示。

我为“设置”部分提供了HTML代码，因为我相信我可能遗漏了一些东西。

     <div class="plyr__controls__item plyr__menu">

      <button aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false" type="button" class="plyr__control plyr__tab-focus" data-plyr="settings">
        <svg role="presentation" focusable="false">
          <use xlink:href="#plyr-settings"></use>
        </svg>
        <span class="plyr__sr-only">Settings</span>
      </button>
      <div class="plyr__menu__container" id="plyr-settings-{id}">
        <div>

          <div id="plyr-settings-{id}-home">
            <div role="menu">
              <button data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
                <span>Captions
                  <span class="plyr__menu__value"></span>
                </span>
              </button>
              <button data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
                <span>Speed
                  <span class="plyr__menu__value"></span>
                </span>
              </button>
            </div>
          </div>


          <div id="plyr-settings-{id}-captions">
           <button type="button" class="plyr__control plyr__control--back">
             <span aria-hidden="true">Captions</span>
             <span class="plyr__sr-only">Go back to previous menu</span>
           </button>
           <div role="menu">

             <button data-plyr="language" type="button" role="menuitemradio" class="plyr__control" aria-checked="true" value="0">
               <span>English
                 <span class="plyr__menu__value">
                   <span class="plyr__badge"></span>
                 </span>
               </span>
             </button>
           </div>
         </div>


        </div>
      </div>
    </div>

Answer 1

当前，自定义控件HTML不支持设置菜单

https://github.com/sampotts/plyr/blob/master/CONTROLS.md#limitations