我希望能够将自定义项附加到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>