HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
VideoView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA video player with controls drawn by Helix.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/video'import'@fusion.dev/helix-headless/video'Preview
API ReferenceRoothelix-videoA video player with controls drawn by Helix.
PropTypeDescriptionautoplaybooleanDefaultfalseWhether the video starts playing on its own. Browsers allow this only while
it is muted.captionsHiddenLabelstringDefault"Captions off"What the live region says when c turns captions off.captionsLabelstringDefault"Captions"The name of the captions control when the video has one track. The control
turns that track on and off.captionsOffLabelstringDefault"Off"The name of the row that turns captions off, when the video has several
tracks.captionsShownLabelstringDefault"Captions on"What the live region says when c turns captions on.controlsbooleanDefaultfalseWhether the browser draws its native controls. When set, this element draws
no controls of its own.crossOrigin"anonymous"|"use-credentials"|nullDefaultnullHow the media is fetched across origins, which decides whether a track can
be read.currentTimenumberWhere playback has reached, in seconds.defaultMutedbooleanDefaultfalseWhether the video starts muted, which an autoplaying video must do.defaultPlaybackRatenumberThe playback rate the video returns to by default.disablePictureInPicturebooleanDefaultfalseWhether picture in picture is turned off, so the browser does not offer it.disableRemotePlaybackbooleanDefaultfalseWhether remote playback is turned off, so the browser does not offer to
play on another device.downloadLabelstringDefault"Download"What the control that saves the file is called.errorLabelstringDefault"This video could not be played"The message shown when the video cannot be played.extraControlsstringDefault""Extra controls to add to the bar, named in the order they appear.forwardLabelstringDefault"{seconds, plural, one {Forward # second} other {Forward # seconds}}"What the control that skips ahead is called. {seconds} is how far, written
in the locale, and each language writes the forms it has.fullscreenLabelstringDefault"Fullscreen"What the control that fills the screen is called.idleDelaynumberDefault2500How long the control bar stays after the pointer stops moving, in
milliseconds. The attribute also takes a CSS time, such as 2.5s.labelstringDefault""Accessible name for the video, which its filename does not provide.loadingLabelstringDefault"Loading"The text announced while the video waits for more data.loopbooleanDefaultfalseWhether the video starts again at the end.mediaTitlestringDefault""The title the device's own media controls show while the video plays,
such as on a lock screen. Empty, the default, shows label. A playlist
writes the current entry's name here.moreLabelstringDefault"More controls"What the button that opens overflow-controls is called.mutedbooleanWhether the video is muted right now. The mute control changes it.mutedLabelstringDefault"Muted"What the live region says when a key mutes the video.muteLabelstringDefault"Mute"The name of the mute control. The control shows as pressed while the video
is muted.nextLabelstringDefault"Next"What the control that asks for the next video is called.overflowControlsstringDefault""Controls to place in a menu behind one button, named the same way as
extra-controls.pausedLabelstringDefault"Paused"What the live region says when a key pauses the video.pauseLabelstringDefault"Pause"The name of the play control while pressing it would pause the video.percentLabelstringDefault"{percent} percent"How the volume is read out. {percent} is the volume from 0 to 100,
written in the locale, and a language that needs plural forms writes them
with {percent, plural, ...}.pipLabelstringDefault"Picture in picture"What the control that floats the video over other windows is called.playbackRatenumberHow fast the video plays, where 1 is the recorded speed.playerLabelstringDefault"Video"The name of the player when label is not set. The player is a group, and
this is what a screen reader calls it on arriving.playingLabelstringDefault"Playing"What the live region says when a key plays the video.playLabelstringDefault"Play"The name of the play control while pressing it would start the video.playsInlinebooleanDefaulttrueWhether the video plays in place, inside the page.posterstringDefault""An image shown before the video plays, drawn by the browser.preload"auto"|"metadata"|"none"Default"metadata"How much of the video to load before playback is requested.preservesPitchbooleanWhether pitch is held steady when the rate changes.previousLabelstringDefault"Previous"What the control that asks for the previous video is called.remoteLabelstringDefault"Play on another device"What the control that casts the video to another device is called.rewindLabelstringDefault"{seconds, plural, one {Back # second} other {Back # seconds}}"What the control that skips back is called. {seconds} is how far, written
in the locale, and each language writes the forms it has.seekLabelstringDefault"Seek"What the scrubber is called.separation"filled"|"plain"How the control bar sits on the picture.speedLabelstringDefault"Playback speed"What the control that changes the speed is called.speedsstringDefault"0.5 1 1.5 2"The speeds offered, slowest first, as multipliers of normal.srcstringDefault""The URL of the video, when there is one file.startControl"none"The large play button over the picture while the video is not playing. Set
none to hide it.subtitlesLabelstringDefault"Subtitles"What the menu of tracks is called, where the video has several.timeLabelstringDefault"{position} of {duration}"How the scrubber reads out where the video is, with {position} and
{duration} filled in.unmutedLabelstringDefault"Unmuted"What the live region says when a key unmutes the video.volumenumberThe volume, from 0 to 1.volumeChangedLabelstringDefault"Volume {percent} percent"What the live region says when a key changes the volume. {percent} is the
volume from 0 to 100, written in the locale.volumeLabelstringDefault"Volume"What the volume slider is called.
ReadTypeDescriptioncurrentSrcstringThe URL of the source the video is playing.durationnumberHow long the media runs, in seconds, and NaN until that is known.endedbooleanWhether playback has run off the end.pausedbooleanWhether playback is paused, which is the resting state.seekingbooleanWhether the video is moving to a new position.videoHeightnumberThe media's own height in pixels, and zero until the metadata has loaded.videoWidthnumberThe media's own width in pixels, and zero until the metadata has loaded.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)<source> and <track> elements, which are copied into the video.captions-iconReplaces the glyph on the captions control.controlsExtra controls, added to the control bar before the fullscreen button.download-iconReplaces the glyph on the download control, on the bar or in the overflow menu.exit-fullscreen-iconReplaces the glyph on the fullscreen control while the player fills the screen.forward-iconReplaces the glyph on the control that skips forward, on the bar or in the overflow menu.fullscreen-iconReplaces the glyph on the fullscreen control.headerContent over the top left of the picture, such as a heading and a back button.more-iconReplaces the glyph on the button that opens the overflow menu.mute-iconReplaces the glyph on the mute control while there is no sound.next-iconReplaces the glyph on the control that asks for the next video, on the bar or in the overflow menu.pause-iconReplaces the glyph on the play control while the video plays.pip-iconReplaces the glyph on the picture-in-picture control, on the bar or in the overflow menu.play-iconReplaces the glyph on the play control while the video is paused.posterShown over the video until it starts.previous-iconReplaces the glyph on the control that asks for the previous video, on the bar or in the overflow menu.remote-iconReplaces the glyph on the control that plays on another device, on the bar or in the overflow menu.rewind-iconReplaces the glyph on the control that skips back, on the bar or in the overflow menu.speed-iconReplaces the glyph beside the playback speed in the overflow menu. On the bar, the speed is shown as a number.start-iconReplaces the glyph on the large play button over the picture.volume-iconReplaces the glyph on the mute control while there is sound.
EventTypeDescriptionabortEventThe media stopped loading before it finished, without an error.canplayEventEnough has loaded to start playing.canplaythroughEventEnough has loaded to play to the end without stopping, at the current rate.durationchangeEventThe duration changed, which it does once the metadata is in.emptiedEventThe media was reset, as when src changes.endedEventThe video reached its end.errorEventThe source could not be loaded or played. The player shows error-label as well.helix-nextHelixNextEventThe next video was requested. Load it in response.helix-previousHelixPreviousEventThe previous video was requested. Load it in response.loadeddataEventThe frame at the current position has loaded.loadedmetadataEventThe duration and the size of the video are known.loadstartEventThe video started looking for its media.pauseEventPlayback paused.playEventPlayback was asked to start.playingEventPlayback started, or started again after waiting for data.progressEventMore of the media has downloaded.ratechangeEventThe playback rate changed. Read playbackRate.resizeEventThe video's own width or height changed. Read videoWidth and videoHeight.seekedEventA move to a new position finished.seekingEventA move to a new position started.stalledEventThe browser is trying to load more data and none is arriving.suspendEventLoading paused on purpose, as when preload asks for no more.timeupdateEventThe position changed. Read currentTime.volumechangeEventThe volume or the mute changed. Read volume and muted.waitingEventPlayback stopped to wait for more data.
MethodTypeDescriptionpause() => voidPauses playback and leaves the current frame showing.play() => Promise<void>Starts playback, and returns the video's own promise: it settles when
playback starts, and rejects when the browser refuses.seek(seconds: number) => voidMoves to a point in seconds, clamped to what exists.toggle() => voidPlays the video if it is paused, and pauses it if it is playing. The play
button and the play keys call this.
PartDescriptioncaptionsThe button that turns captions on and off.captions-menuThe menu of caption languages, when the video has more than one track.captions-menu-backThe control that returns from a submenu.captions-menu-back-markThe glyph on the back control of a submenu.captions-menu-emptyThe text shown when the menu has no items.captions-menu-headerThe bar above a submenu, holding the way back and its name.captions-menu-liveThe inner menu's live part, a live region that repeats the empty and loading text for screen readers.captions-menu-loadingThe text shown while the items are loading.captions-menu-search-fieldThe inner menu's filter field, drawn with filterable.captions-menu-surfaceThe floating panel the menu is drawn on.captions-menu-titleThe name of the submenu that is showing.controlsThe control bar along the bottom.cueThe caption currently on screen, drawn by this element.downloadThe button that downloads the file, when extra-controls includes it.entryOne row in a menu that the player opens.entry-endThe trailing column of a row, which holds its shortcut. It is always rendered.entry-itemThe row, which is an <a> where href is set.entry-markThe trailing mark: a check mark when the row is checked, or a caret when it opens a submenu.entry-shortcutThe key drawn for a row's shortcut. The player's rows set none.entry-shortcut-kbdThe key inside entry-shortcut.entry-shortcut-keyOne key of a row's shortcut chord, inside entry-shortcut. The player's rows set none.entry-shortcut-separatorThe + between two keys of a row's shortcut, where the platform writes one.entry-startThe leading column that holds the start slot. It is always rendered.entry-surfaceThe panel a row's submenu opens in beside it. The player's rows have none.failureThe message shown when the source cannot be played.forwardThe button that skips forward ten seconds.fullscreenThe button that enters and leaves fullscreen.headerThe region at the top left that holds the header slot.liveA live region that says the loading text, and what a key changed, such as the volume. Visually hidden in the styled tier.loadingThe text shown while the video waits for more data. Draw the spinner with ::part(loading)::before in your stylesheet. This tier ships no CSS and renders no extra box for it.moreThe button that opens the overflow menu.muteThe button that turns sound on and off.nextThe button that requests the next video, when extra-controls includes it.overflowThe menu that holds the controls kept off the bar.overflow-backThe control that returns from a submenu.overflow-back-markThe glyph on the back control of a submenu.overflow-emptyThe text shown when the menu has no items.overflow-headerThe bar above a submenu, holding the way back and its name.overflow-liveThe inner menu's live part, a live region that repeats the empty and loading text for screen readers.overflow-loadingThe text shown while the items are loading.overflow-search-fieldThe inner menu's filter field, drawn with filterable.overflow-surfaceThe floating panel the menu is drawn on.overflow-titleThe name of the submenu that is showing.pipThe picture-in-picture button, when extra-controls includes it and the browser supports it.playThe button that plays and pauses.posterThe poster that covers the video before it plays.previousThe button that requests the previous video, when extra-controls includes it.remoteThe button that plays the video on another device, when one is available.remote-pressedThe remote control while the picture is on another device, beside remote.rewindThe button that skips back ten seconds.scrubberThe slider that shows the position and moves playback to a new one.soundThe mute button and the volume slider, grouped as one control.speedThe playback speed control, when extra-controls includes it.stageThe box holding the picture and its controls, and the focus target the keys are bound to.startThe large play button over the picture, shown while the video is not playing.timeThe position and the duration.videoThe video itself.volumeThe volume slider.
CSS PropertyDescription--video-accent-colorColor of the played part of the scrubber.--video-aspect-ratioThe shape of the box. Defaults to the video's own once known, and 16 / 9 until then.--video-controls-colorColor of the icons and text on the control bar.--video-intrinsic-ratioThe media's own aspect ratio, once it is known. --video-aspect-ratio overrides it.--video-levelThe current volume, 0 to 1.--video-progressHow far playback has reached, as a fraction of the duration.--video-radiusCorner radius of the player.--video-speed-sizeWidth of the playback speed control, fixed so the row does not shift when the number changes.--video-start-sizeWidth of the large play button.--video-well-colorColor behind the picture and in the letterbox bars.
Custom stateDescriptionendedPlayback reached the end, until it starts again or the source changes.errorThe source could not be played, and failure shows.fullscreenThe player fills the screen.idleThe video plays and the user has been still for idle-delay, so the bar hides.mutedThe sound is off.pausedPlayback is paused, which is where every player starts.playingPlayback runs, waiting for data included.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingPlayback stopped to wait for more data, and loading shows.
Roothelix-headless-videoA video player with controls drawn by Helix.
PropTypeDescriptionautoplaybooleanDefaultfalseWhether the video starts playing on its own. Browsers allow this only while
it is muted.captionsHiddenLabelstringDefault"Captions off"What the live region says when c turns captions off.captionsLabelstringDefault"Captions"The name of the captions control when the video has one track. The control
turns that track on and off.captionsOffLabelstringDefault"Off"The name of the row that turns captions off, when the video has several
tracks.captionsShownLabelstringDefault"Captions on"What the live region says when c turns captions on.controlsbooleanDefaultfalseWhether the browser draws its native controls. When set, this element draws
no controls of its own.crossOrigin"anonymous"|"use-credentials"|nullDefaultnullHow the media is fetched across origins, which decides whether a track can
be read.currentTimenumberWhere playback has reached, in seconds.defaultMutedbooleanDefaultfalseWhether the video starts muted, which an autoplaying video must do.defaultPlaybackRatenumberThe playback rate the video returns to by default.disablePictureInPicturebooleanDefaultfalseWhether picture in picture is turned off, so the browser does not offer it.disableRemotePlaybackbooleanDefaultfalseWhether remote playback is turned off, so the browser does not offer to
play on another device.downloadLabelstringDefault"Download"What the control that saves the file is called.errorLabelstringDefault"This video could not be played"The message shown when the video cannot be played.extraControlsstringDefault""Extra controls to add to the bar, named in the order they appear.forwardLabelstringDefault"{seconds, plural, one {Forward # second} other {Forward # seconds}}"What the control that skips ahead is called. {seconds} is how far, written
in the locale, and each language writes the forms it has.fullscreenLabelstringDefault"Fullscreen"What the control that fills the screen is called.idleDelaynumberDefault2500How long the control bar stays after the pointer stops moving, in
milliseconds. The attribute also takes a CSS time, such as 2.5s.labelstringDefault""Accessible name for the video, which its filename does not provide.loadingLabelstringDefault"Loading"The text announced while the video waits for more data.loopbooleanDefaultfalseWhether the video starts again at the end.mediaTitlestringDefault""The title the device's own media controls show while the video plays,
such as on a lock screen. Empty, the default, shows label. A playlist
writes the current entry's name here.moreLabelstringDefault"More controls"What the button that opens overflow-controls is called.mutedbooleanWhether the video is muted right now. The mute control changes it.mutedLabelstringDefault"Muted"What the live region says when a key mutes the video.muteLabelstringDefault"Mute"The name of the mute control. The control shows as pressed while the video
is muted.nextLabelstringDefault"Next"What the control that asks for the next video is called.overflowControlsstringDefault""Controls to place in a menu behind one button, named the same way as
extra-controls.pausedLabelstringDefault"Paused"What the live region says when a key pauses the video.pauseLabelstringDefault"Pause"The name of the play control while pressing it would pause the video.percentLabelstringDefault"{percent} percent"How the volume is read out. {percent} is the volume from 0 to 100,
written in the locale, and a language that needs plural forms writes them
with {percent, plural, ...}.pipLabelstringDefault"Picture in picture"What the control that floats the video over other windows is called.playbackRatenumberHow fast the video plays, where 1 is the recorded speed.playerLabelstringDefault"Video"The name of the player when label is not set. The player is a group, and
this is what a screen reader calls it on arriving.playingLabelstringDefault"Playing"What the live region says when a key plays the video.playLabelstringDefault"Play"The name of the play control while pressing it would start the video.playsInlinebooleanDefaulttrueWhether the video plays in place, inside the page.posterstringDefault""An image shown before the video plays, drawn by the browser.preload"auto"|"metadata"|"none"Default"metadata"How much of the video to load before playback is requested.preservesPitchbooleanWhether pitch is held steady when the rate changes.previousLabelstringDefault"Previous"What the control that asks for the previous video is called.remoteLabelstringDefault"Play on another device"What the control that casts the video to another device is called.rewindLabelstringDefault"{seconds, plural, one {Back # second} other {Back # seconds}}"What the control that skips back is called. {seconds} is how far, written
in the locale, and each language writes the forms it has.seekLabelstringDefault"Seek"What the scrubber is called.speedLabelstringDefault"Playback speed"What the control that changes the speed is called.speedsstringDefault"0.5 1 1.5 2"The speeds offered, slowest first, as multipliers of normal.srcstringDefault""The URL of the video, when there is one file.startControl"none"The large play button over the picture while the video is not playing. Set
none to hide it.subtitlesLabelstringDefault"Subtitles"What the menu of tracks is called, where the video has several.timeLabelstringDefault"{position} of {duration}"How the scrubber reads out where the video is, with {position} and
{duration} filled in.unmutedLabelstringDefault"Unmuted"What the live region says when a key unmutes the video.volumenumberThe volume, from 0 to 1.volumeChangedLabelstringDefault"Volume {percent} percent"What the live region says when a key changes the volume. {percent} is the
volume from 0 to 100, written in the locale.volumeLabelstringDefault"Volume"What the volume slider is called.
ReadTypeDescriptioncurrentSrcstringThe URL of the source the video is playing.durationnumberHow long the media runs, in seconds, and NaN until that is known.endedbooleanWhether playback has run off the end.pausedbooleanWhether playback is paused, which is the resting state.seekingbooleanWhether the video is moving to a new position.videoHeightnumberThe media's own height in pixels, and zero until the metadata has loaded.videoWidthnumberThe media's own width in pixels, and zero until the metadata has loaded.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)<source> and <track> elements, which are copied into the video.captions-iconReplaces the glyph on the captions control.controlsExtra controls, added to the control bar before the fullscreen button.download-iconReplaces the glyph on the download control, on the bar or in the overflow menu.exit-fullscreen-iconReplaces the glyph on the fullscreen control while the player fills the screen.forward-iconReplaces the glyph on the control that skips forward, on the bar or in the overflow menu.fullscreen-iconReplaces the glyph on the fullscreen control.headerContent over the top left of the picture, such as a heading and a back button.more-iconReplaces the glyph on the button that opens the overflow menu.mute-iconReplaces the glyph on the mute control while there is no sound.next-iconReplaces the glyph on the control that asks for the next video, on the bar or in the overflow menu.pause-iconReplaces the glyph on the play control while the video plays.pip-iconReplaces the glyph on the picture-in-picture control, on the bar or in the overflow menu.play-iconReplaces the glyph on the play control while the video is paused.posterShown over the video until it starts.previous-iconReplaces the glyph on the control that asks for the previous video, on the bar or in the overflow menu.remote-iconReplaces the glyph on the control that plays on another device, on the bar or in the overflow menu.rewind-iconReplaces the glyph on the control that skips back, on the bar or in the overflow menu.speed-iconReplaces the glyph beside the playback speed in the overflow menu. On the bar, the speed is shown as a number.start-iconReplaces the glyph on the large play button over the picture.volume-iconReplaces the glyph on the mute control while there is sound.
EventTypeDescriptionabortEventThe media stopped loading before it finished, without an error.canplayEventEnough has loaded to start playing.canplaythroughEventEnough has loaded to play to the end without stopping, at the current rate.durationchangeEventThe duration changed, which it does once the metadata is in.emptiedEventThe media was reset, as when src changes.endedEventThe video reached its end.errorEventThe source could not be loaded or played. The player shows error-label as well.helix-nextHelixNextEventThe next video was requested. Load it in response.helix-previousHelixPreviousEventThe previous video was requested. Load it in response.loadeddataEventThe frame at the current position has loaded.loadedmetadataEventThe duration and the size of the video are known.loadstartEventThe video started looking for its media.pauseEventPlayback paused.playEventPlayback was asked to start.playingEventPlayback started, or started again after waiting for data.progressEventMore of the media has downloaded.ratechangeEventThe playback rate changed. Read playbackRate.resizeEventThe video's own width or height changed. Read videoWidth and videoHeight.seekedEventA move to a new position finished.seekingEventA move to a new position started.stalledEventThe browser is trying to load more data and none is arriving.suspendEventLoading paused on purpose, as when preload asks for no more.timeupdateEventThe position changed. Read currentTime.volumechangeEventThe volume or the mute changed. Read volume and muted.waitingEventPlayback stopped to wait for more data.
MethodTypeDescriptionpause() => voidPauses playback and leaves the current frame showing.play() => Promise<void>Starts playback, and returns the video's own promise: it settles when
playback starts, and rejects when the browser refuses.seek(seconds: number) => voidMoves to a point in seconds, clamped to what exists.toggle() => voidPlays the video if it is paused, and pauses it if it is playing. The play
button and the play keys call this.
PartDescriptioncaptionsThe button that turns captions on and off.captions-menuThe menu of caption languages, when the video has more than one track.captions-menu-backThe control that returns from a submenu.captions-menu-back-markThe glyph on the back control of a submenu.captions-menu-emptyThe text shown when the menu has no items.captions-menu-headerThe bar above a submenu, holding the way back and its name.captions-menu-liveThe inner menu's live part, a live region that repeats the empty and loading text for screen readers.captions-menu-loadingThe text shown while the items are loading.captions-menu-search-fieldThe inner menu's filter field, drawn with filterable.captions-menu-surfaceThe floating panel the menu is drawn on.captions-menu-titleThe name of the submenu that is showing.controlsThe control bar along the bottom.cueThe caption currently on screen, drawn by this element.downloadThe button that downloads the file, when extra-controls includes it.entryOne row in a menu that the player opens.entry-endThe trailing column of a row, which holds its shortcut. It is always rendered.entry-itemThe row, which is an <a> where href is set.entry-markThe trailing mark: a check mark when the row is checked, or a caret when it opens a submenu.entry-shortcutThe key drawn for a row's shortcut. The player's rows set none.entry-shortcut-kbdThe key inside entry-shortcut.entry-shortcut-keyOne key of a row's shortcut chord, inside entry-shortcut. The player's rows set none.entry-shortcut-separatorThe + between two keys of a row's shortcut, where the platform writes one.entry-startThe leading column that holds the start slot. It is always rendered.entry-surfaceThe panel a row's submenu opens in beside it. The player's rows have none.failureThe message shown when the source cannot be played.forwardThe button that skips forward ten seconds.fullscreenThe button that enters and leaves fullscreen.headerThe region at the top left that holds the header slot.liveA live region that says the loading text, and what a key changed, such as the volume. Visually hidden in the styled tier.loadingThe text shown while the video waits for more data. Draw the spinner with ::part(loading)::before in your stylesheet. This tier ships no CSS and renders no extra box for it.moreThe button that opens the overflow menu.muteThe button that turns sound on and off.nextThe button that requests the next video, when extra-controls includes it.overflowThe menu that holds the controls kept off the bar.overflow-backThe control that returns from a submenu.overflow-back-markThe glyph on the back control of a submenu.overflow-emptyThe text shown when the menu has no items.overflow-headerThe bar above a submenu, holding the way back and its name.overflow-liveThe inner menu's live part, a live region that repeats the empty and loading text for screen readers.overflow-loadingThe text shown while the items are loading.overflow-search-fieldThe inner menu's filter field, drawn with filterable.overflow-surfaceThe floating panel the menu is drawn on.overflow-titleThe name of the submenu that is showing.pipThe picture-in-picture button, when extra-controls includes it and the browser supports it.playThe button that plays and pauses.posterThe poster that covers the video before it plays.previousThe button that requests the previous video, when extra-controls includes it.remoteThe button that plays the video on another device, when one is available.remote-pressedThe remote control while the picture is on another device, beside remote.rewindThe button that skips back ten seconds.scrubberThe slider that shows the position and moves playback to a new one.soundThe mute button and the volume slider, grouped as one control.speedThe playback speed control, when extra-controls includes it.stageThe box holding the picture and its controls, and the focus target the keys are bound to.startThe large play button over the picture, shown while the video is not playing.timeThe position and the duration.videoThe video itself.volumeThe volume slider.
CSS PropertyDescription--video-intrinsic-ratioThe media's own aspect ratio, once it is known. --video-aspect-ratio overrides it.--video-levelThe current volume, 0 to 1.--video-progressHow far playback has reached, as a fraction of the duration.
Custom stateDescriptionendedPlayback reached the end, until it starts again or the source changes.errorThe source could not be played, and failure shows.fullscreenThe player fills the screen.idleThe video plays and the user has been still for idle-delay, so the bar hides.mutedThe sound is off.pausedPlayback is paused, which is where every player starts.playingPlayback runs, waiting for data included.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingPlayback stopped to wait for more data, and loading shows.
Examples
NameDescriptionCaptionsA clip with one captions track, and the control that turns it on and off.EventsThe native media events, relayed out of the shadow root so you can listen for them.Extra ControlsSpeed, picture-in-picture, remote playback, and download controls added to the bar.FilledA filled frame around the picture.HeaderA title over the top left of the picture, with a button beside it that goes back to the series.IconsA player with icons of your own on its controls, put in the slots named for them.Muted LoopA muted video that loops and hides its controls 1.5 seconds after the last input.NativeThe browser's native controls, turned on with controls.Overflow ControlsControls kept off the bar, behind one button.PlainNo frame and no fill, for a player inside something that has both.Playlist ControlsPrevious and next buttons that send events, so your code chooses the video.PreviewA clip with a poster and the Helix controls.PreviewA clip with a poster and the Helix controls.ScrimControls on a gradient over the picture, the default look.SourcesSeveral encodings of one clip. The browser plays the first one it supports.Start ControlA video with the large play button, and one with start-control set to none.Subtitles And Skip ButtonsTwo subtitle languages in one menu, and ten-second skip buttons on the bar.UnavailableA source that cannot be played, and the message shown for it.