1

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

正如标题所说,我需要能够将设置控件与速度设置重新集成到我的视频中。我正在尝试使用自定义 HTML 来执行此操作,但是单击设置图标时我没有得到任何响应。

在播放器控件的默认/工作版本上,hidden=""的属性似乎已被删除/添加到 plyr__controls__item、plyr-settings-{id}-home、plyr-settings-{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>

4

1 回答 1

0

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

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

于 2020-12-22T05:43:44.467 回答