Media Playback Rate Select

Selects native media playback rate and submits the selected rate as a string form value.

<nve-media-controller id="playback-rate-example" style="max-width: 300px">
  <video src="/static/video/particle.mp4" playsinline></video>
  <nve-media-pause-button commandfor="playback-rate-example" checked></nve-media-pause-button>
  <nve-media-playback-rate-select
    commandfor="playback-rate-example"
    name="playbackRate"
    value="1"
    rates="[0.5, 1, 1.5, 2]"
  ></nve-media-playback-rate-select>
</nve-media-controller>

Installation

<script type="module">
  import '@nvidia-elements/media/playback-rate-select/define.js';
</script>

<nve-media-controller id="playback-rate-example" style="max-width: 300px">
  <video src="/static/video/particle.mp4" playsinline></video>
  <nve-media-pause-button commandfor="playback-rate-example" checked></nve-media-pause-button>
  <nve-media-playback-rate-select
    commandfor="playback-rate-example"
    name="playbackRate"
    value="1"
    rates="[0.5, 1, 1.5, 2]"
  ></nve-media-playback-rate-select>
</nve-media-controller>

nve api.get nve-media-playback-rate-select

Usage

nve-media-playback-rate-select sends --set-playback-rate when the user commits a selected rate. It uses an internal native select and syncs from the target controller's mediaState events.

<nve-media-controller id="controller">
  <video src="/static/video/particle.mp4" playsinline></video>
  <div role="toolbar" aria-label="media controls">
    <nve-media-pause-button commandfor="controller"></nve-media-pause-button>
    <nve-media-playback-rate-select
      commandfor="controller"
      name="playbackRate"
      value="1"
      rates="[0.5, 1, 1.5, 2]">
    </nve-media-playback-rate-select>
  </div>
</nve-media-controller>

Rates

Use the rates property to provide positive numeric options. In HTML, pass a JSON array attribute.

<nve-media-playback-rate-select rates="[0.25, 0.5, 1, 1.5, 2]"></nve-media-playback-rate-select>

Form Behavior

The playback rate select submits the selected string value when it has a name. Use readonly to display the current rate without allowing user changes or command dispatch.

Controller-driven synchronization does not dispatch input or change. Those events come from user interaction.

Release Status