Sends absolute or relative seek commands without adding form submission state.
<nve-media-controller id="seek-example" style="max-width: 300px">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls" nve-layout="row gap:xs">
<nve-media-seek-button commandfor="seek-example" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
<nve-media-controller id="seek-example" style="max-width: 300px">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls" nve-layout="row gap:xs">
<nve-media-seek-button commandfor="seek-example" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
Installation
<script type="module">
import '@nvidia-elements/media/seek-button/define.js';
</script>
<nve-media-controller id="seek-example" style="max-width: 300px">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls" nve-layout="row gap:xs">
<nve-media-seek-button commandfor="seek-example" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
<script type="module">
import '@nvidia-elements/media/seek-button/define.js';
</script>
<nve-media-controller id="seek-example" style="max-width: 300px">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls" nve-layout="row gap:xs">
<nve-media-seek-button commandfor="seek-example" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="seek-example" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
nve api.get nve-media-seek-button
nve api.get nve-media-seek-button
Usage
nve-media-seek-button sends absolute or relative seek commands. Use action for the seek intent and value for relative movement. The value property follows native button string semantics. valueAsNumber provides the numeric command payload.
<nve-media-controller id="controller">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls">
<nve-media-seek-button commandfor="controller" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
<nve-media-controller id="controller">
<video src="/static/video/particle.mp4" playsinline></video>
<div role="toolbar" aria-label="seek controls">
<nve-media-seek-button commandfor="controller" action="start"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="backward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="forward" value="10"></nve-media-seek-button>
<nve-media-seek-button commandfor="controller" action="end"></nve-media-seek-button>
</div>
</nve-media-controller>
Actions
| Action | Command | Behavior |
start | --seek-start | Move playback to zero seconds. |
backward | --seek-backward | Move playback earlier. |
forward | --seek-forward | Move playback later. |
end | --seek-end | Move playback to finite duration. |
This control is command-only. It does not submit form values.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days