UNPKG

@7sage/vidstack

Version:

UI component library for building high-quality, accessible video and audio experiences on the web.

1,646 lines (1,645 loc) 122 kB
{ "version": 1.1, "tags": [ { "name": "media-announcer", "attributes": [ { "name": "translations", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/display/announcer" } ] }, { "name": "media-airplay-button", "description": "A button for requesting remote playback via Apple AirPlay.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.apple.com/au/airplay" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/airplay-button" } ] }, { "name": "media-caption-button", "description": "A button for toggling the showing state of the captions.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/caption-button" } ] }, { "name": "media-fullscreen-button", "description": "A button for toggling the fullscreen mode of the player.", "attributes": [ { "name": "target", "description": "The target element on which to request fullscreen on. The target can be `media`\n(i.e., `<media-player>`) or `provider`. The `prefer-media` option will first see if the native\nfullscreen API is available, if not it'll try the media provider.", "values": [ { "name": "prefer-media" }, { "name": "media" }, { "name": "provider" } ], "references": [] }, { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/fullscreen-button" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/api/fullscreen" } ] }, { "name": "media-google-cast-button", "description": "A button for requesting remote playback via Google Cast.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://developers.google.com/cast/docs/overview" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/google-cast-button" } ] }, { "name": "media-live-button", "description": "This component displays the current live status of the stream. This includes whether it's\nlive, at the live edge, or not live. In addition, when this button is pressed it will skip\nahead to the live edge.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive). This will prevent seeking to the\nlive edge when pressed.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/live-button" } ] }, { "name": "media-mute-button", "description": "A button for toggling the muted state of the player.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/mute-button" } ] }, { "name": "media-pip-button", "description": "A button for toggling the picture-in-picture (PIP) mode of the player.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/pip-button" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/api/picture-in-picture" } ] }, { "name": "media-play-button", "description": "A button for toggling the playback state (play/pause) of the current media.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/play-button" } ] }, { "name": "media-seek-button", "description": "A button for seeking the current media playback forwards or backwards by a specified amount.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "seconds", "description": "The amount to seek the media playback forwards (positive number) or backwards (negative number)\nwhen the seek button is pressed.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/seek-button" } ] }, { "name": "media-toggle-button", "description": "A toggle button is a two-state button that can be either off (not pressed) or on (pressed).", "attributes": [ { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state.", "references": [] }, { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/toggle-button" } ] }, { "name": "media-captions", "description": "Renders and displays captions/subtitles. This will be an overlay for video and a simple\ncaptions box for audio.", "attributes": [ { "name": "text-dir", "values": [ { "name": "ltr" }, { "name": "rtl" } ], "references": [] }, { "name": "example-text", "description": "The text to be displayed when an example caption is being shown.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/display/captions" } ] }, { "name": "media-chapter-title", "attributes": [ { "name": "default-text", "description": "Specify text to be displayed when no chapter title is available.", "references": [] } ], "references": [] }, { "name": "media-controls", "description": "This component creates a container for control groups.", "attributes": [ { "name": "hide-delay", "description": "The default amount of delay in milliseconds while media playback is progressing without user\nactivity to hide the controls.", "references": [] }, { "name": "hide-on-mouse-leave", "description": "Whether controls visibility should be toggled when the mouse enters and leaves the player\ncontainer.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/media/controls" } ] }, { "name": "media-controls-group", "description": "This component creates a container for media controls.", "attributes": [], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/media/controls#group" } ] }, { "name": "media-gesture", "description": "This component enables actions to be performed on the media based on user gestures.", "attributes": [ { "name": "disabled", "description": "Whether this gesture should not be triggered.", "references": [] }, { "name": "event", "description": "The DOM event type that will trigger this gesture. It can be any valid DOM event type. Any\nevent can be prefixed with `dbl` to ensure it occurs twice in succession (max 200ms gap).", "values": [ { "name": "keyof HTMLElementEventMap" }, { "name": "dblended" }, { "name": "dblerror" }, { "name": "dblplaying" }, { "name": "dblseeking" }, { "name": "dblwaiting" }, { "name": "dblplay" }, { "name": "dblprogress" }, { "name": "dblmedia-player-connect" }, { "name": "dblfind-media-player" }, { "name": "dblfullscreenchange" }, { "name": "dblfullscreenerror" }, { "name": "dblabort" }, { "name": "dblanimationcancel" }, { "name": "dblanimationend" }, { "name": "dblanimationiteration" }, { "name": "dblanimationstart" }, { "name": "dblauxclick" }, { "name": "dblbeforeinput" }, { "name": "dblbeforetoggle" }, { "name": "dblblur" }, { "name": "dblcancel" }, { "name": "dblcanplay" }, { "name": "dblcanplaythrough" }, { "name": "dblchange" }, { "name": "dblclose" }, { "name": "dblcompositionend" }, { "name": "dblcompositionstart" }, { "name": "dblcompositionupdate" }, { "name": "dblcontextlost" }, { "name": "dblcontextmenu" }, { "name": "dblcontextrestored" }, { "name": "dblcopy" }, { "name": "dblcuechange" }, { "name": "dblcut" }, { "name": "dbldblclick" }, { "name": "dbldrag" }, { "name": "dbldragend" }, { "name": "dbldragenter" }, { "name": "dbldragleave" }, { "name": "dbldragover" }, { "name": "dbldragstart" }, { "name": "dbldrop" }, { "name": "dbldurationchange" }, { "name": "dblemptied" }, { "name": "dblfocus" }, { "name": "dblfocusin" }, { "name": "dblfocusout" }, { "name": "dblformdata" }, { "name": "dblgotpointercapture" }, { "name": "dblinput" }, { "name": "dblinvalid" }, { "name": "dblkeydown" }, { "name": "dblkeypress" }, { "name": "dblkeyup" }, { "name": "dblload" }, { "name": "dblloadeddata" }, { "name": "dblloadedmetadata" }, { "name": "dblloadstart" }, { "name": "dbllostpointercapture" }, { "name": "dblmousedown" }, { "name": "dblmouseenter" }, { "name": "dblmouseleave" }, { "name": "dblmousemove" }, { "name": "dblmouseout" }, { "name": "dblmouseover" }, { "name": "dblmouseup" }, { "name": "dblpaste" }, { "name": "dblpause" }, { "name": "dblpointercancel" }, { "name": "dblpointerdown" }, { "name": "dblpointerenter" }, { "name": "dblpointerleave" }, { "name": "dblpointermove" }, { "name": "dblpointerout" }, { "name": "dblpointerover" }, { "name": "dblpointerup" }, { "name": "dblratechange" }, { "name": "dblreset" }, { "name": "dblresize" }, { "name": "dblscroll" }, { "name": "dblscrollend" }, { "name": "dblsecuritypolicyviolation" }, { "name": "dblseeked" }, { "name": "dblselect" }, { "name": "dblselectionchange" }, { "name": "dblselectstart" }, { "name": "dblslotchange" }, { "name": "dblstalled" }, { "name": "dblsubmit" }, { "name": "dblsuspend" }, { "name": "dbltimeupdate" }, { "name": "dbltoggle" }, { "name": "dbltouchcancel" }, { "name": "dbltouchend" }, { "name": "dbltouchmove" }, { "name": "dbltouchstart" }, { "name": "dbltransitioncancel" }, { "name": "dbltransitionend" }, { "name": "dbltransitionrun" }, { "name": "dbltransitionstart" }, { "name": "dblvolumechange" }, { "name": "dblwebkitanimationend" }, { "name": "dblwebkitanimationiteration" }, { "name": "dblwebkitanimationstart" }, { "name": "dblwebkittransitionend" }, { "name": "dblwheel" }, { "name": "dblbeforeunload" }, { "name": "dblpageshow" }, { "name": "dblpagehide" }, { "name": "dblvisibilitychange" }, { "name": "dblenterpictureinpicture" }, { "name": "dblleavepictureinpicture" }, { "name": "dblwebkitpresentationmodechanged" }, { "name": "dblvds-log" } ], "references": [] }, { "name": "action", "description": "An action describes the type of media request event that will be dispatched, which will\nultimately perform some operation on the player.", "values": [ { "name": "play" }, { "name": "pause" }, { "name": "toggle:controls" }, { "name": "toggle:fullscreen" }, { "name": "toggle:muted" }, { "name": "toggle:paused" } ], "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/media/gesture" } ] }, { "name": "media-audio-layout", "description": "The audio layout is our production-ready UI that's displayed when the media view type is set to\n'audio'. It includes support for audio tracks, slider chapters, captions, live streams, and much\nmore out of the box.", "attributes": [ { "name": "when", "description": "Determines when the UI should be displayed.", "values": [ { "name": "MediaPlayerQuery" } ], "references": [] }, { "name": "small-when", "description": "Determines when the small (e.g., mobile) UI should be displayed.", "values": [ { "name": "MediaPlayerQuery" } ], "references": [] }, { "name": "thumbnails", "description": "The thumbnails resource.", "values": [ { "name": "ThumbnailImageInit[]" }, { "name": "ThumbnailStoryboard" }, { "name": "MuxThumbnailStoryboard" } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "color-scheme", "description": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "values": [ { "name": "light" }, { "name": "dark" }, { "name": "system" }, { "name": "default" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "description": "Sets the download URL and filename for the download button.", "values": [], "references": [] }, { "name": "custom-icons", "description": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons.", "references": [] }, { "name": "translations", "description": "Translation map from english to your desired language for words used throughout the layout.", "references": [] }, { "name": "menu-container", "description": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`.", "values": [ { "name": "HTMLElement" } ], "references": [] }, { "name": "menu-group", "description": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout.", "values": [ { "name": "top" }, { "name": "bottom" } ], "references": [] }, { "name": "no-audio-gain", "description": "Disable audio boost slider in the settings menu.", "references": [] }, { "name": "no-modal", "description": "Whether modal menus should be disabled when the small layout is active. A modal menu is\na floating panel that floats up from the bottom of the screen (outside of the player). It's\nenabled by default as it provides a better user experience for touch devices.", "references": [] }, { "name": "no-scrub-gesture", "description": "Whether to disable scrubbing by touch swiping left or right on the player canvas.", "references": [] }, { "name": "slider-chapters-min-width", "description": "The minimum width of the slider to start displaying slider chapters when available.", "references": [] }, { "name": "disable-time-slider", "description": "Whether the time slider should be disabled.", "references": [] }, { "name": "no-gestures", "description": "Whether all gestures such as press to play or seek should not be active.", "references": [] }, { "name": "no-keyboard-animations", "description": "Whether keyboard actions should not be displayed.", "references": [] }, { "name": "hide-quality-bitrate", "description": "Whether the bitrate should be hidden in the settings quality hint.", "references": [] }, { "name": "playback-rates", "description": "The playback rate options to be displayed in the settings menu.", "values": [], "references": [] }, { "name": "audio-gains", "description": "The audio gain options to be displayed in the settings menu.", "values": [], "references": [] }, { "name": "seek-step", "description": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts.", "references": [] } ], "references": [] }, { "name": "media-video-layout", "description": "The video layout is our production-ready UI that's displayed when the media view type is set to\n'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider\npreviews, captions, audio/quality settings, live streams, and much more out of the box.", "attributes": [ { "name": "when", "description": "Determines when the UI should be displayed.", "values": [ { "name": "MediaPlayerQuery" } ], "references": [] }, { "name": "small-when", "description": "Determines when the small (e.g., mobile) UI should be displayed.", "values": [ { "name": "MediaPlayerQuery" } ], "references": [] }, { "name": "thumbnails", "description": "The thumbnails resource.", "values": [ { "name": "ThumbnailImageInit[]" }, { "name": "ThumbnailStoryboard" }, { "name": "MuxThumbnailStoryboard" } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "color-scheme", "description": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "values": [ { "name": "light" }, { "name": "dark" }, { "name": "system" }, { "name": "default" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "description": "Sets the download URL and filename for the download button.", "values": [], "references": [] }, { "name": "custom-icons", "description": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons.", "references": [] }, { "name": "translations", "description": "Translation map from english to your desired language for words used throughout the layout.", "references": [] }, { "name": "menu-container", "description": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`.", "values": [ { "name": "HTMLElement" } ], "references": [] }, { "name": "menu-group", "description": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout.", "values": [ { "name": "top" }, { "name": "bottom" } ], "references": [] }, { "name": "no-audio-gain", "description": "Disable audio boost slider in the settings menu.", "references": [] }, { "name": "no-modal", "description": "Whether modal menus should be disabled when the small layout is active. A modal menu is\na floating panel that floats up from the bottom of the screen (outside of the player). It's\nenabled by default as it provides a better user experience for touch devices.", "references": [] }, { "name": "no-scrub-gesture", "description": "Whether to disable scrubbing by touch swiping left or right on the player canvas.", "references": [] }, { "name": "slider-chapters-min-width", "description": "The minimum width of the slider to start displaying slider chapters when available.", "references": [] }, { "name": "disable-time-slider", "description": "Whether the time slider should be disabled.", "references": [] }, { "name": "no-gestures", "description": "Whether all gestures such as press to play or seek should not be active.", "references": [] }, { "name": "no-keyboard-animations", "description": "Whether keyboard actions should not be displayed.", "references": [] }, { "name": "hide-quality-bitrate", "description": "Whether the bitrate should be hidden in the settings quality hint.", "references": [] }, { "name": "playback-rates", "description": "The playback rate options to be displayed in the settings menu.", "values": [], "references": [] }, { "name": "audio-gains", "description": "The audio gain options to be displayed in the settings menu.", "values": [], "references": [] }, { "name": "seek-step", "description": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts.", "references": [] } ], "references": [] }, { "name": "media-layout", "attributes": [ { "name": "when", "values": [ { "name": "MediaPlayerQuery" } ], "references": [] } ], "references": [] }, { "name": "media-plyr-layout", "attributes": [ { "name": "click-to-play", "description": "Press the video container to toggle play/pause.", "references": [] }, { "name": "click-to-fullscreen", "description": "Double-press the video container to toggle fullscreen.", "references": [] }, { "name": "controls", "description": "The controls to be included in the layout and their order specified by the position in the\narray.", "references": [] }, { "name": "custom-icons", "description": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons.", "references": [] }, { "name": "display-duration", "description": "Whether the duration should be displayed. This is ignored if `toggleTime` is `true`.", "references": [] }, { "name": "download", "description": "Sets the download URL and filename for the download button. The download button must be\nincluded in the `controls` prop for this to take effect.", "values": [], "references": [] }, { "name": "markers", "description": "Points on the time slider which should be visually marked for the user.", "references": [] }, { "name": "invert-time", "description": "Display the current time as a countdown rather than an incremental counter.", "references": [] }, { "name": "thumbnails", "description": "The thumbnails resource.", "values": [ { "name": "ThumbnailImageInit[]" }, { "name": "ThumbnailStoryboard" }, { "name": "MuxThumbnailStoryboard" } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "toggle-time", "description": "Allow users to press to toggle the inverted time.", "references": [] }, { "name": "translations", "description": "Translation map from english to your desired language for words used throughout the layout.", "references": [] }, { "name": "seek-time", "description": "The time, in seconds, to seek when a user hits fast forward or rewind.", "references": [] }, { "name": "speed", "description": "The speed options to display in the UI.", "values": [], "references": [] } ], "references": [] }, { "name": "media-audio-gain-radio-group", "description": "This component manages audio gain radios.", "attributes": [ { "name": "gains", "description": "The audio gain options to be displayed.", "references": [] }, { "name": "normal-label", "description": "The text to display for disabled audio gain (i.e., audio gain is 1.0).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/audio-gain-radio-group" } ] }, { "name": "media-audio-radio-group", "description": "This component manages audio track radios.", "attributes": [ { "name": "empty-label", "description": "The text to display when the are no audio tracks.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/audio-radio-group" } ] }, { "name": "media-captions-radio-group", "description": "This component manages caption/subtitle track radio options.", "attributes": [ { "name": "off-label", "description": "The text to display when the captions are turned off.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/captions-radio-group" } ] }, { "name": "media-chapters-radio-group", "description": "This component manages media chapters inside of a radio group.", "attributes": [ { "name": "thumbnails", "description": "The thumbnails resource.", "values": [ { "name": "ThumbnailImageInit[]" }, { "name": "ThumbnailStoryboard" }, { "name": "MuxThumbnailStoryboard" } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails" } ] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/chapters-radio-group" } ] }, { "name": "media-menu-button", "description": "A button that controls the opening and closing of a menu component. The button will become a\nmenuitem when used inside a submenu.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/menu" } ] }, { "name": "media-menu", "description": "Root menu container used to hold and manage a menu button and menu items. This component is\nused to display options in a floating panel. They can be nested to create submenus.", "attributes": [ { "name": "show-delay", "description": "The amount of time in milliseconds to wait before showing the menu.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/menu" } ] }, { "name": "media-menu-item", "description": "Represents a specific option or action, typically displayed as a text label or icon, which\nusers can select to access or perform a particular function or view related content.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/menu" } ] }, { "name": "media-menu-items", "description": "Menu items can be used to display settings or arbitrary content in a floating panel.", "attributes": [ { "name": "placement", "description": "A space-separated list which specifies the side and alignment of the menu relative\nto the menu button.", "values": [ { "name": "MenuPlacementSide" }, { "name": "top start" }, { "name": "top center" }, { "name": "top end" }, { "name": "bottom start" }, { "name": "bottom center" }, { "name": "bottom end" }, { "name": "right start" }, { "name": "right center" }, { "name": "right end" }, { "name": "left start" }, { "name": "left center" }, { "name": "left end" } ], "references": [] }, { "name": "offset", "description": "The distance in pixels between the menu items and the menu button. You can also set\nthe CSS variable `--media-menu-y-offset` to adjust this offset.", "references": [] }, { "name": "align-offset", "description": "The offset in pixels from the start/center/end aligned position. You can also set\nthe CSS variable `--media-menu-x-offset` to adjust this offset.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/menu" } ] }, { "name": "media-menu-portal", "description": "Portals menu items into the document body.", "attributes": [ { "name": "container", "description": "Specifies a DOM element or query selector for the container that the menu should be portalled\ninside. Defaults to `document.body` when set to `null`.", "values": [ { "name": "HTMLElement" } ], "references": [] }, { "name": "disabled", "description": "Whether the portal should be disabled. The value can be the string \"fullscreen\" to disable\nportals while media is fullscreen. This is to ensure the menu remains visible.", "values": [ { "name": "fullscreen" } ], "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu#portal" } ] }, { "name": "media-quality-radio-group", "description": "This component manages video quality radios.", "attributes": [ { "name": "auto-label", "description": "The text to display for the auto quality radio option.", "references": [] }, { "name": "hide-bitrate", "description": "Whether the bitrate should _not_ be displayed next to each quality radio option.", "references": [] }, { "name": "sort", "description": "Specifies how the options should be sorted. The sorting algorithm looks at both the quality\nresolution and bitrate.\n\n- Ascending: 480p, 720p, 720p (higher bitrate), 1080p\n- Descending: 1080p, 720p (higher bitrate), 720p, 480p", "values": [ { "name": "descending" }, { "name": "ascending" } ], "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/quality-radio-group" } ] }, { "name": "media-radio", "description": "A radio represents a option that a user can select inside of a radio group. Only one radio\ncan be checked in a group.", "attributes": [ { "name": "value", "description": "The radio value.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/radio" } ] }, { "name": "media-radio-group", "description": "A radio group consists of options where only one of them can be checked. Each option is\nprovided as a radio (i.e., a selectable element).", "attributes": [ { "name": "value", "description": "The value of the radio that is checked in this group.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/menu/radio-group" } ] }, { "name": "media-speed-radio-group", "description": "This component manages playback rate radios.", "attributes": [ { "name": "rates", "description": "The playback rate options to be displayed.", "references": [] }, { "name": "normal-label", "description": "The text to display for normal speed (i.e., playback rate of 1).", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/wc/player/components/menu/speed-radio-group" } ] }, { "name": "media-player", "description": "All media elements exist inside the `<media-player>` component. This component's main\nresponsibilities are to manage media state updates, dispatch media events, handle media\nrequests, and expose media state through HTML attributes and CSS properties for styling\npurposes.", "attributes": [ { "name": "autoplay", "references": [] }, { "name": "crossorigin", "values": [ { "name": "true" } ], "references": [] }, { "name": "crossorigin", "description": "Defines how the media element handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "values": [ { "name": "true" }, { "name": "MediaCrossOrigin" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] }, { "name": "duration", "description": "A `double` indicating the total playback length of the media in seconds. If this is not\nprovided it will be determined when the media loaded.", "references": [] }, { "name": "src", "description": "The URL and optionally type of the current media resource/s to be considered for playback.", "values": [ { "name": "MediaSrc" }, { "name": "MediaSrc[]" } ], "references": [ { "name": "Documentation", "url": "https://vidstack.io/docs/player/core-concepts/loading#sources" } ] }, { "name": "log-level", "description": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "values": [ { "name": "error" }, { "name": "silent" }, { "name": "warn" }, { "name": "info" }, { "name": "debug" } ], "references": [] }, { "name": "load", "description": "Indicates when the provider can begin loading media.\n\n- `eager`: media will be loaded immediately.\n- `idle`: media will be loaded after the page has loaded and `requestIdleCallback` is fired.\n- `visible`: media will delay loading until the provider has entered the viewport.\n- `custom`: media will wait for the `startLoading()` method or `media-start-loading` event.\n- `play`: media will delay loading until there is a play request.", "values": [ { "name": "play" }, { "name": "visible" }, { "name": "eager" }, { "name": "idle" }, { "name": "custom" } ], "references": [ { "name": "Documentation", "url": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "poster-load", "description": "Indicates when the player can begin loading the poster.\n\n- `eager`: poster will be loaded immediately.\n- `idle`: poster will be loaded after the page has loaded and `requestIdleCallback` is fired.\n- `visible`: poster will delay loading until the provider has entered the viewport.\n- `custom`: poster will wait for the `startLoadingPoster()` method or `media-poster-start-loading` event.", "values": [ { "name": "visible" }, { "name": "eager" }, { "name": "idle" }, { "name": "custom" } ], "references": [ { "name": "Documentation", "url": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "controls-delay", "description": "The default amount of delay in milliseconds while media playback is progressing without user\nactivity to indicate an idle state and hide controls.", "references": [] }, { "name": "hide-controls-on-mouse-leave", "description": "Whether controls visibility should be toggled when the mouse enters and leaves the player\ncontainer.", "references": [] }, { "name": "fullscreen-orientation", "description": "This method will indicate the orientation to lock the screen to when in fullscreen mode and\nthe Screen Orientation API is available.", "values": [ { "name": "none" }, { "name": "ScreenOrientationLockType" } ], "references": [] }, { "name": "google-cast", "description": "Google Cast options.", "references": [ { "name": "Documentation", "url": "https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastOptions" } ] }, { "name": "playsinline", "references": [] }, { "name": "prefer-native-hls", "description": "Whether native HLS support is preferred over using `hls.js`. We recommend setting this to\n`false` to ensure a consistent and configurable experience across browsers. In addition, our\nlive stream support and DVR detection is much better with `hls.js` so choose accordingly.\n\nThis should generally only be set to `true` if (1) you're working with HLS streams, and (2)\nyou want AirPlay to work via the native Safari controls (i.e., `controls` attribute is\npresent on the `<media-player>` element).", "references": [] }, { "name": "key-disabled", "description": "Whether keyboard support is disabled for the media player globally. This property won't disable\nstandard ARIA keyboard controls for individual components when focused.", "references": []