Support » Plugin: Media Playback Speed » [Advanced] How to create global or non-shortcode controls

  • Plugin Author LewisCowles


    1.1.4 & 1.1.5 releases of the plugin made it a lot easier to use this plugin within Gutenberg, albeit for advanced users only. I don’t want to see ratings influenced because I’ve spent extra effort providing this for power-users only!

    Using the Gutenberg Static HTML block, the following creates 1 speed and 2 speed controls for the entire page.

    <div class="page-playback-speed-controls">
      <button type="button" class="playback-rate-button mejs-active" data-value="1" title="Playback Speed 2x" aria-label="Playback Speed 1x">1x</button>
      <button type="button" class="playback-rate-button" data-value="2" title="Playback Speed 2x" aria-label="Playback Speed 2x">2x</button>

    There are 3 things

    1. All shortcode controls are specifically for those shortcodes.
    2. If static HTML controls are present without an aria-controls HTML attribute or with an invalid aria-controls, then they are page global
    3. If static HTML controls are present with an aria-controls HTML attribute which is valid, then they are non-global, and only affect a single element, which may be media-element-js or simply HTML5 audio or video tags.

    I cannot imagine why you would use custom HTML for media-element-js, but if you did, then you might want to also filter the playback speeds to remove on-widget controls. It’s entirely up to the site-admin.

    Global controls also change the instance controls right now. I may be open to revising this if it’s needed for some super-odd control over media.

    • This topic was modified 1 year, 11 months ago by LewisCowles. Reason: styling code
  • The topic ‘[Advanced] How to create global or non-shortcode controls’ is closed to new replies.