HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
VideoView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorPlays a video, with controls this library draws rather than the
browser's.ExperimentalSince 0.1.0MediaUsageimport'@fusion.dev/helix/video'import'@fusion.dev/helix-headless/video'Preview
API ReferenceRoothelix-videoPlays a video, with controls this library draws rather than the
browser's.
PropTypeDefaultDescriptionautoplaybooleanfalseWhether it starts on its own, which a browser only allows while silent.controlsbooleanfalseWhether the browser draws the controls instead of this element.crossOrigin"anonymous"|"use-credentials"|nullnullHow the media is fetched across origins, which decides whether a track can
be read.currentTimenumberWhere playback has reached, in seconds.defaultMutedbooleanfalseWhether it *starts* silent, which is what an autoplaying video must do.defaultPlaybackRatenumberThe rate playback returns to, which `defaultPlaybackRate` names natively.disablePictureInPicturebooleanfalseWhether the browser may offer picture in picture.disableRemotePlaybackbooleanfalseWhether the browser may offer playback on a remote device.errorLabelstring"This video could not be played"And what they are told when it will not play at all.extraControlsstring""Controls beyond the ones every player has, named in the order they appear.idleDelaynumber2500How long the bar waits after the pointer stops before it goes, in ms.labelstring""Accessible name, since a video is not described by its filename.loadingLabelstring"Loading"What a reader is told while the picture is waiting for more of itself.loopbooleanfalseWhether it starts again at the end.mutedbooleanWhether there is sound, now, which a reader's click moves.overflowControlsstring""Controls that go behind one button instead of onto the bar, named the same
way.pauseLabelstring"Pause"And while it would stop it.playbackRatenumberHow fast it plays, where 1 is the recorded speed.playLabelstring"Play"What the play control is called while it would start the video.playsInlinebooleantrueWhether it plays where it sits rather than taking over the screen.posterstring""A still shown before it plays, which the platform draws itself.preload"auto"|"metadata"|"none""metadata"How much to fetch before anything is asked for.preservesPitchbooleanWhether pitch is held steady when the rate changes.separation"filled"|"plain"Whether the bar floats on the picture or sits on its own ground.speedsstring"0.5 1 1.5 2"The speeds offered, slowest first, as multipliers of normal.srcstring""Where the video is, for the common case of one file.startControl"none"The big mark over the picture whenever it is not playing, or `none`.volumenumberHow loud it plays, 0 to 1.
ReadTypeDescriptioncurrentSrcstringThe media's own state, under the platform's own names.durationnumberHow long the media runs, in seconds, and `NaN` until that is known.endedbooleanWhether playback has run off the end.pausedbooleanWhether playback is stopped, which is the resting state and not an error.seekingbooleanWhether it is currently 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.backTop left over the frame, for a way out of a set.controlsAdded to the control bar, before fullscreen.posterShown over the video until it starts.
EventTypeDescriptionendedEventRelayed, because it does not cross a shadow boundary.helix-nextHelixNextEventFired when the reader asks for the next item.helix-previousHelixPreviousEventFired when they ask for the previous one.pauseEventRelayed for the same reason.playEventRelayed for the same reason.
MethodTypeDescriptionpause() => voidStops, leaving the frame up.play() => voidStarts playing, where the platform allows it.seek(seconds: number) => voidMoves to a point in seconds, clamped to what exists.toggle() => voidToggles playback, which is what every key and the button both come to.
PartDescriptionbackThe region top left, for a way out of a set.captionsSubtitles on and off.captions-menuThe language menu, where there is more than one.captions-menu-backThe control that returns from a submenu.captions-menu-back-markThe glyph on the back control of a submenu.captions-menu-emptyShown when there are no items to show.captions-menu-headerThe bar above a submenu, holding the way back and its name.captions-menu-loadingShown while the items are still on their way.captions-menu-surfaceThe floating panel the menu is drawn on.captions-menu-titleThe name of the submenu that is showing.controlsThe bar along the bottom.cueThe caption on screen now, drawn by this element.downloadSaves the file, where it was asked for.entryOne row in a menu this player opens.entry-itemThe row, which is an `<a>` where `href` is set.entry-markThe trailing mark: a tick when checked, a caret when it opens.entry-startThe leading column, which is a slot and is always there.failureWhat is said when the source will not play.forwardThe control that goes on ten seconds.fullscreenThe whole screen, and back.loadingWhat is said while the picture waits for more of itself.loading-markThe part of that which spins.moreThe button that opens it.muteSound on and off.nextAsks for the next item, where it was asked for.overflowThe menu holding 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-emptyShown when there are no items to show.overflow-headerThe bar above a submenu, holding the way back and its name.overflow-loadingShown while the items are still on their way.overflow-surfaceThe floating panel the menu is drawn on.overflow-titleThe name of the submenu that is showing.pipPicture in picture, where it was asked for and exists.playPlay and pause.posterWhat covers it before it plays.previousAsks for the previous one.remotePlay on another device, where one is available.rewindThe control that goes back ten seconds.scrubberWhere it is, and where to go.soundThe speaker and its level, which are one control.speedPlayback speed, where it was asked for.stageThe box holding the picture and its controls, and the focus target the keys are bound to.startThe mark over the picture before anything has played.timeThe position and the duration.videoThe video itself.volumeHow loud.
CSS PropertyDescription--video-accent-colorThe 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-colorThe ink on the 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-radiusThe corner it is cut to.--video-speed-sizeHow wide the playback speed control is held, so the row does not move when the number changes.--video-start-sizeWidth of the mark that starts it.--video-well-colorBehind the picture, and in the letterbox bars.
Roothelix-headless-videoPlays a video, with controls this library draws rather than the
browser's.
PropTypeDefaultDescriptionautoplaybooleanfalseWhether it starts on its own, which a browser only allows while silent.controlsbooleanfalseWhether the browser draws the controls instead of this element.crossOrigin"anonymous"|"use-credentials"|nullnullHow the media is fetched across origins, which decides whether a track can
be read.currentTimenumberWhere playback has reached, in seconds.defaultMutedbooleanfalseWhether it *starts* silent, which is what an autoplaying video must do.defaultPlaybackRatenumberThe rate playback returns to, which `defaultPlaybackRate` names natively.disablePictureInPicturebooleanfalseWhether the browser may offer picture in picture.disableRemotePlaybackbooleanfalseWhether the browser may offer playback on a remote device.errorLabelstring"This video could not be played"And what they are told when it will not play at all.extraControlsstring""Controls beyond the ones every player has, named in the order they appear.idleDelaynumber2500How long the bar waits after the pointer stops before it goes, in ms.labelstring""Accessible name, since a video is not described by its filename.loadingLabelstring"Loading"What a reader is told while the picture is waiting for more of itself.loopbooleanfalseWhether it starts again at the end.mutedbooleanWhether there is sound, now, which a reader's click moves.overflowControlsstring""Controls that go behind one button instead of onto the bar, named the same
way.pauseLabelstring"Pause"And while it would stop it.playbackRatenumberHow fast it plays, where 1 is the recorded speed.playLabelstring"Play"What the play control is called while it would start the video.playsInlinebooleantrueWhether it plays where it sits rather than taking over the screen.posterstring""A still shown before it plays, which the platform draws itself.preload"auto"|"metadata"|"none""metadata"How much to fetch before anything is asked for.preservesPitchbooleanWhether pitch is held steady when the rate changes.speedsstring"0.5 1 1.5 2"The speeds offered, slowest first, as multipliers of normal.srcstring""Where the video is, for the common case of one file.startControl"none"The big mark over the picture whenever it is not playing, or `none`.volumenumberHow loud it plays, 0 to 1.
ReadTypeDescriptioncurrentSrcstringThe media's own state, under the platform's own names.durationnumberHow long the media runs, in seconds, and `NaN` until that is known.endedbooleanWhether playback has run off the end.pausedbooleanWhether playback is stopped, which is the resting state and not an error.seekingbooleanWhether it is currently 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.backTop left over the frame, for a way out of a set.controlsAdded to the control bar, before fullscreen.posterShown over the video until it starts.
EventTypeDescriptionendedEventRelayed, because it does not cross a shadow boundary.helix-nextHelixNextEventFired when the reader asks for the next item.helix-previousHelixPreviousEventFired when they ask for the previous one.pauseEventRelayed for the same reason.playEventRelayed for the same reason.
MethodTypeDescriptionpause() => voidStops, leaving the frame up.play() => voidStarts playing, where the platform allows it.seek(seconds: number) => voidMoves to a point in seconds, clamped to what exists.toggle() => voidToggles playback, which is what every key and the button both come to.
PartDescriptionbackThe region top left, for a way out of a set.captionsSubtitles on and off.captions-menuThe language menu, where there is more than one.captions-menu-backThe control that returns from a submenu.captions-menu-back-markThe glyph on the back control of a submenu.captions-menu-emptyShown when there are no items to show.captions-menu-headerThe bar above a submenu, holding the way back and its name.captions-menu-loadingShown while the items are still on their way.captions-menu-surfaceThe floating panel the menu is drawn on.captions-menu-titleThe name of the submenu that is showing.controlsThe bar along the bottom.cueThe caption on screen now, drawn by this element.downloadSaves the file, where it was asked for.entryOne row in a menu this player opens.entry-itemThe row, which is an `<a>` where `href` is set.entry-markThe trailing mark: a tick when checked, a caret when it opens.entry-startThe leading column, which is a slot and is always there.failureWhat is said when the source will not play.forwardThe control that goes on ten seconds.fullscreenThe whole screen, and back.loadingWhat is said while the picture waits for more of itself.loading-markThe part of that which spins.moreThe button that opens it.muteSound on and off.nextAsks for the next item, where it was asked for.overflowThe menu holding 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-emptyShown when there are no items to show.overflow-headerThe bar above a submenu, holding the way back and its name.overflow-loadingShown while the items are still on their way.overflow-surfaceThe floating panel the menu is drawn on.overflow-titleThe name of the submenu that is showing.pipPicture in picture, where it was asked for and exists.playPlay and pause.posterWhat covers it before it plays.previousAsks for the previous one.remotePlay on another device, where one is available.rewindThe control that goes back ten seconds.scrubberWhere it is, and where to go.soundThe speaker and its level, which are one control.speedPlayback speed, where it was asked for.stageThe box holding the picture and its controls, and the focus target the keys are bound to.startThe mark over the picture before anything has played.timeThe position and the duration.videoThe video itself.volumeHow loud.
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.
ExamplesNameDescriptionAmbientA loop with no sound, which is the one video allowed to start on its own.CaptionsA clip with subtitle tracks and the control that chooses between them.EventsThe platform's own media names, relayed out of the shadow root so a page can hear them.Extra ControlsSkip, speed and download added to the bar.FilledA filled frame around the picture.NativeThe browser's own controls instead of these, which is what `controls` means.Overflow ControlsControls kept off the bar, behind one button.PlainNo frame and no fill, for a player inside something that has both.Playlist ControlsSkip controls, which announce and leave the set to the consumer.PreviewA clip with a poster and the controls this library draws.PreviewA clip with a poster and the controls this library draws.ScrimControls floating on a gradient, which is what a player does by default.SourcesSeveral encodings of one clip, the browser taking the first it can play.Start ControlThe mark over the picture, and the video that does without one.Subtitle LocalesTwo languages behind one control, and ten second skips on the bar.UnavailableA source that will not play, which is the other thing a still frame can mean.