{ "components": [ { "type": "component", "name": "MediaAnnouncer", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/aria/announcer.ts" }, "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/display/announcer" } ], "props": [ { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial | null", "full": "Partial | null" } } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "DOMEvent", "full": "DOMEvent" }, "detail": { "primitive": "string", "concise": "string", "full": "string" } } ], "state": [ { "name": "label", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "default": "null" }, { "name": "busy", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "MediaAnnouncerState", "full": "MediaAnnouncerState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: MediaAnnouncerState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "MediaAnnouncerProps", "state": "MediaAnnouncerState", "events": "MediaAnnouncerEvents" } }, { "type": "component", "name": "DefaultAudioLayout", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/layouts/default/audio-layout.ts" }, "docs": "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.", "doctags": [ { "name": "attr", "text": "data-match - Whether this layout is being used (query match)." }, { "name": "attr", "text": "data-sm - The small layout is active" }, { "name": "attr", "text": "data-lg - The large layout is active." }, { "name": "attr", "text": "data-size - The active layout size (sm or lg)." } ], "props": [ { "name": "when", "default": "({ viewType }) => viewType === 'audio'", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "({ width }) => width < 576", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; } | null" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "type": { "primitive": "object", "concise": "Partial | null", "full": "Partial | null" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "type": { "primitive": "string", "concise": "string | HTMLElement | null", "full": "string | HTMLElement | null" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "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." }, { "name": "noScrubGesture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "DefaultLayout", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/layouts/default/default-layout.ts" }, "props": [ { "name": "when", "default": "false", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "false", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "default": "'system'", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "default": "null", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; } | null" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial | null", "full": "Partial | null" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "default": "null", "type": { "primitive": "string", "concise": "string | HTMLElement | null", "full": "string | HTMLElement | null" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "default": "'bottom'", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "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." }, { "name": "noScrubGesture", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "default": "325", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "default": "{ min: 0, max: 2, step: 0.25 }", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "default": "{ min: 0, max: 300, step: 25 }", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "default": "10", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "DefaultVideoLayout", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/layouts/default/video-layout.ts" }, "docs": "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.", "doctags": [ { "name": "attr", "text": "data-match - Whether this layout is being used (query match)." }, { "name": "attr", "text": "data-sm - The small layout is active" }, { "name": "attr", "text": "data-lg - The large layout is active." }, { "name": "attr", "text": "data-size - The active layout size." } ], "props": [ { "name": "when", "default": "({ viewType }) => viewType === 'video'", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" }, "docs": "Determines when the UI should be displayed." }, { "name": "smallWhen", "default": "({ width, height }) => width < 576 || height < 380", "type": { "primitive": "mixed", "concise": "boolean | MediaPlayerQuery | 'never'", "full": "boolean | MediaPlayerQuery | 'never'" }, "docs": "Determines when the small (e.g., mobile) UI should be displayed." }, { "name": "thumbnails", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "colorScheme", "type": { "primitive": "string", "concise": "'light' | 'dark' | 'system' | 'default'", "full": "'light' | 'dark' | 'system' | 'default'" }, "docs": "Whether light or dark color theme should be active. Defaults to user operating system\npreference.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" } ] }, { "name": "download", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; } | null" }, "docs": "Sets the download URL and filename for the download button." }, { "name": "customIcons", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "translations", "type": { "primitive": "object", "concise": "Partial | null", "full": "Partial | null" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "menuContainer", "type": { "primitive": "string", "concise": "string | HTMLElement | null", "full": "string | HTMLElement | null" }, "docs": "A document query selector string or `HTMLElement` to mount the menu container inside. Defaults\nto `document.body` when set to `null`." }, { "name": "menuGroup", "type": { "primitive": "string", "concise": "'top' | 'bottom'", "full": "'top' | 'bottom'" }, "docs": "Specifies whether menu buttons should be placed in the top or bottom controls group. This\nonly applies to the large video layout." }, { "name": "noAudioGain", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Disable audio boost slider in the settings menu." }, { "name": "noModal", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "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." }, { "name": "noScrubGesture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to disable scrubbing by touch swiping left or right on the player canvas." }, { "name": "sliderChaptersMinWidth", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum width of the slider to start displaying slider chapters when available." }, { "name": "disableTimeSlider", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time slider should be disabled." }, { "name": "noGestures", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether all gestures such as press to play or seek should not be active." }, { "name": "noKeyboardAnimations", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard actions should not be displayed." }, { "name": "hideQualityBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should be hidden in the settings quality hint." }, { "name": "playbackRates", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The playback rate options to be displayed in the settings menu." }, { "name": "audioGains", "type": { "primitive": "object", "concise": "number[] | { min: number; max: number; step: number; }", "full": "number[] | { min: number; max: number; step: number; }" }, "docs": "The audio gain options to be displayed in the settings menu." }, { "name": "seekStep", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds to seek forward or backward when pressing the seek button or using\nkeyboard shortcuts." } ], "members": { "props": [ { "name": "isMatch", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true }, { "name": "isSmallLayout", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 2 }, "generics": { "props": "DefaultLayoutProps" } }, { "type": "component", "name": "PlyrLayout", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/layouts/plyr/plyr-layout.ts" }, "props": [ { "name": "clickToPlay", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Press the video container to toggle play/pause." }, { "name": "clickToFullscreen", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Double-press the video container to toggle fullscreen." }, { "name": "controls", "default": "[\n 'play-large',\n 'play',\n 'progress',\n 'current-time',\n 'mute+volume',\n 'captions',\n 'settings',\n 'pip',\n 'airplay',\n 'fullscreen',\n ]", "type": { "primitive": "object", "concise": "PlyrControl[]", "full": "PlyrControl[]" }, "docs": "The controls to be included in the layout and their order specified by the position in the\narray." }, { "name": "customIcons", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the default icons should _not_ be loaded. Set this to `true` when providing your own\nicons." }, { "name": "displayDuration", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the duration should be displayed. This is ignored if `toggleTime` is `true`." }, { "name": "download", "default": "null", "type": { "primitive": "mixed", "concise": "FileDownloadInfo", "full": "string | boolean | { url: string; filename: string; } | null" }, "docs": "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." }, { "name": "markers", "default": "null", "type": { "primitive": "object", "concise": "PlyrMarker[] | null", "full": "PlyrMarker[] | null" }, "docs": "Points on the time slider which should be visually marked for the user." }, { "name": "invertTime", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Display the current time as a countdown rather than an incremental counter." }, { "name": "thumbnails", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails" } ] }, { "name": "toggleTime", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Allow users to press to toggle the inverted time." }, { "name": "translations", "default": "null", "type": { "primitive": "object", "concise": "Partial | null", "full": "Partial | null" }, "docs": "Translation map from english to your desired language for words used throughout the layout." }, { "name": "seekTime", "default": "10", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The time, in seconds, to seek when a user hits fast forward or rewind." }, { "name": "speed", "default": "[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4]", "type": { "primitive": "object", "concise": "(string | number)[]", "full": "(string | number)[]" }, "docs": "The speed options to display in the UI." } ], "generics": { "props": "PlyrLayoutProps" } }, { "type": "component", "name": "MediaPlayer", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/player.ts" }, "docs": "All media elements exist inside the `` 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.", "doctags": [ { "name": "attr", "text": "data-airplay - Whether AirPlay is connected." }, { "name": "attr", "text": "data-autoplay - Autoplay has successfully started." }, { "name": "attr", "text": "data-autoplay-error - Autoplay has failed to start." }, { "name": "attr", "text": "data-buffering - Media is not ready for playback or waiting for more data." }, { "name": "attr", "text": "data-can-airplay - Whether AirPlay is available." }, { "name": "attr", "text": "data-can-fullscreen - Fullscreen mode is available." }, { "name": "attr", "text": "data-can-google-cast - Whether Google Cast is available." }, { "name": "attr", "text": "data-can-load - Media can now begin loading." }, { "name": "attr", "text": "data-can-pip - Picture-in-Picture mode is available." }, { "name": "attr", "text": "data-can-play - Media is ready for playback." }, { "name": "attr", "text": "data-can-seek - Seeking operations are permitted." }, { "name": "attr", "text": "data-captions - Captions are available and visible." }, { "name": "attr", "text": "data-controls - Controls are visible." }, { "name": "attr", "text": "data-ended - Playback has ended." }, { "name": "attr", "text": "data-error - Issue with media loading/playback." }, { "name": "attr", "text": "data-fullscreen - Fullscreen mode is active." }, { "name": "attr", "text": "data-google-cast - Whether Google Cast is connected." }, { "name": "attr", "text": "data-ios-controls - iOS controls are visible." }, { "name": "attr", "text": "data-load - Specified load strategy." }, { "name": "attr", "text": "data-live - Media is live stream." }, { "name": "attr", "text": "data-live-edge - Playback is at the live edge." }, { "name": "attr", "text": "data-loop - Media is set to replay on end." }, { "name": "attr", "text": "data-media-type - Current media type (audio/video)." }, { "name": "attr", "text": "data-muted - Whether volume is muted (0)." }, { "name": "attr", "text": "data-orientation - Current screen orientation (landscape/portrait)." }, { "name": "attr", "text": "data-paused - Whether playback is paused." }, { "name": "attr", "text": "data-pip - Picture-in-picture mode is active." }, { "name": "attr", "text": "data-playing - Playback is active." }, { "name": "attr", "text": "data-playsinline - Media should play inline by default (iOS)." }, { "name": "attr", "text": "data-pointer - The user's pointer device type (coarse/fine)." }, { "name": "attr", "text": "data-preview - The user is interacting with the time slider." }, { "name": "attr", "text": "data-remote-type - The remote playback type (airplay/google-cast)." }, { "name": "attr", "text": "data-remote-state - The remote playback state (connecting/connected/disconnected)." }, { "name": "attr", "text": "data-seeking - User is seeking to a new playback position." }, { "name": "attr", "text": "data-started - Media playback has started." }, { "name": "attr", "text": "data-stream-type - Current stream type." }, { "name": "attr", "text": "data-view-type - Current view type (audio/video)." }, { "name": "attr", "text": "data-waiting - Media is waiting for more data to resume playback." }, { "name": "attr", "text": "data-focus - Whether player is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether player is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/player" }, { "name": "deprecated", "text": "Vidstack is deprecated in favour of Video.js 10 (https://videojs.org) and receives\nsecurity fixes only until January 2028. Migration guide: https://videojs.org/docs/framework/html/guides/migrate-from-vidstack" } ], "props": [ { "name": "ariaLabel", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "A custom ARIA label for the player root. By default, the player will generate a label using\nthe current media type, live state, and title." }, { "name": "autoplay", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "deprecated": true }, { "name": "crossorigin", "default": "null", "type": { "primitive": "mixed", "concise": "string | true | null", "full": "string | true | null" }, "deprecated": true }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin | null", "full": "true | MediaCrossOrigin | null" }, "docs": "Defines how the media element handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] }, { "name": "duration", "default": "-1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "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." }, { "name": "src", "default": "''", "type": { "primitive": "string", "concise": "PlayerSrc", "full": "MediaSrc | MediaSrc[]" }, "docs": "The URL and optionally type of the current media resource/s to be considered for playback.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#sources" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "name": "logLevel", "default": "__DEV__ ? 'warn' : 'silent'", "type": { "primitive": "string", "concise": "LogLevel", "full": "'error' | 'silent' | 'warn' | 'info' | 'debug'" }, "docs": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`." }, { "name": "load", "default": "'visible'", "type": { "primitive": "string", "concise": "MediaLoadingStrategy", "full": "'play' | 'visible' | 'eager' | 'idle' | 'custom'" }, "docs": "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.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "posterLoad", "default": "'visible'", "type": { "primitive": "string", "concise": "MediaPosterLoadingStrategy", "full": "'visible' | 'eager' | 'idle' | 'custom'" }, "docs": "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.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "controlsDelay", "default": "2000", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The default amount of delay in milliseconds while media playback is progressing without user\nactivity to indicate an idle state and hide controls." }, { "name": "hideControlsOnMouseLeave", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether controls visibility should be toggled when the mouse enters and leaves the player\ncontainer." }, { "name": "fullscreenOrientation", "default": "'landscape'", "type": { "primitive": "string", "concise": "'none' | ScreenOrientationLockType | undefined", "full": "'none' | ScreenOrientationLockType | undefined" }, "docs": "This method will indicate the orientation to lock the screen to when in fullscreen mode and\nthe Screen Orientation API is available." }, { "name": "googleCast", "default": "{}", "type": { "primitive": "object", "concise": "GoogleCastOptions", "full": "GoogleCastOptions" }, "docs": "Google Cast options.", "doctags": [ { "name": "see", "text": "https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastOptions" } ] }, { "name": "playsinline", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "deprecated": true }, { "name": "preferNativeHLS", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "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 `` element)." }, { "name": "keyDisabled", "default": "'false'", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether keyboard support is disabled for the media player globally. This property won't disable\nstandard ARIA keyboard controls for individual components when focused." }, { "name": "keyTarget", "default": "`player`", "type": { "primitive": "string", "concise": "MediaKeyTarget", "full": "'player' | 'document'" }, "docs": "The target on which to listen for keyboard events (e.g., `keydown`):\n\n- `document`: the player will listen for events on the entire document. In the case that\nmultiple players are on the page, only the most recently active player will receive input.\n- `player`: the player will listen for events on the player itself or one of its children\nwere recently interacted with." }, { "name": "keyShortcuts", "default": "MEDIA_KEY_SHORTCUTS", "type": { "primitive": "object", "concise": "MediaKeyShortcuts", "full": "MediaKeyShortcuts" }, "docs": "Extends global media player keyboard shortcuts. The shortcuts can be specified as a\nspace-separated list of combinations (e.g., `p Control+Space`), array, or callbacks. See the\nprovided doc link for more information.\n\nDo note, if `aria-keyshortcuts` is specified on a component then it will take precedence\nover the respective value set here.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts" }, { "name": "example", "text": "```ts\nplayer.keyShortcuts = {\n // Space-separated list.\n togglePaused: 'k Space',\n toggleMuted: 'm',\n toggleFullscreen: 'f',\n togglePictureInPicture: 'i',\n toggleCaptions: 'c',\n // Array.\n seekBackward: ['j', 'J', 'ArrowLeft'],\n seekForward: ['l', 'L', 'ArrowRight'],\n volumeUp: 'ArrowUp',\n volumeDown: 'ArrowDown',\n speedUp: '>',\n slowDown: '<',\n // Callback.\n fooBar: {\n keys: ['k', 'Space'],\n callback(event) {}\n },\n}\n```" } ] }, { "name": "storage", "default": "null", "type": { "primitive": "string", "concise": "string | MediaStorage | null", "full": "string | MediaStorage | null" }, "docs": "Determines whether volume, time, and other player settings should be saved to storage\nand used when initializing media. The two options for enabling storage are:\n\n1. You can provide a string which will use our local storage solution and the given string as\na key prefix.\n\n2. Or, you can provide your own storage solution (e.g., database) by implementing\nthe `MediaStorage` interface and providing the object/class." }, { "name": "viewType", "default": "'unknown'", "type": { "primitive": "string", "concise": "MediaViewType", "full": "'unknown' | 'audio' | 'video'" }, "docs": "The type of player view that should be used (i.e., audio or video). By default this is set\nto `video`." }, { "name": "autoPlay", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback should automatically begin as soon as enough media is available to do so\nwithout interruption.\n\nSites which automatically play audio (or videos with an audio track) can be an unpleasant\nexperience for users, so it should be avoided when possible. If you must offer auto-play\nfunctionality, you should make it opt-in (requiring a user to specifically enable it).\n\nHowever, auto-play can be useful when creating media elements whose source will be set at a\nlater time, under user control.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay" } ] }, { "name": "clipStartTime", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Limit playback to only play _after_ a certain time. Playback will begin from this time." }, { "name": "clipEndTime", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Limit playback to only play _before_ a certain time. Playback will end at this time." }, { "name": "controls", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Indicates whether a user interface should be shown for controlling the resource. Set this to\n`false` when you want to provide your own custom controls, and `true` if you want the current\nprovider to supply its own default controls. Depending on the provider, changing this prop\nmay cause the player to completely reset.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls" } ] }, { "name": "poster", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The URL of the current poster. Defaults to `''` if no media/poster has been given or\nloaded.", "readonly": true }, { "name": "currentTime", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A `double` indicating the current playback time in seconds. Defaults to `0` if the media has\nnot started to play and has not seeked. Setting this value seeks the media to the new\ntime. The value can be set to a minimum of `0` and maximum of the total length of the\nmedia (indicated by the duration prop).", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime" } ], "readonly": true }, { "name": "loop", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media should automatically start playing from the beginning (replay) every time\nit ends.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop" } ], "readonly": true }, { "name": "liveEdgeTolerance", "default": "10", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds that `currentTime` can be behind `liveEdgeStart` and still be considered\nat the edge. The default value is 10, meaning the user can be up to 10 seconds behind the\nlive edge start and still be considered live." }, { "name": "minLiveDVRWindow", "default": "60", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum seekable length in seconds before seeking operations are permitted on live streams." }, { "name": "muted", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the audio is muted or not.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted" } ] }, { "name": "paused", "default": "true", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback should be paused. Defaults to `true` if no media has loaded or playback has\nnot started. Setting this to `false` will begin/resume playback.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused" } ] }, { "name": "playsInline", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the video is to be played \"inline\", that is within the element's playback area. Note\nthat setting this to `false` does not imply that the video will always be played in fullscreen.\nDepending on the provider, changing this prop may cause the player to completely reset.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline" } ] }, { "name": "playbackRate", "default": "1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Sets the rate at which the media is being played back. This is used to implement user\ncontrols for fast forward, slow motion, and so forth. The normal playback rate is multiplied\nby this value to obtain the current rate, so a value of 1.0 indicates normal speed.\n\nExamples:\n\n- `0.5` = slow down to 50% of the normal speed\n- `1.5` = speed up normal speed by 50%\n- `2` = double the normal speed", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate" } ] }, { "name": "preload", "default": "'metadata'", "type": { "primitive": "string", "concise": "'none' | 'metadata' | 'auto'", "full": "'none' | 'metadata' | 'auto'" }, "docs": "Configures the preload setting of the underlying media provider once it can load (see\n`loading` property).\n\nThe `preload` attribute provides a hint to the browser about what the author thinks will\nlead to the best user experience with regards to what content is loaded before the video is\nplayed. The recommended default is `metadata`.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "streamType", "default": "'unknown'", "type": { "primitive": "string", "concise": "MediaStreamType", "full": "'unknown' | 'live' | 'on-demand' | 'live:dvr' | 'll-live' | 'll-live:dvr'" }, "docs": "The current media stream type. This value helps determine what type of UI should be\ndisplayed and whether seeking operations are permitted during live streams. If seeking\nis permitted, set this value to `live:dvr` or `ll-live:dvr`." }, { "name": "title", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The title of the current media.", "readonly": true }, { "name": "artist", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The artist or channel name for which this content belongs to. This can be used in your\nlayout and it will be included in the Media Session API." }, { "name": "artwork", "default": "null", "type": { "primitive": "object", "concise": "MediaImage[] | null", "full": "MediaImage[] | null" }, "docs": "Images to be included in the Media Session API." }, { "name": "volume", "default": "1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "An `int` between `0` (silent) and `1` (loudest) indicating the audio volume. Defaults to `1`.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume" } ] } ], "events": [ { "name": "media-player-connect", "type": { "primitive": "object", "concise": "MediaPlayerConnectEvent", "full": "MediaPlayerConnectEvent" }, "detail": { "primitive": "object", "concise": "MediaPlayer", "full": "MediaPlayer" }, "docs": "Fired when the player element `` connects to the DOM.", "doctags": [ { "name": "detail", "text": "player" } ], "bubbles": true, "composed": true }, { "name": "find-media-player", "type": { "primitive": "object", "concise": "FindMediaPlayerEvent", "full": "FindMediaPlayerEvent" }, "detail": { "primitive": "function", "concise": "FindMediaPlayerEventDetail", "full": "FindMediaPlayerEventDetail" }, "internal": true }, { "name": "vds-font-change", "type": { "primitive": "object", "concise": "Event", "full": "Event" }, "detail": { "concise": "unknown", "primitive": "unknown", "full": "unknown" }, "docs": "The **`Event`** interface represents an event which takes place on an EventTarget.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event)", "internal": true }, { "name": "audio-tracks-change", "type": { "primitive": "object", "concise": "MediaAudioTracksChangeEvent", "full": "MediaAudioTracksChangeEvent" }, "detail": { "primitive": "object", "concise": "AudioTrack[]", "full": "AudioTrack[]" }, "docs": "Fired when an audio track has been added or removed.", "doctags": [ { "name": "detail", "text": "audioTrack" } ] }, { "name": "audio-track-change", "type": { "primitive": "object", "concise": "MediaAudioTrackChangeEvent", "full": "MediaAudioTrackChangeEvent" }, "detail": { "primitive": "object", "concise": "AudioTrack | null", "full": "AudioTrack | null" }, "docs": "Fired when the current audio track changes.", "doctags": [ { "name": "detail", "text": "audioTrack" } ] }, { "name": "audio-gain-change", "type": { "primitive": "object", "concise": "MediaAudioGainChangeEvent", "full": "MediaAudioGainChangeEvent" }, "detail": { "primitive": "number", "concise": "number | null", "full": "number | null" }, "docs": "Fired when the audio gain has changed. The event `detail` contains the new gain.", "doctags": [ { "name": "detail", "text": "gain" } ] }, { "name": "auto-play-change", "type": { "primitive": "object", "concise": "MediaAutoPlayChangeEvent", "full": "MediaAutoPlayChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the `autoPlay` property has changed value.", "doctags": [ { "name": "detail", "text": "shouldAutoPlay" } ] }, { "name": "auto-play-fail", "type": { "primitive": "object", "concise": "MediaAutoPlayFailEvent", "full": "MediaAutoPlayFailEvent" }, "detail": { "primitive": "object", "concise": "MediaAutoPlayFailEventDetail", "full": "MediaAutoPlayFailEventDetail" }, "docs": "Fired when an auto-play attempt has failed. The event detail contains the error that\nhad occurred on the last auto-play attempt which caused it to fail." }, { "name": "can-load", "type": { "primitive": "object", "concise": "MediaCanLoadEvent", "full": "MediaCanLoadEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the player can begin loading the current provider and media. This depends on the\n`load` player prop.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "can-load-poster", "type": { "primitive": "object", "concise": "MediaCanLoadPosterEvent", "full": "MediaCanLoadPosterEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the player can begin loading the poster image. This depends on the `posterLoad`\nplayer prop.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ] }, { "name": "can-play-through", "type": { "primitive": "object", "concise": "MediaCanPlayThroughEvent", "full": "MediaCanPlayThroughEvent" }, "detail": { "primitive": "object", "concise": "MediaCanPlayDetail", "full": "MediaCanPlayDetail" }, "docs": "Fired when the user agent can play the media, and estimates that **enough** data has been\nloaded to play the media up to its end without having to stop for further buffering of content.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event" } ] }, { "name": "can-play", "type": { "primitive": "object", "concise": "MediaCanPlayEvent", "full": "MediaCanPlayEvent" }, "detail": { "primitive": "object", "concise": "MediaCanPlayDetail", "full": "MediaCanPlayDetail" }, "docs": "Fired when the user agent can play the media, but estimates that **not enough** data has been\nloaded to play the media up to its end without having to stop for further buffering of content.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event" } ] }, { "name": "controls-change", "type": { "primitive": "object", "concise": "MediaControlsChangeEvent", "full": "MediaControlsChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when controls visibility changes. The controls are idle/hidden when playback is\nprogressing (playing), and there is no user activity for a set period of time\n(default is 2.5s). The event detail contains whether the controls are visible or not.", "doctags": [ { "name": "detail", "text": "isVisible" } ] }, { "name": "duration-change", "type": { "primitive": "object", "concise": "MediaDurationChangeEvent", "full": "MediaDurationChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the `duration` property changes.", "doctags": [ { "name": "detail", "text": "duration" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event" } ] }, { "name": "fullscreen-change", "type": { "primitive": "object", "concise": "MediaFullscreenChangeEvent", "full": "MediaFullscreenChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when media enters/exits fullscreen. The event detail is a `boolean` indicating\nif fullscreen was entered (`true`) or exited (`false`).", "doctags": [ { "name": "detail", "text": "isFullscreen" } ], "bubbles": true, "composed": true }, { "name": "fullscreen-error", "type": { "primitive": "object", "concise": "MediaFullscreenErrorEvent", "full": "MediaFullscreenErrorEvent" }, "detail": { "primitive": "unknown", "concise": "unknown", "full": "unknown" }, "docs": "Fired when an error occurs either entering or exiting fullscreen. This will generally occur\nif fullscreen is not supported or the user has not interacted with the page yet.", "doctags": [ { "name": "detail", "text": "error" } ], "bubbles": true, "composed": true }, { "name": "live-change", "type": { "primitive": "object", "concise": "MediaLiveChangeEvent", "full": "MediaLiveChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the `live` state changes. The event detail indicates whether the current stream\nis live or not.", "doctags": [ { "name": "detail", "text": "isLive" } ] }, { "name": "live-edge-change", "type": { "primitive": "object", "concise": "MediaLiveEdgeChangeEvent", "full": "MediaLiveEdgeChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the `liveEdge` state changes. The event detail indicates whether the user is viewing\nat the live edge or not.", "doctags": [ { "name": "detail", "text": "isLiveEdge" } ] }, { "name": "load-start", "type": { "primitive": "object", "concise": "MediaLoadStartEvent", "full": "MediaLoadStartEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the browser has started to load a resource.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event" } ] }, { "name": "loaded-data", "type": { "primitive": "object", "concise": "MediaLoadedDataEvent", "full": "MediaLoadedDataEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the frame at the current playback position of the media has finished loading; often\nthe first frame.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event" } ] }, { "name": "loaded-metadata", "type": { "primitive": "object", "concise": "MediaLoadedMetadataEvent", "full": "MediaLoadedMetadataEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the metadata has been loaded.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event" } ] }, { "name": "loop-change", "type": { "primitive": "object", "concise": "MediaLoopChangeEvent", "full": "MediaLoopChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the `loop` property has changed value.", "doctags": [ { "name": "detail", "text": "isLooping" } ] }, { "name": "media-type-change", "type": { "primitive": "object", "concise": "MediaTypeChangeEvent", "full": "MediaTypeChangeEvent" }, "detail": { "primitive": "string", "concise": "MediaType", "full": "'unknown' | 'audio' | 'video'" }, "docs": "Fired when the `media` property changes value.", "doctags": [ { "name": "detail", "text": "mediaType" } ] }, { "name": "orientation-change", "type": { "primitive": "object", "concise": "MediaOrientationChangeEvent", "full": "MediaOrientationChangeEvent" }, "detail": { "primitive": "object", "concise": "ScreenOrientationChangeEventDetail", "full": "ScreenOrientationChangeEventDetail" }, "docs": "Fired when a screen orientation change is requested on or by the media." }, { "name": "play-fail", "type": { "primitive": "object", "concise": "MediaPlayFailEvent", "full": "MediaPlayFailEvent" }, "detail": { "primitive": "object", "concise": "Error", "full": "Error" }, "docs": "Fired when an attempt to start media playback results in an error.", "doctags": [ { "name": "detail", "text": "error" } ] }, { "name": "plays-inline-change", "type": { "primitive": "object", "concise": "MediaPlaysInlineChangeEvent", "full": "MediaPlaysInlineChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the `playsInline` property has changed value.", "doctags": [ { "name": "detail", "text": "isInline" } ] }, { "name": "poster-change", "type": { "primitive": "object", "concise": "MediaPosterChangeEvent", "full": "MediaPosterChangeEvent" }, "detail": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "Fired when the `currentPoster` property has changed value.", "doctags": [ { "name": "detail", "text": "poster" } ] }, { "name": "provider-change", "type": { "primitive": "object", "concise": "MediaProviderChangeEvent", "full": "MediaProviderChangeEvent" }, "detail": { "primitive": "object", "concise": "MediaProviderAdapter | null", "full": "MediaProviderAdapter | null" }, "docs": "Fired when the new media provider has been selected. This will be `null` if no provider is\nable to play one of the current sources.\n\nThis event is ideal for initially configuring any provider-specific settings.", "doctags": [ { "name": "detail", "text": "adapter" } ] }, { "name": "provider-loader-change", "type": { "primitive": "object", "concise": "MediaProviderLoaderChangeEvent", "full": "MediaProviderLoaderChangeEvent" }, "detail": { "primitive": "object", "concise": "MediaProviderLoader | null", "full": "MediaProviderLoader | null" }, "docs": "Fired when the new media provider loader has been selected and rendered. This will be `null` if\nno loader is able to play one of the current sources.", "doctags": [ { "name": "detail", "text": "loader" } ] }, { "name": "provider-setup", "type": { "primitive": "object", "concise": "MediaProviderSetupEvent", "full": "MediaProviderSetupEvent" }, "detail": { "primitive": "object", "concise": "MediaProviderAdapter", "full": "MediaProviderAdapter" }, "docs": "Fired immediately after the provider has been set up. Do not try and configure the provider\nhere as it'll be too late - prefer the `provider-change` event.", "doctags": [ { "name": "detail", "text": "adapter" } ] }, { "name": "picture-in-picture-change", "type": { "primitive": "object", "concise": "MediaPIPChangeEvent", "full": "MediaPIPChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when media enters/exits picture-in-picture (PIP) mode. The event detail is a `boolean`\nindicating if PIP was entered (`true`) or exited (`false`).", "doctags": [ { "name": "detail", "text": "isPictureInPictureMode" } ], "bubbles": true, "composed": true }, { "name": "picture-in-picture-error", "type": { "primitive": "object", "concise": "MediaPIPErrorEvent", "full": "MediaPIPErrorEvent" }, "detail": { "primitive": "unknown", "concise": "unknown", "full": "unknown" }, "docs": "Fired when an error occurs either entering or exiting picture-in-picture (PIP) mode. This will\ngenerally occur if PIP is not supported or the user has not interacted with the page yet.", "doctags": [ { "name": "detail", "text": "error" } ], "bubbles": true, "composed": true }, { "name": "qualities-change", "type": { "primitive": "object", "concise": "MediaQualitiesChangeEvent", "full": "MediaQualitiesChangeEvent" }, "detail": { "primitive": "object", "concise": "VideoQuality[]", "full": "VideoQuality[]" }, "docs": "Fired when the list of available video qualities/renditions has changed.", "doctags": [ { "name": "detail", "text": "renditions" } ] }, { "name": "quality-change", "type": { "primitive": "object", "concise": "MediaQualityChangeEvent", "full": "MediaQualityChangeEvent" }, "detail": { "primitive": "object", "concise": "VideoQuality | null", "full": "VideoQuality | null" }, "docs": "Fired when the current video quality/rendition has changed. The event detail will be null if\nvideo quality information is not available.", "doctags": [ { "name": "detail", "text": "quality" } ] }, { "name": "rate-change", "type": { "primitive": "object", "concise": "MediaRateChangeEvent", "full": "MediaRateChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the playback rate has changed. The event `detail` contains the new rate.", "doctags": [ { "name": "detail", "text": "rate" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event" } ] }, { "name": "remote-playback-change", "type": { "primitive": "object", "concise": "MediaRemotePlaybackChangeEvent", "full": "MediaRemotePlaybackChangeEvent" }, "detail": { "primitive": "object", "concise": "MediaRemotePlaybackChangeEventDetail", "full": "MediaRemotePlaybackChangeEventDetail" }, "docs": "Fired when the remote playback state (`connecting`, `connected`, `disconnected`) and type\n(`airplay`, `google-cast`) has changed." }, { "name": "source-change", "type": { "primitive": "object", "concise": "MediaSourceChangeEvent", "full": "MediaSourceChangeEvent" }, "detail": { "primitive": "object", "concise": "Src", "full": "Src" }, "docs": "Fired when the `source` property has changed value.", "doctags": [ { "name": "detail", "text": "src" } ] }, { "name": "sources-change", "type": { "primitive": "object", "concise": "MediaSourcesChangeEvent", "full": "MediaSourcesChangeEvent" }, "detail": { "primitive": "object", "concise": "Src[]", "full": "Src[]" }, "docs": "Fired when the current media sources has changed.", "doctags": [ { "name": "detail", "text": "src" } ] }, { "name": "time-change", "type": { "primitive": "object", "concise": "MediaTimeChangeEvent", "full": "MediaTimeChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the `currentTime` property value changes. The event `detail` contains the real time\nof media playback without accounting for any clipping. This is also known as the provider time.\n\nListen to the time update event for the displayed time." }, { "name": "time-update", "type": { "primitive": "object", "concise": "MediaTimeUpdateEvent", "full": "MediaTimeUpdateEvent" }, "detail": { "primitive": "object", "concise": "MediaTimeUpdateEventDetail", "full": "MediaTimeUpdateEventDetail" }, "docs": "Fired when the `currentTime` property value changes due to media playback or the\nuser seeking.\n\nListen to the time change event if you'd like to receive the real playback time\nwithout accounting for any clipping.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event" } ] }, { "name": "title-change", "type": { "primitive": "object", "concise": "MediaTitleChangeEvent", "full": "MediaTitleChangeEvent" }, "detail": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "Fired when the provided or inferred media title has changed.", "doctags": [ { "name": "detail", "text": "title" } ] }, { "name": "stream-type-change", "type": { "primitive": "object", "concise": "MediaStreamTypeChangeEvent", "full": "MediaStreamTypeChangeEvent" }, "detail": { "primitive": "string", "concise": "MediaStreamType", "full": "'unknown' | 'live' | 'on-demand' | 'live:dvr' | 'll-live' | 'll-live:dvr'" }, "docs": "Fired when the `streamType` property changes value. The event detail contains the type of\nstream (e.g., `on-demand`, `live`, `live:dvr`, etc.).", "doctags": [ { "name": "detail", "text": "streamType" } ] }, { "name": "text-tracks-change", "type": { "primitive": "object", "concise": "MediaTextTracksChangeEvent", "full": "MediaTextTracksChangeEvent" }, "detail": { "primitive": "object", "concise": "TextTrack[]", "full": "TextTrack[]" }, "docs": "Fired when an audio track has been added or removed.", "doctags": [ { "name": "detail", "text": "textTracks" } ] }, { "name": "text-track-change", "type": { "primitive": "object", "concise": "MediaTextTrackChangeEvent", "full": "MediaTextTrackChangeEvent" }, "detail": { "primitive": "object", "concise": "TextTrack | null", "full": "TextTrack | null" }, "docs": "Fired when the current captions/subtitles text track changes.", "doctags": [ { "name": "detail", "text": "textTrack" } ] }, { "name": "view-type-change", "type": { "primitive": "object", "concise": "MediaViewTypeChangeEvent", "full": "MediaViewTypeChangeEvent" }, "detail": { "primitive": "string", "concise": "MediaViewType", "full": "'unknown' | 'audio' | 'video'" }, "docs": "Fired when the `viewType` property changes value. This will generally fire when the\nnew provider has mounted and determined what type of player view is appropriate given\nthe type of media it can play.", "doctags": [ { "name": "detail", "text": "viewType" } ] }, { "name": "volume-change", "type": { "primitive": "object", "concise": "MediaVolumeChangeEvent", "full": "MediaVolumeChangeEvent" }, "detail": { "primitive": "object", "concise": "MediaVolumeChange", "full": "MediaVolumeChange" }, "docs": "Fired when the `volume` or `muted` properties change value.", "doctags": [ { "name": "detail", "text": "volume" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event" } ] }, { "name": "abort", "type": { "primitive": "object", "concise": "MediaAbortEvent", "full": "MediaAbortEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the resource was not fully loaded, but not as the result of an error.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event" } ] }, { "name": "auto-play", "type": { "primitive": "object", "concise": "MediaAutoPlayEvent", "full": "MediaAutoPlayEvent" }, "detail": { "primitive": "object", "concise": "MediaAutoPlayEventDetail", "full": "MediaAutoPlayEventDetail" }, "docs": "Fired when an auto-play attempt has successfully been made (ie: media playback has automatically\nstarted). The event detail whether media is `muted` before any attempts are made." }, { "name": "destroy", "type": { "primitive": "object", "concise": "MediaDestroyEvent", "full": "MediaDestroyEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the player is manually destroyed by calling the `destroy()` method." }, { "name": "emptied", "type": { "primitive": "object", "concise": "MediaEmptiedEvent", "full": "MediaEmptiedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the media has become empty.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event" } ] }, { "name": "end", "type": { "primitive": "object", "concise": "MediaEndEvent", "full": "MediaEndEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired each time media playback has reached the end. This is fired even if the\n`loop` property is `true`, which is generally when you'd reach for this event over the\n`MediaEndedEvent` if you want to be notified of media looping." }, { "name": "ended", "type": { "primitive": "object", "concise": "MediaEndedEvent", "full": "MediaEndedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when playback or streaming has stopped because the end of the media was reached or\nbecause no further data is available. This is not fired if playback will start from the\nbeginning again due to the `loop` property being `true` (see `MediaReplayEvent`\nand `MediaEndEvent`).", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event" } ] }, { "name": "error", "type": { "primitive": "object", "concise": "MediaErrorEvent", "full": "MediaErrorEvent" }, "detail": { "primitive": "object", "concise": "MediaErrorDetail", "full": "MediaErrorDetail" }, "docs": "Fired when media loading or playback has encountered any issues (for example, a network\nconnectivity problem). The event detail contains a potential message containing more\ninformation about the error (empty string if nothing available), and a code that identifies\nthe general type of error that occurred.", "doctags": [ { "name": "see", "text": "https://html.spec.whatwg.org/multipage/media.html#error-codes" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event" } ] }, { "name": "pause", "type": { "primitive": "object", "concise": "MediaPauseEvent", "full": "MediaPauseEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when a request to `pause` an activity is handled and the activity has entered its\n`paused` state, most commonly after the media has been paused through a call to the\n`pause()` method.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event" } ] }, { "name": "play", "type": { "primitive": "object", "concise": "MediaPlayEvent", "full": "MediaPlayEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the `paused` property is changed from `true` to `false`, as a result of the `play()`\nmethod, or the `autoPlay` property.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event" } ] }, { "name": "playing", "type": { "primitive": "object", "concise": "MediaPlayingEvent", "full": "MediaPlayingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when playback is ready to start after having been paused or delayed due to lack of data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event" } ] }, { "name": "progress", "type": { "primitive": "object", "concise": "MediaProgressEvent", "full": "MediaProgressEvent" }, "detail": { "primitive": "object", "concise": "MediaProgressEventDetail", "full": "MediaProgressEventDetail" }, "docs": "Fired periodically as the browser loads a resource.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event" }, { "name": "detail", "text": "progress" } ] }, { "name": "replay", "type": { "primitive": "object", "concise": "MediaReplayEvent", "full": "MediaReplayEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when media playback starts again after being in an `ended` state. This is fired\nwhen the `loop` property is `true` and media loops, whereas the `play` event is not." }, { "name": "seeked", "type": { "primitive": "object", "concise": "MediaSeekedEvent", "full": "MediaSeekedEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when a seek operation completed, the current playback position has changed, and the\n`seeking` property is changed to `false`.", "doctags": [ { "name": "detail", "text": "currentTime" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event" } ] }, { "name": "seeking", "type": { "primitive": "object", "concise": "MediaSeekingEvent", "full": "MediaSeekingEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when a seek operation starts, meaning the seeking property has changed to `true` and the\nmedia is seeking to a new position.", "doctags": [ { "name": "detail", "text": "currentTime" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event" } ] }, { "name": "stalled", "type": { "primitive": "object", "concise": "MediaStalledEvent", "full": "MediaStalledEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the user agent is trying to fetch media data, but data is unexpectedly not\nforthcoming.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event" } ] }, { "name": "started", "type": { "primitive": "object", "concise": "MediaStartedEvent", "full": "MediaStartedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when media playback has just started, in other words the at the moment the following\nhappens: `currentTime > 0`." }, { "name": "suspend", "type": { "primitive": "object", "concise": "MediaSuspendEvent", "full": "MediaSuspendEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when media data loading has been suspended.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event" } ] }, { "name": "waiting", "type": { "primitive": "object", "concise": "MediaWaitingEvent", "full": "MediaWaitingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when playback has stopped because of a temporary lack of data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event" } ] }, { "name": "media-airplay-request", "type": { "primitive": "object", "concise": "MediaAirPlayRequestEvent", "full": "MediaAirPlayRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the AirPlay picker to open.", "bubbles": true, "composed": true }, { "name": "media-audio-track-change-request", "type": { "primitive": "object", "concise": "MediaAudioTrackChangeRequestEvent", "full": "MediaAudioTrackChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current audio track to the given index in the\n`AudioTrackList` on the player.", "bubbles": true, "composed": true }, { "name": "media-clip-start-change-request", "type": { "primitive": "object", "concise": "MediaClipStartChangeRequestEvent", "full": "MediaClipStartChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the clip start time. The event `detail` specifies the new start\ntime in seconds.", "bubbles": true, "composed": true }, { "name": "media-clip-end-change-request", "type": { "primitive": "object", "concise": "MediaClipEndChangeRequestEvent", "full": "MediaClipEndChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the clip end time. The event `detail` specifies the new end\ntime in seconds.", "bubbles": true, "composed": true }, { "name": "media-duration-change-request", "type": { "primitive": "object", "concise": "MediaDurationChangeRequestEvent", "full": "MediaDurationChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the length of the media. The event `detail` specifies the\nnew length in seconds.", "bubbles": true, "composed": true }, { "name": "media-enter-fullscreen-request", "type": { "primitive": "object", "concise": "MediaEnterFullscreenRequestEvent", "full": "MediaEnterFullscreenRequestEvent" }, "detail": { "primitive": "string", "concise": "MediaFullscreenRequestTarget", "full": "'prefer-media' | 'media' | 'provider'" }, "docs": "Fired when requesting media to enter fullscreen. The event `detail` can specify the\nfullscreen target, which can be the media or provider (defaults to `prefer-media`).", "bubbles": true, "composed": true }, { "name": "media-exit-fullscreen-request", "type": { "primitive": "object", "concise": "MediaExitFullscreenRequestEvent", "full": "MediaExitFullscreenRequestEvent" }, "detail": { "primitive": "string", "concise": "MediaFullscreenRequestTarget", "full": "'prefer-media' | 'media' | 'provider'" }, "docs": "Fired when requesting media to exit fullscreen. The event `detail` can specify the fullscreen\ntarget, which can be the media or provider (defaults to `prefer-media`).", "bubbles": true, "composed": true }, { "name": "media-enter-pip-request", "type": { "primitive": "object", "concise": "MediaEnterPIPRequestEvent", "full": "MediaEnterPIPRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to enter picture-in-picture mode.", "bubbles": true, "composed": true }, { "name": "media-exit-pip-request", "type": { "primitive": "object", "concise": "MediaExitPIPRequestEvent", "full": "MediaExitPIPRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to exit picture-in-picture mode.", "bubbles": true, "composed": true }, { "name": "media-google-cast-request", "type": { "primitive": "object", "concise": "MediaGoogleCastRequestEvent", "full": "MediaGoogleCastRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting Google Cast.", "bubbles": true, "composed": true }, { "name": "media-live-edge-request", "type": { "primitive": "object", "concise": "MediaLiveEdgeRequestEvent", "full": "MediaLiveEdgeRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to seek to the live edge (i.e., set the current time to the current\nlive time)." }, { "name": "media-loop-request", "type": { "primitive": "object", "concise": "MediaLoopRequestEvent", "full": "MediaLoopRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Internal event that is fired by a media provider when requesting media playback to restart after\nreaching the end. This event also helps notify the player that media will be looping.", "bubbles": true, "composed": true, "internal": true }, { "name": "media-user-loop-change-request", "type": { "primitive": "object", "concise": "MediaUserLoopChangeRequestEvent", "full": "MediaUserLoopChangeRequestEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the user loop preference changes.", "bubbles": true, "composed": true }, { "name": "media-orientation-lock-request", "type": { "primitive": "object", "concise": "MediaOrientationLockRequestEvent", "full": "MediaOrientationLockRequestEvent" }, "detail": { "primitive": "string", "concise": "ScreenOrientationLockType", "full": "'portrait' | 'landscape' | 'any' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait-primary' | 'portrait-secondary'" }, "docs": "Fired when requesting the screen orientation to be locked to a certain type.", "bubbles": true, "composed": true }, { "name": "media-orientation-unlock-request", "type": { "primitive": "object", "concise": "MediaOrientationUnlockRequestEvent", "full": "MediaOrientationUnlockRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the screen orientation to be unlocked.", "bubbles": true, "composed": true }, { "name": "media-mute-request", "type": { "primitive": "object", "concise": "MediaMuteRequestEvent", "full": "MediaMuteRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the media to be muted.", "bubbles": true, "composed": true }, { "name": "media-pause-request", "type": { "primitive": "object", "concise": "MediaPauseRequestEvent", "full": "MediaPauseRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to temporarily stop.", "bubbles": true, "composed": true }, { "name": "media-pause-controls-request", "type": { "primitive": "object", "concise": "MediaPauseControlsRequestEvent", "full": "MediaPauseControlsRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when controls visibility tracking should pause. This is typically used when a control\nis being actively interacted with, and we don't want the controls to be hidden before\nthe interaction is complete (eg: scrubbing, or settings is open).", "bubbles": true, "composed": true }, { "name": "media-play-request", "type": { "primitive": "object", "concise": "MediaPlayRequestEvent", "full": "MediaPlayRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to begin/resume.", "bubbles": true, "composed": true }, { "name": "media-quality-change-request", "type": { "primitive": "object", "concise": "MediaQualityChangeRequestEvent", "full": "MediaQualityChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current video quality to the given index in the\n`VideoQualityList` on the player.", "doctags": [ { "name": "detail", "text": "qualityIndex" } ], "bubbles": true, "composed": true }, { "name": "media-rate-change-request", "type": { "primitive": "object", "concise": "MediaRateChangeRequestEvent", "full": "MediaRateChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current playback rate.", "doctags": [ { "name": "detail", "text": "rate" } ], "bubbles": true, "composed": true }, { "name": "media-audio-gain-change-request", "type": { "primitive": "object", "concise": "MediaAudioGainChangeRequestEvent", "full": "MediaAudioGainChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current audio gain.", "doctags": [ { "name": "detail", "text": "gain" } ], "bubbles": true, "composed": true }, { "name": "media-resume-controls-request", "type": { "primitive": "object", "concise": "MediaResumeControlsRequestEvent", "full": "MediaResumeControlsRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when controls visibility tracking may resume. This is typically called after requesting\ntracking to pause via `media-pause-controls-request`.", "bubbles": true, "composed": true }, { "name": "media-seek-request", "type": { "primitive": "object", "concise": "MediaSeekRequestEvent", "full": "MediaSeekRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting a time change. In other words, moving the play head to a new position.", "doctags": [ { "name": "detail", "text": "seekTo" } ], "bubbles": true, "composed": true }, { "name": "media-seeking-request", "type": { "primitive": "object", "concise": "MediaSeekingRequestEvent", "full": "MediaSeekingRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when seeking/scrubbing to a new playback position.", "doctags": [ { "name": "detail", "text": "time" } ], "bubbles": true, "composed": true }, { "name": "media-start-loading", "type": { "primitive": "object", "concise": "MediaStartLoadingRequestEvent", "full": "MediaStartLoadingRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to begin loading. This will only take effect if the `load`\nstrategy on the player is set to `custom`.", "bubbles": true, "composed": true }, { "name": "media-poster-start-loading", "type": { "primitive": "object", "concise": "MediaPosterStartLoadingRequestEvent", "full": "MediaPosterStartLoadingRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the media poster to begin loading. This will only take effect if the\n`posterLoad` strategy on the player is set to `custom`.", "bubbles": true, "composed": true }, { "name": "media-text-track-change-request", "type": { "primitive": "object", "concise": "MediaTextTrackChangeRequestEvent", "full": "MediaTextTrackChangeRequestEvent" }, "detail": { "primitive": "object", "concise": "{ index: number; mode: TextTrackMode; }", "full": "{ index: number; mode: TextTrackMode; }" }, "docs": "Fired when requesting to change the `mode` on a text track at the given index in the\n`TextTrackList` on the player.", "bubbles": true, "composed": true }, { "name": "media-unmute-request", "type": { "primitive": "object", "concise": "MediaUnmuteRequestEvent", "full": "MediaUnmuteRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the media to be unmuted.", "bubbles": true, "composed": true }, { "name": "media-volume-change-request", "type": { "primitive": "object", "concise": "MediaVolumeChangeRequestEvent", "full": "MediaVolumeChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting the media volume to be set to a new level.", "doctags": [ { "name": "detail", "text": "volume" } ], "bubbles": true, "composed": true }, { "name": "vds-log", "type": { "primitive": "object", "concise": "LogEvent", "full": "LogEvent" }, "detail": { "primitive": "object", "concise": "LogEventDetail", "full": "LogEventDetail" }, "doctags": [ { "name": "detail", "text": "log" } ], "bubbles": true, "composed": true }, { "name": "video-presentation-change", "type": { "primitive": "object", "concise": "VideoPresentationChangeEvent", "full": "VideoPresentationChangeEvent" }, "detail": { "primitive": "string", "concise": "WebKitPresentationMode", "full": "'fullscreen' | 'picture-in-picture' | 'inline'" }, "docs": "Fired when the video presentation mode changes. Only available in Safari.", "doctags": [ { "name": "detail", "text": "mode" } ] }, { "name": "hls-lib-load-start", "type": { "primitive": "object", "concise": "HLSLibLoadStartEvent", "full": "HLSLibLoadStartEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the browser begins downloading the `hls.js` library." }, { "name": "hls-lib-loaded", "type": { "primitive": "object", "concise": "HLSLibLoadedEvent", "full": "HLSLibLoadedEvent" }, "detail": { "primitive": "object", "concise": "typeof Hls", "full": "typeof Hls" }, "docs": "Fired when the `hls.js` library has been loaded.", "doctags": [ { "name": "detail", "text": "constructor" } ] }, { "name": "hls-lib-load-error", "type": { "primitive": "object", "concise": "HLSLibLoadErrorEvent", "full": "HLSLibLoadErrorEvent" }, "detail": { "primitive": "object", "concise": "Error", "full": "Error" }, "docs": "Fired when the `hls.js` library fails during the download process.", "doctags": [ { "name": "detail", "text": "error" } ] }, { "name": "hls-instance", "type": { "primitive": "object", "concise": "HLSInstanceEvent", "full": "HLSInstanceEvent" }, "detail": { "primitive": "object", "concise": "Hls", "full": "Hls" }, "docs": "Fired when the `hls.js` instance is built. This will not fire if the browser does not\nsupport `hls.js`.", "doctags": [ { "name": "detail", "text": "instance" } ] }, { "name": "hls-unsupported", "type": { "primitive": "object", "concise": "HLSUnsupportedEvent", "full": "HLSUnsupportedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the browser doesn't support HLS natively, _and_ `hls.js` doesn't support\nthis environment either, most likely due to missing Media Extensions or video codecs." }, { "name": "hls-media-attaching", "type": { "primitive": "object", "concise": "HLSMediaAttachingEvent", "full": "HLSMediaAttachingEvent" }, "detail": { "primitive": "object", "concise": "MediaAttachingData", "full": "MediaAttachingData" }, "docs": "Fired before `MediaSource` begins attaching to the media element.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-media-attached", "type": { "primitive": "object", "concise": "HLSMediaAttachedEvent", "full": "HLSMediaAttachedEvent" }, "detail": { "primitive": "object", "concise": "MediaAttachedData", "full": "MediaAttachedData" }, "docs": "Fired when `MediaSource` has been successfully attached to the media element.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-media-detaching", "type": { "primitive": "object", "concise": "HLSMediaDetachingEvent", "full": "HLSMediaDetachingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired before detaching `MediaSource` from the media element." }, { "name": "hls-media-detached", "type": { "primitive": "object", "concise": "HLSMediaDetachedEvent", "full": "HLSMediaDetachedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when `MediaSource` has been detached from media element." }, { "name": "hls-buffer-reset", "type": { "primitive": "object", "concise": "HLSBufferResetEvent", "full": "HLSBufferResetEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when we buffer is going to be reset." }, { "name": "hls-buffer-codecs", "type": { "primitive": "object", "concise": "HLSBufferCodecsEvent", "full": "HLSBufferCodecsEvent" }, "detail": { "primitive": "object", "concise": "BufferCodecsData", "full": "BufferCodecsData" }, "docs": "Fired when we know about the codecs that we need buffers for to push into.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-created", "type": { "primitive": "object", "concise": "HLSBufferCreatedEvent", "full": "HLSBufferCreatedEvent" }, "detail": { "primitive": "object", "concise": "BufferCreatedData", "full": "BufferCreatedData" }, "docs": "Fired when `SourceBuffer`'s have been created.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-appending", "type": { "primitive": "object", "concise": "HLSBufferAppendingEvent", "full": "HLSBufferAppendingEvent" }, "detail": { "primitive": "object", "concise": "BufferAppendingData", "full": "BufferAppendingData" }, "docs": "Fired when we begin appending a media segment to the buffer.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-appended", "type": { "primitive": "object", "concise": "HLSBufferAppendedEvent", "full": "HLSBufferAppendedEvent" }, "detail": { "primitive": "object", "concise": "BufferAppendedData", "full": "BufferAppendedData" }, "docs": "Fired when we are done with appending a media segment to the buffer.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-eos", "type": { "primitive": "object", "concise": "HLSBufferEosEvent", "full": "HLSBufferEosEvent" }, "detail": { "primitive": "object", "concise": "BufferEOSData", "full": "BufferEOSData" }, "docs": "Fired when the stream is finished and we want to notify the media buffer that there will be no\nmore data.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-flushing", "type": { "primitive": "object", "concise": "HLSBufferFlushingEvent", "full": "HLSBufferFlushingEvent" }, "detail": { "primitive": "object", "concise": "BufferFlushingData", "full": "BufferFlushingData" }, "docs": "Fired when the media buffer should be flushed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-buffer-flushed", "type": { "primitive": "object", "concise": "HLSBufferFlushedEvent", "full": "HLSBufferFlushedEvent" }, "detail": { "primitive": "object", "concise": "BufferFlushedData", "full": "BufferFlushedData" }, "docs": "Fired when the media buffer has been flushed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-manifest-loading", "type": { "primitive": "object", "concise": "HLSManifestLoadingEvent", "full": "HLSManifestLoadingEvent" }, "detail": { "primitive": "object", "concise": "ManifestLoadingData", "full": "ManifestLoadingData" }, "docs": "Fired to signal that manifest loading is starting.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-manifest-loaded", "type": { "primitive": "object", "concise": "HLSManifestLoadedEvent", "full": "HLSManifestLoadedEvent" }, "detail": { "primitive": "object", "concise": "ManifestLoadedData", "full": "ManifestLoadedData" }, "docs": "Fired after the manifest has been loaded.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-manifest-parsed", "type": { "primitive": "object", "concise": "HLSManifestParsedEvent", "full": "HLSManifestParsedEvent" }, "detail": { "primitive": "object", "concise": "ManifestParsedData", "full": "ManifestParsedData" }, "docs": "Fired after manifest has been parsed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-switching", "type": { "primitive": "object", "concise": "HLSLevelSwitchingEvent", "full": "HLSLevelSwitchingEvent" }, "detail": { "primitive": "object", "concise": "LevelSwitchingData", "full": "LevelSwitchingData" }, "docs": "Fired when a level switch is requested.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-switched", "type": { "primitive": "object", "concise": "HLSLevelSwitchedEvent", "full": "HLSLevelSwitchedEvent" }, "detail": { "primitive": "object", "concise": "LevelSwitchedData", "full": "LevelSwitchedData" }, "docs": "Fired when a level switch is effective.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-loading", "type": { "primitive": "object", "concise": "HLSLevelLoadingEvent", "full": "HLSLevelLoadingEvent" }, "detail": { "primitive": "object", "concise": "LevelLoadingData", "full": "LevelLoadingData" }, "docs": "Fired when a level playlist loading starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-loaded", "type": { "primitive": "object", "concise": "HLSLevelLoadedEvent", "full": "HLSLevelLoadedEvent" }, "detail": { "primitive": "object", "concise": "LevelLoadedData", "full": "LevelLoadedData" }, "docs": "Fired when a level playlist loading finishes.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-updated", "type": { "primitive": "object", "concise": "HLSLevelUpdatedEvent", "full": "HLSLevelUpdatedEvent" }, "detail": { "primitive": "object", "concise": "LevelUpdatedData", "full": "LevelUpdatedData" }, "docs": "Fired when a level's details have been updated based on previous details, after it has been\nloaded.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-level-pts-updated", "type": { "primitive": "object", "concise": "HLSLevelPtsUpdatedEvent", "full": "HLSLevelPtsUpdatedEvent" }, "detail": { "primitive": "object", "concise": "LevelPTSUpdatedData", "full": "LevelPTSUpdatedData" }, "docs": "Fired when a level's PTS information has been updated after parsing a fragment.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-levels-updated", "type": { "primitive": "object", "concise": "HLSLevelsUpdatedEvent", "full": "HLSLevelsUpdatedEvent" }, "detail": { "primitive": "object", "concise": "LevelsUpdatedData", "full": "LevelsUpdatedData" }, "docs": "Fired when a level is removed after calling `removeLevel()`.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-audio-tracks-updated", "type": { "primitive": "object", "concise": "HLSAudioTracksUpdatedEvent", "full": "HLSAudioTracksUpdatedEvent" }, "detail": { "primitive": "object", "concise": "AudioTracksUpdatedData", "full": "AudioTracksUpdatedData" }, "docs": "Fired to notify that the audio track list has been updated.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-audio-track-switching", "type": { "primitive": "object", "concise": "HLSAudioTrackSwitchingEvent", "full": "HLSAudioTrackSwitchingEvent" }, "detail": { "primitive": "object", "concise": "AudioTrackSwitchingData", "full": "AudioTrackSwitchingData" }, "docs": "Fired when an audio track switching is requested.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-audio-track-switched", "type": { "primitive": "object", "concise": "HLSAudioTrackSwitchedEvent", "full": "HLSAudioTrackSwitchedEvent" }, "detail": { "primitive": "object", "concise": "AudioTrackSwitchedData", "full": "AudioTrackSwitchedData" }, "docs": "Fired when an audio track switch actually occurs.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-audio-track-loading", "type": { "primitive": "object", "concise": "HLSAudioTrackLoadingEvent", "full": "HLSAudioTrackLoadingEvent" }, "detail": { "primitive": "object", "concise": "TrackLoadingData", "full": "TrackLoadingData" }, "docs": "Fired when loading an audio track starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-audio-track-loaded", "type": { "primitive": "object", "concise": "HLSAudioTrackLoadedEvent", "full": "HLSAudioTrackLoadedEvent" }, "detail": { "primitive": "object", "concise": "AudioTrackLoadedData", "full": "AudioTrackLoadedData" }, "docs": "Fired when loading an audio track finishes.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-subtitle-tracks-updated", "type": { "primitive": "object", "concise": "HLSSubtitleTracksUpdatedEvent", "full": "HLSSubtitleTracksUpdatedEvent" }, "detail": { "primitive": "object", "concise": "SubtitleTracksUpdatedData", "full": "SubtitleTracksUpdatedData" }, "docs": "Fired to notify that the subtitle track list has been updated.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-subtitle-tracks-cleared", "type": { "primitive": "object", "concise": "HLSSubtitleTracksClearedEvent", "full": "HLSSubtitleTracksClearedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired to notify that subtitle tracks were cleared as a result of stopping the media." }, { "name": "hls-subtitle-track-switch", "type": { "primitive": "object", "concise": "HLSSubtitleTrackSwitchEvent", "full": "HLSSubtitleTrackSwitchEvent" }, "detail": { "primitive": "object", "concise": "SubtitleTrackSwitchData", "full": "SubtitleTrackSwitchData" }, "docs": "Fired when a subtitle track switch occurs.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-subtitle-track-loading", "type": { "primitive": "object", "concise": "HLSSubtitleTrackLoadingEvent", "full": "HLSSubtitleTrackLoadingEvent" }, "detail": { "primitive": "object", "concise": "TrackLoadingData", "full": "TrackLoadingData" }, "docs": "Fired when loading a subtitle track starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-subtitle-track-loaded", "type": { "primitive": "object", "concise": "HLSSubtitleTrackLoadedEvent", "full": "HLSSubtitleTrackLoadedEvent" }, "detail": { "primitive": "object", "concise": "SubtitleTrackLoadedData", "full": "SubtitleTrackLoadedData" }, "docs": "Fired when loading a subtitle track finishes.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-subtitle-frag-processed", "type": { "primitive": "object", "concise": "HLSSubtitleFragProcessedEvent", "full": "HLSSubtitleFragProcessedEvent" }, "detail": { "primitive": "object", "concise": "SubtitleFragProcessedData", "full": "SubtitleFragProcessedData" }, "docs": "Fired when a subtitle fragment has been processed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-cues-parsed", "type": { "primitive": "object", "concise": "HLSCuesParsedEvent", "full": "HLSCuesParsedEvent" }, "detail": { "primitive": "object", "concise": "CuesParsedData", "full": "CuesParsedData" }, "docs": "Fired when a set of `VTTCue`'s to be managed externally has been parsed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-non-native-text-tracks-found", "type": { "primitive": "object", "concise": "HLSNonNativeTextTracksFoundEvent", "full": "HLSNonNativeTextTracksFoundEvent" }, "detail": { "primitive": "object", "concise": "NonNativeTextTracksData", "full": "NonNativeTextTracksData" }, "docs": "Fired when a text track to be managed externally is found.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-init-pts-found", "type": { "primitive": "object", "concise": "HLSInitPtsFoundEvent", "full": "HLSInitPtsFoundEvent" }, "detail": { "primitive": "object", "concise": "InitPTSFoundData", "full": "InitPTSFoundData" }, "docs": "Fired when the first timestamp is found.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-loading", "type": { "primitive": "object", "concise": "HLSFragLoadingEvent", "full": "HLSFragLoadingEvent" }, "detail": { "primitive": "object", "concise": "FragLoadingData", "full": "FragLoadingData" }, "docs": "Fired when loading a fragment starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-load-emergency-aborted", "type": { "primitive": "object", "concise": "HLSFragLoadEmergencyAbortedEvent", "full": "HLSFragLoadEmergencyAbortedEvent" }, "detail": { "primitive": "object", "concise": "FragLoadEmergencyAbortedData", "full": "FragLoadEmergencyAbortedData" }, "docs": "Fired when fragment loading is aborted for emergency switch down.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-loaded", "type": { "primitive": "object", "concise": "HLSFragLoadedEvent", "full": "HLSFragLoadedEvent" }, "detail": { "primitive": "object", "concise": "FragLoadedData", "full": "FragLoadedData" }, "docs": "Fired when fragment loading is completed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-decrypted", "type": { "primitive": "object", "concise": "HLSFragDecryptedEvent", "full": "HLSFragDecryptedEvent" }, "detail": { "primitive": "object", "concise": "FragDecryptedData", "full": "FragDecryptedData" }, "docs": "Fired when a fragment has finished decrypting.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-parsing-init-segment", "type": { "primitive": "object", "concise": "HLSFragParsingInitSegmentEvent", "full": "HLSFragParsingInitSegmentEvent" }, "detail": { "primitive": "object", "concise": "FragParsingInitSegmentData", "full": "FragParsingInitSegmentData" }, "docs": "Fired when `InitSegment` has been extracted from a fragment.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-parsing-userdata", "type": { "primitive": "object", "concise": "HLSFragParsingUserdataEvent", "full": "HLSFragParsingUserdataEvent" }, "detail": { "primitive": "object", "concise": "FragParsingUserdataData", "full": "FragParsingUserdataData" }, "docs": "Fired when parsing sei text is completed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-parsing-metadata", "type": { "primitive": "object", "concise": "HLSFragParsingMetadataEvent", "full": "HLSFragParsingMetadataEvent" }, "detail": { "primitive": "object", "concise": "FragParsingMetadataData", "full": "FragParsingMetadataData" }, "docs": "Fired when parsing id3 is completed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-parsed", "type": { "primitive": "object", "concise": "HLSFragParsedEvent", "full": "HLSFragParsedEvent" }, "detail": { "primitive": "object", "concise": "FragParsedData", "full": "FragParsedData" }, "docs": "Fired when fragment parsing is completed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-buffered-data", "type": { "primitive": "object", "concise": "HLSFragBufferedDataEvent", "full": "HLSFragBufferedDataEvent" }, "detail": { "primitive": "object", "concise": "FragBufferedData", "full": "FragBufferedData" }, "docs": "Fired when fragment remuxed MP4 boxes have all been appended into `SourceBuffer`.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-frag-changed", "type": { "primitive": "object", "concise": "HLSFragChangedEvent", "full": "HLSFragChangedEvent" }, "detail": { "primitive": "object", "concise": "FragChangedData", "full": "FragChangedData" }, "docs": "Fired when fragment matching with current media position is changing.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-fps-drop", "type": { "primitive": "object", "concise": "HLSFpsDropEvent", "full": "HLSFpsDropEvent" }, "detail": { "primitive": "object", "concise": "FPSDropData", "full": "FPSDropData" }, "docs": "Fired when a FPS drop is identified.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-fps-drop-level-capping", "type": { "primitive": "object", "concise": "HLSFpsDropLevelCappingEvent", "full": "HLSFpsDropLevelCappingEvent" }, "detail": { "primitive": "object", "concise": "FPSDropLevelCappingData", "full": "FPSDropLevelCappingData" }, "docs": "Fired when FPS drop triggers auto level capping.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-error", "type": { "primitive": "object", "concise": "HLSErrorEvent", "full": "HLSErrorEvent" }, "detail": { "primitive": "object", "concise": "ErrorData", "full": "ErrorData" }, "docs": "Fired when an error has occurred during loading or playback.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-destroying", "type": { "primitive": "object", "concise": "HLSDestroyingEvent", "full": "HLSDestroyingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the `hls.js` instance is being destroyed. Different from `hls-media-detached` as\none could want to detach, and reattach media to the `hls.js` instance to handle mid-rolls." }, { "name": "hls-key-loading", "type": { "primitive": "object", "concise": "HLSKeyLoadingEvent", "full": "HLSKeyLoadingEvent" }, "detail": { "primitive": "object", "concise": "KeyLoadingData", "full": "KeyLoadingData" }, "docs": "Fired when a decrypt key loading starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-key-loaded", "type": { "primitive": "object", "concise": "HLSKeyLoadedEvent", "full": "HLSKeyLoadedEvent" }, "detail": { "primitive": "object", "concise": "KeyLoadedData", "full": "KeyLoadedData" }, "docs": "Fired when a decrypt key has been loaded.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "hls-back-buffer-reached", "type": { "primitive": "object", "concise": "HLSBackBufferReachedEvent", "full": "HLSBackBufferReachedEvent" }, "detail": { "primitive": "object", "concise": "BackBufferData", "full": "BackBufferData" }, "docs": "Fired when the back buffer is reached as defined by the `backBufferLength` config option.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-lib-load-start", "type": { "primitive": "object", "concise": "DASHLibLoadStartEvent", "full": "DASHLibLoadStartEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the browser begins downloading the `dash.js` library." }, { "name": "dash-lib-loaded", "type": { "primitive": "object", "concise": "DASHLibLoadedEvent", "full": "DASHLibLoadedEvent" }, "detail": { "primitive": "function", "concise": "typeof MediaPlayer", "full": "typeof MediaPlayer" }, "docs": "Fired when the `dash.js` library has been loaded.", "doctags": [ { "name": "detail", "text": "constructor" } ] }, { "name": "dash-lib-load-error", "type": { "primitive": "object", "concise": "DASHLibLoadErrorEvent", "full": "DASHLibLoadErrorEvent" }, "detail": { "primitive": "object", "concise": "Error", "full": "Error" }, "docs": "Fired when the `dash.js` library fails during the download process.", "doctags": [ { "name": "detail", "text": "error" } ] }, { "name": "dash-instance", "type": { "primitive": "object", "concise": "DASHInstanceEvent", "full": "DASHInstanceEvent" }, "detail": { "primitive": "object", "concise": "MediaPlayerClass", "full": "MediaPlayerClass" }, "docs": "Fired when the `dash.js` instance is built. This will not fire if the browser does not\nsupport `DASH.js`.", "doctags": [ { "name": "detail", "text": "instance" } ] }, { "name": "dash-unsupported", "type": { "primitive": "object", "concise": "DASHUnsupportedEvent", "full": "DASHUnsupportedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the browser doesn't support DASH natively, _and_ `dash.js` doesn't support\nthis environment either, most likely due to missing Media Extensions or video codecs." }, { "name": "dash-ast-in-future", "type": { "primitive": "object", "concise": "DASHAstInFutureEvent", "full": "DASHAstInFutureEvent" }, "detail": { "primitive": "object", "concise": "AstInFutureEvent", "full": "AstInFutureEvent" }, "docs": "Triggered when playback will not start yet as the MPD's `availabilityStartTime` is in the future.\nCheck delay property in payload to determine time before playback will start.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-base-urls-updated", "type": { "primitive": "object", "concise": "DASHBaseUrlsUpdatedEvent", "full": "DASHBaseUrlsUpdatedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the `BaseURL` have been updated." }, { "name": "dash-buffer-empty", "type": { "primitive": "object", "concise": "DASHBufferStalledEvent", "full": "DASHBufferStalledEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the video element's buffer state changes to `stalled`. Check `mediaType` in\npayload to determine type (Video, Audio, FragmentedText)." }, { "name": "dash-buffer-loaded", "type": { "primitive": "object", "concise": "DASHBufferLoadedEvent", "full": "DASHBufferLoadedEvent" }, "detail": { "primitive": "object", "concise": "BufferEvent", "full": "BufferEvent" }, "docs": "Triggered when the video element's buffer state changes to `loaded`. Check `mediaType` in payload\nto determine type (Video, Audio, FragmentedText).", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-buffer-level-state-changed", "type": { "primitive": "object", "concise": "DASHBufferStateChangedEvent", "full": "DASHBufferStateChangedEvent" }, "detail": { "primitive": "object", "concise": "BufferStateChangedEvent", "full": "BufferStateChangedEvent" }, "docs": "Triggered when the video element's buffer state changes, either stalled or loaded. Check\npayload for state.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-buffer-level-updated", "type": { "primitive": "object", "concise": "DASHBufferLevelUpdatedEvent", "full": "DASHBufferLevelUpdatedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the buffer level of a media type has been updated." }, { "name": "dash-dvb-font-download-added", "type": { "primitive": "object", "concise": "DASHDvbFontDownloadAddedEvent", "full": "DASHDvbFontDownloadAddedEvent" }, "detail": { "primitive": "object", "concise": "dvbFontDownloadAdded", "full": "dvbFontDownloadAdded" }, "docs": "Triggered when a font signalled by a DVB Font Download has been added to the document `ntFaceSet`\ninterface.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-dvb-font-download-complete", "type": { "primitive": "object", "concise": "DASHDvbFontDownloadCompleteEvent", "full": "DASHDvbFontDownloadCompleteEvent" }, "detail": { "primitive": "object", "concise": "dvbFontDownloadComplete", "full": "dvbFontDownloadComplete" }, "docs": "Triggered when a font signalled by a DVB Font Download has successfully downloaded and the\n`ntFace` can be used.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-dvb-font-download-failed", "type": { "primitive": "object", "concise": "DASHDvbFontDownloadFailedEvent", "full": "DASHDvbFontDownloadFailedEvent" }, "detail": { "primitive": "object", "concise": "dvbFontDownloadFailed", "full": "dvbFontDownloadFailed" }, "docs": "Triggered when a font signalled by a DVB Font Download could not be successfully downloaded, so\nthe `FontFace` will not be used.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-dynamic-to-static", "type": { "primitive": "object", "concise": "DASHDynamicToStaticEvent", "full": "DASHDynamicToStaticEvent" }, "detail": { "primitive": "object", "concise": "DynamicToStaticEvent", "full": "DynamicToStaticEvent" }, "docs": "Triggered when a dynamic stream changed to static (transition phase between Live and -Demand).", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-error", "type": { "primitive": "object", "concise": "DASHErrorEvent", "full": "DASHErrorEvent" }, "detail": { "primitive": "object", "concise": "ErrorEvent", "full": "GenericErrorEvent | DownloadErrorEvent | ManifestErrorEvent | TimedTextErrorEvent | MediaPlayerErrorEvent" }, "docs": "Triggered when there is an error from the element or MSE source buffer.", "doctags": [ { "name": "detail", "text": "error" } ] }, { "name": "dash-fragment-loading-completed", "type": { "primitive": "object", "concise": "DASHFragmentLoadingCompletedEvent", "full": "DASHFragmentLoadingCompletedEvent" }, "detail": { "primitive": "object", "concise": "FragmentLoadingCompletedEvent", "full": "FragmentLoadingCompletedEvent" }, "docs": "Triggered when a fragment download has completed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-fragment-loading-progress", "type": { "primitive": "object", "concise": "DASHFragmentLoadingProgressEvent", "full": "DASHFragmentLoadingProgressEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a partial fragment download has completed." }, { "name": "dash-fragment-loading-started", "type": { "primitive": "object", "concise": "DASHFragmentLoadingStartedEvent", "full": "DASHFragmentLoadingStartedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a fragment download has started." }, { "name": "dash-fragment-loading-abandoned", "type": { "primitive": "object", "concise": "DASHFragmentLoadingAbandonedEvent", "full": "DASHFragmentLoadingAbandonedEvent" }, "detail": { "primitive": "object", "concise": "FragmentLoadingAbandonedEvent", "full": "FragmentLoadingAbandonedEvent" }, "docs": "Triggered when a fragment download is abandoned due to detection of slow download base on e\nABR abandon rule.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-log", "type": { "primitive": "object", "concise": "DASHLogEvent", "full": "DASHLogEvent" }, "detail": { "primitive": "object", "concise": "LogEvent", "full": "LogEvent" }, "docs": "Triggered when Debug logger methods are called.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-manifest-loading-started", "type": { "primitive": "object", "concise": "DASHManifestLoadingStartedEvent", "full": "DASHManifestLoadingStartedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the manifest load has started." }, { "name": "dash-manifest-loading-finished", "type": { "primitive": "object", "concise": "DASHManifestLoadingFinishedEvent", "full": "DASHManifestLoadingFinishedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the manifest loading is finished, providing the request object information." }, { "name": "dash-manifest-loaded", "type": { "primitive": "object", "concise": "DASHManifestLoadedEvent", "full": "DASHManifestLoadedEvent" }, "detail": { "primitive": "object", "concise": "ManifestLoadedEvent", "full": "ManifestLoadedEvent" }, "docs": "Triggered when the manifest load is complete, providing the payload.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-metrics-changed", "type": { "primitive": "object", "concise": "DASHMetricsChangedEvent", "full": "DASHMetricsChangedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered anytime there is a change to the overall metrics." }, { "name": "dash-metric-changed", "type": { "primitive": "object", "concise": "DASHMetricChangedEvent", "full": "DASHMetricChangedEvent" }, "detail": { "primitive": "object", "concise": "MetricChangedEvent", "full": "MetricChangedEvent" }, "docs": "Triggered when an individual metric is added, updated or cleared.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-metric-added", "type": { "primitive": "object", "concise": "DASHMetricAddedEvent", "full": "DASHMetricAddedEvent" }, "detail": { "primitive": "object", "concise": "MetricEvent", "full": "MetricEvent" }, "docs": "Triggered every time a new metric is added.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-metric-updated", "type": { "primitive": "object", "concise": "DASHMetricUpdatedEvent", "full": "DASHMetricUpdatedEvent" }, "detail": { "primitive": "object", "concise": "MetricEvent", "full": "MetricEvent" }, "docs": "Triggered every time a metric is updated.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-period-switch-started", "type": { "primitive": "object", "concise": "DASHPeriodSwitchStartedEvent", "full": "DASHPeriodSwitchStartedEvent" }, "detail": { "primitive": "object", "concise": "PeriodSwitchEvent", "full": "PeriodSwitchEvent" }, "docs": "Triggered when a new stream (period) starts.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-period-switch-completed", "type": { "primitive": "object", "concise": "DASHPeriodSwitchCompletedEvent", "full": "DASHPeriodSwitchCompletedEvent" }, "detail": { "primitive": "object", "concise": "PeriodSwitchEvent", "full": "PeriodSwitchEvent" }, "docs": "Triggered at the stream end of a period.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-quality-change-requested", "type": { "primitive": "object", "concise": "DASHQualityChangeRequestedEvent", "full": "DASHQualityChangeRequestedEvent" }, "detail": { "primitive": "object", "concise": "QualityChangeRequestedEvent", "full": "QualityChangeRequestedEvent" }, "docs": "Triggered when an ABR up /down switch is initiated; either by user in manual mode or auto de via\nABR rules.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-quality-change-rendered", "type": { "primitive": "object", "concise": "DASHQualityChangeRenderedEvent", "full": "DASHQualityChangeRenderedEvent" }, "detail": { "primitive": "object", "concise": "QualityChangeRenderedEvent", "full": "QualityChangeRenderedEvent" }, "docs": "Triggered when the new ABR quality is being rendered on-screen.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-track-change-rendered", "type": { "primitive": "object", "concise": "DASHTrackChangeRenderedEvent", "full": "DASHTrackChangeRenderedEvent" }, "detail": { "primitive": "object", "concise": "TrackChangeRenderedEvent", "full": "TrackChangeRenderedEvent" }, "docs": "Triggered when the new track is being rendered.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-stream-initializing", "type": { "primitive": "object", "concise": "DASHStreamInitializingEvent", "full": "DASHStreamInitializingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a stream (period) is being loaded." }, { "name": "dash-stream-updated", "type": { "primitive": "object", "concise": "DASHStreamUpdatedEvent", "full": "DASHStreamUpdatedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a stream (period) is loaded." }, { "name": "dash-stream-activated", "type": { "primitive": "object", "concise": "DASHStreamActivatedEvent", "full": "DASHStreamActivatedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a stream (period) is activated." }, { "name": "dash-stream-deactivated", "type": { "primitive": "object", "concise": "DASHStreamDeactivatedEvent", "full": "DASHStreamDeactivatedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a stream (period) is deactivated" }, { "name": "dash-stream-initialized", "type": { "primitive": "object", "concise": "DASHStreamInitializedEvent", "full": "DASHStreamInitializedEvent" }, "detail": { "primitive": "object", "concise": "StreamInitializedEvent", "full": "StreamInitializedEvent" }, "docs": "Triggered when a stream (period) is activated.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-stream-teardown-complete", "type": { "primitive": "object", "concise": "DASHStreamTeardownCompleteEvent", "full": "DASHStreamTeardownCompleteEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when the player has been reset." }, { "name": "dash-text-tracks-added", "type": { "primitive": "object", "concise": "DASHAllTextTracksAddedEvent", "full": "DASHAllTextTracksAddedEvent" }, "detail": { "primitive": "object", "concise": "TextTracksAddedEvent", "full": "TextTracksAddedEvent" }, "docs": "Triggered once all text tracks detected in the MPD are added to the video element.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-text-track-added", "type": { "primitive": "object", "concise": "DASHTextTrackAddedEvent", "full": "DASHTextTrackAddedEvent" }, "detail": { "primitive": "object", "concise": "TextTracksAddedEvent", "full": "TextTracksAddedEvent" }, "docs": "Triggered when a text track is added to the video element's `TextTrackList`.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-cue-enter", "type": { "primitive": "object", "concise": "DASHCueEnterEvent", "full": "DASHCueEnterEvent" }, "detail": { "primitive": "object", "concise": "CueEnterEvent", "full": "CueEnterEvent" }, "docs": "Triggered when a text track should be shown.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-cue-exit", "type": { "primitive": "object", "concise": "DASHCueExitEvent", "full": "DASHCueExitEvent" }, "detail": { "primitive": "object", "concise": "CueExitEvent", "full": "CueExitEvent" }, "docs": "Triggered when a text track should be hidden.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-throughput-measurement-stored", "type": { "primitive": "object", "concise": "DASHThroughputMeasurementStoredEvent", "full": "DASHThroughputMeasurementStoredEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a throughput measurement based on the last segment request has been stored.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-ttml-parsed", "type": { "primitive": "object", "concise": "DASHTtmlParsedEvent", "full": "DASHTtmlParsedEvent" }, "detail": { "primitive": "object", "concise": "TtmlParsedEvent", "full": "TtmlParsedEvent" }, "docs": "Triggered when a `ttml` chunk is parsed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-ttml-to-parse", "type": { "primitive": "object", "concise": "DASHTtmlToParseEvent", "full": "DASHTtmlToParseEvent" }, "detail": { "primitive": "object", "concise": "TtmlToParseEvent", "full": "TtmlToParseEvent" }, "docs": "Triggered when a `ttml` chunk has to be parsed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-caption-rendered", "type": { "primitive": "object", "concise": "DASHCaptionRenderedEvent", "full": "DASHCaptionRenderedEvent" }, "detail": { "primitive": "object", "concise": "CaptionRenderedEvent", "full": "CaptionRenderedEvent" }, "docs": "Triggered when a caption is rendered.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-caption-container-resize", "type": { "primitive": "object", "concise": "DASHCaptionContainerResizeEvent", "full": "DASHCaptionContainerResizeEvent" }, "detail": { "primitive": "object", "concise": "CaptionContainerResizeEvent", "full": "CaptionContainerResizeEvent" }, "docs": "Triggered when the caption container is resized.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-can-play", "type": { "primitive": "object", "concise": "DASHCanPlayEvent", "full": "DASHCanPlayEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when enough data is available that the media can be played, at least for a couple of\nframes. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`." }, { "name": "dash-can-play-through", "type": { "primitive": "object", "concise": "DASHCanPlayThroughEvent", "full": "DASHCanPlayThroughEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "This corresponds to the `CAN_PLAY_THROUGH` `readyState`." }, { "name": "dash-playback-ended", "type": { "primitive": "object", "concise": "DASHPlaybackEndedEvent", "full": "DASHPlaybackEndedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when playback completes." }, { "name": "dash-playback-error", "type": { "primitive": "object", "concise": "DASHPlaybackErrorEvent", "full": "DASHPlaybackErrorEvent" }, "detail": { "primitive": "object", "concise": "PlaybackErrorEvent", "full": "PlaybackErrorEvent" }, "docs": "Sent when an error occurs. The element's error attribute contains more information.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-not-allowed", "type": { "primitive": "object", "concise": "DASHPlaybackNotAllowedEvent", "full": "DASHPlaybackNotAllowedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when playback is not allowed (for example if user gesture is needed)." }, { "name": "dash-playback-metadata-loaded", "type": { "primitive": "object", "concise": "DASHPlaybackMetaDataLoadedEvent", "full": "DASHPlaybackMetaDataLoadedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "The media's metadata has finished loading; all attributes now contain as much useful\ninformation as they're going to." }, { "name": "dash-playback-loaded-data", "type": { "primitive": "object", "concise": "DASHPlaybackLoadedDataEvent", "full": "DASHPlaybackLoadedDataEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "The event is fired when the frame at the current playback position of the media has finished\nloading; often the first frame." }, { "name": "dash-playback-paused", "type": { "primitive": "object", "concise": "DASHPlaybackPausedEvent", "full": "DASHPlaybackPausedEvent" }, "detail": { "primitive": "object", "concise": "PlaybackPausedEvent", "full": "PlaybackPausedEvent" }, "docs": "Sent when playback is paused.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-playing", "type": { "primitive": "object", "concise": "DASHPlaybackPlayingEvent", "full": "DASHPlaybackPlayingEvent" }, "detail": { "primitive": "object", "concise": "PlaybackPlayingEvent", "full": "PlaybackPlayingEvent" }, "docs": "Sent when the media begins to play (either for the first time, after having been paused,\nor after ending and then restarting).", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-progress", "type": { "primitive": "object", "concise": "DASHPlaybackProgressEvent", "full": "DASHPlaybackProgressEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent periodically to inform interested parties of progress downloading the media. Information\nabout the current amount of the media that has been downloaded is available in the media\nelement's buffered attribute." }, { "name": "dash-playback-rate-changed", "type": { "primitive": "object", "concise": "DASHPlaybackRateChangedEvent", "full": "DASHPlaybackRateChangedEvent" }, "detail": { "primitive": "object", "concise": "PlaybackRateChangedEvent", "full": "PlaybackRateChangedEvent" }, "docs": "Sent when the playback speed changes.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-seeked", "type": { "primitive": "object", "concise": "DASHPlaybackSeekedEvent", "full": "DASHPlaybackSeekedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when a seek operation completes." }, { "name": "dash-playback-seeking", "type": { "primitive": "object", "concise": "DASHPlaybackSeekingEvent", "full": "DASHPlaybackSeekingEvent" }, "detail": { "primitive": "object", "concise": "PlaybackSeekingEvent", "full": "PlaybackSeekingEvent" }, "docs": "Sent when a seek operation begins.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-stalled", "type": { "primitive": "object", "concise": "DASHPlaybackStalledEvent", "full": "DASHPlaybackStalledEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when the video element reports stalled." }, { "name": "dash-playback-started", "type": { "primitive": "object", "concise": "DASHPlaybackStartedEvent", "full": "DASHPlaybackStartedEvent" }, "detail": { "primitive": "object", "concise": "PlaybackStartedEvent", "full": "PlaybackStartedEvent" }, "docs": "Sent when playback of the media starts after having been paused; that is, when playback is\nresumed after a prior pause event.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-time-updated", "type": { "primitive": "object", "concise": "DASHPlaybackTimeUpdatedEvent", "full": "DASHPlaybackTimeUpdatedEvent" }, "detail": { "primitive": "object", "concise": "PlaybackTimeUpdatedEvent", "full": "PlaybackTimeUpdatedEvent" }, "docs": "The time indicated by the element's currentTime attribute has changed.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-playback-volume-changed", "type": { "primitive": "object", "concise": "DASHPlaybackVolumeChangedEvent", "full": "DASHPlaybackVolumeChangedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Sent when the video element reports that the volume has changed." }, { "name": "dash-playback-waiting", "type": { "primitive": "object", "concise": "DASHPlaybackWaitingEvent", "full": "DASHPlaybackWaitingEvent" }, "detail": { "primitive": "object", "concise": "PlaybackWaitingEvent", "full": "PlaybackWaitingEvent" }, "docs": "Sent when the media playback has stopped because of a temporary lack of data.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-manifest-validity-changed", "type": { "primitive": "object", "concise": "DASHManifestValidityChangedEvent", "full": "DASHManifestValidityChangedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Manifest validity changed - As a result of an MPD validity expiration event." }, { "name": "dash-event-mode-on-start", "type": { "primitive": "object", "concise": "DASHEventModeOnStartEvent", "full": "DASHEventModeOnStartEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Dash events are triggered at their respective start points on the timeline." }, { "name": "dash-event-mode-on-receive", "type": { "primitive": "object", "concise": "DASHEventModeOnReceiveEvent", "full": "DASHEventModeOnReceiveEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Dash events are triggered as soon as they were parsed." }, { "name": "dash-conformance-violation", "type": { "primitive": "object", "concise": "DASHConformanceViolationEvent", "full": "DASHConformanceViolationEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Event that is dispatched whenever the player encounters a potential conformance validation at\nmight lead to unexpected/not optimal behavior." }, { "name": "dash-representation-switch", "type": { "primitive": "object", "concise": "DASHRepresentationSwitchEvent", "full": "DASHRepresentationSwitchEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Event that is dispatched whenever the player switches to a different representation." }, { "name": "dash-adaptation-set-removed-no-capabilities", "type": { "primitive": "object", "concise": "DASHAdaptationSetRemovedNoCapabilitiesEvent", "full": "DASHAdaptationSetRemovedNoCapabilitiesEvent" }, "detail": { "primitive": "object", "concise": "AdaptationSetRemovedNoCapabilitiesEvent", "full": "AdaptationSetRemovedNoCapabilitiesEvent" }, "docs": "Event that is dispatched whenever an adaptation set is removed due to all representations to\nbeing supported.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-content-steering-request-completed", "type": { "primitive": "object", "concise": "DASHContentSteeringRequestCompletedEvent", "full": "DASHContentSteeringRequestCompletedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Triggered when a content steering request has completed." }, { "name": "dash-inband-prft", "type": { "primitive": "object", "concise": "DASHInbandPrftEvent", "full": "DASHInbandPrftEvent" }, "detail": { "primitive": "object", "concise": "InbandPrftReceivedEvent", "full": "InbandPrftReceivedEvent" }, "docs": "Triggered when an inband prft (ProducerReferenceTime) boxes has been received.", "doctags": [ { "name": "detail", "text": "data" } ] }, { "name": "dash-managed-media-source-start-streaming", "type": { "primitive": "object", "concise": "DASHManagedMediaSourceStartStreamingEvent", "full": "DASHManagedMediaSourceStartStreamingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "The streaming attribute of the Managed Media Source is `true`." }, { "name": "dash-managed-media-source-end-streaming", "type": { "primitive": "object", "concise": "DASHManagedMediaSourceEndStreamingEvent", "full": "DASHManagedMediaSourceEndStreamingEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "The streaming attribute of the Managed Media Source is `false`." }, { "name": "google-cast-load-start", "type": { "primitive": "object", "concise": "GoogleCastLoadStartEvent", "full": "GoogleCastLoadStartEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the Google Cast framework starts loading." }, { "name": "google-cast-loaded", "type": { "primitive": "object", "concise": "GoogleCastLoadedEvent", "full": "GoogleCastLoadedEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the Google Cast framework has loaded." }, { "name": "google-cast-prompt-open", "type": { "primitive": "object", "concise": "GoogleCastPromptEvent", "full": "GoogleCastPromptEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the Google Cast prompt is opened/closed." }, { "name": "google-cast-prompt-close", "type": { "primitive": "object", "concise": "GoogleCastPromptEvent", "full": "GoogleCastPromptEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the Google Cast prompt is opened/closed." }, { "name": "google-cast-prompt-error", "type": { "primitive": "object", "concise": "GoogleCastPromptErrorEvent", "full": "GoogleCastPromptErrorEvent" }, "detail": { "primitive": "object", "concise": "GoogleCastPromptError", "full": "GoogleCastPromptError" }, "docs": "Fired when requesting Google Cast has failed." } ], "state": [ { "name": "autoPlay", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback should automatically begin as soon as enough media is available to do so\nwithout interruption.\n\nSites which automatically play audio (or videos with an audio track) can be an unpleasant\nexperience for users, so it should be avoided when possible. If you must offer auto-play\nfunctionality, you should make it opt-in (requiring a user to specifically enable it).\n\nHowever, auto-play can be useful when creating media elements whose source will be set at a\nlater time, under user control.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay" } ], "default": "false" }, { "name": "autoPlayError", "type": { "primitive": "object", "concise": "{ muted: boolean; error: Error; } | null", "full": "{ muted: boolean; error: Error; } | null" }, "docs": "Set to an error when auto-play has failed to begin playback. This can be used to determine\nwhen to show a recovery UI in the event auto-play fails.", "doctags": [ { "name": "defaultValue", "text": "null" } ], "default": "null" }, { "name": "buffered", "type": { "primitive": "object", "concise": "TimeRanges", "full": "TimeRanges" }, "docs": "Returns a `TimeRanges` object that indicates the ranges of the media source that the\nbrowser has buffered (if any) at the moment the buffered property is accessed. This is usually\ncontiguous but if the user jumps about while media is buffering, it may contain holes.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered" }, { "name": "defaultValue", "text": "TimeRanges" } ], "default": "new TimeRange()" }, { "name": "bufferedStart", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The earliest time in seconds for which media has been buffered (i.e., downloaded by the\nbrowser).", "doctags": [ { "name": "defaultValue", "text": "0" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered" } ], "readonly": true }, { "name": "bufferedEnd", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The latest time in seconds for which media has been buffered (i.e., downloaded by the\nbrowser).", "doctags": [ { "name": "defaultValue", "text": "0" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered" } ], "readonly": true }, { "name": "bufferedWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The length of the buffered window in seconds from `bufferedStart` to `bufferedEnd`.", "readonly": true }, { "name": "duration", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A `double` indicating the total playback length of the media in seconds. If no media data is\navailable, the returned value is `0`. If the media is of indefinite length (such as\nstreamed live media, a WebRTC call's media, or similar), the value is `+Infinity`.", "doctags": [ { "name": "defaultValue", "text": "0" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration" } ], "readonly": true }, { "name": "canAirPlay", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether Apple AirPlay is available for casting and playing media on another device such as a\nTV.", "default": "false" }, { "name": "canGoogleCast", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether Google Cast is available for casting and playing media on another device such as a TV.", "default": "false" }, { "name": "remotePlaybackState", "type": { "primitive": "string", "concise": "RemotePlaybackState", "full": "'connected' | 'connecting' | 'disconnected'" }, "docs": "The current remote playback state when using AirPlay or Google Cast.", "default": "'disconnected'" }, { "name": "remotePlaybackType", "type": { "primitive": "string", "concise": "RemotePlaybackType", "full": "'airplay' | 'google-cast' | 'none'" }, "docs": "The type of remote playback that is currently connecting or connected.", "default": "'none'" }, { "name": "remotePlaybackLoader", "type": { "primitive": "object", "concise": "MediaProviderLoader | null", "full": "MediaProviderLoader | null" }, "docs": "An active remote playback loader such as the `GoogleCastLoader`.", "default": "null" }, { "name": "remotePlaybackInfo", "type": { "primitive": "object", "concise": "RemotePlaybackInfo | null", "full": "RemotePlaybackInfo | null" }, "docs": "Information about the current remote playback.", "default": "null" }, { "name": "isAirPlayConnected", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether AirPlay is connected.", "readonly": true }, { "name": "isGoogleCastConnected", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether Google Cast is connected.", "readonly": true }, { "name": "canFullscreen", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the native browser Fullscreen API is available, or the current provider can\ntoggle fullscreen mode. This does not mean that the operation is guaranteed to be successful,\nonly that it can be attempted.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API" } ], "default": "false" }, { "name": "canOrientScreen", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the native Screen Orientation API and required methods (lock/unlock) are available.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API" } ], "default": "canOrientScreen()" }, { "name": "canPictureInPicture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether picture-in-picture mode is supported by the current media provider.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API" } ], "default": "false" }, { "name": "canLoad", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media is allowed to begin loading. This depends on the `load` player prop.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ], "default": "false" }, { "name": "canLoadPoster", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the media poster is allowed to begin loading. This depends on the `posterLoad`\nplayer prop.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ], "default": "false" }, { "name": "canPlay", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the user agent can play the media, but estimates that **not enough** data has been\nloaded to play the media up to its end without having to stop for further buffering of\ncontent.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event" } ], "default": "false" }, { "name": "canSeek", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether seeking operations are possible on the current stream. This generally false for\nlive streams that are loaded natively.", "doctags": [ { "name": "defaultValue", "text": "true" } ], "readonly": true }, { "name": "clipStartTime", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Limit playback to only play _after_ a certain time. Playback will begin from this time.", "doctags": [ { "name": "defaultValue", "text": "0" } ], "default": "0" }, { "name": "clipEndTime", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Limit playback to only play _before_ a certain time. Playback will end at this time.", "doctags": [ { "name": "defaultValue", "text": "0" } ], "default": "0" }, { "name": "controls", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Indicates whether a user interface should be shown for controlling the resource. Set this to\n`false` when you want to provide your own custom controls, and `true` if you want the current\nprovider to supply its own default controls. Depending on the provider, changing this prop\nmay cause the player to completely reset.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls" } ], "default": "false" }, { "name": "iOSControls", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether iOS Safari video controls are visible. This will be true if `playsinline` is not set\nor in fullscreen due to lack of a Fullscreen API.", "readonly": true }, { "name": "nativeControls", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether native controls should be shown due to the `controls` state or `iOSControls` state.", "readonly": true }, { "name": "crossOrigin", "type": { "primitive": "string", "concise": "MediaCrossOrigin | null", "full": "MediaCrossOrigin | null" }, "docs": "Defines how the media element handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ], "default": "null" }, { "name": "poster", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The URL of the current poster. Defaults to `''` if no media/poster has been given or\nloaded.", "doctags": [ { "name": "defaultValue", "text": "''" } ], "readonly": true }, { "name": "currentTime", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A `double` indicating the current playback time in seconds. Defaults to `0` if the media has\nnot started to play and has not seeked. Setting this value seeks the media to the new\ntime. The value can be set to a minimum of `0` and maximum of the total length of the\nmedia (indicated by the duration prop).", "doctags": [ { "name": "defaultValue", "text": "0" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime" } ], "readonly": true }, { "name": "ended", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media playback has reached the end. In other words it'll be true\nif `currentTime === duration`.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended" } ], "default": "false" }, { "name": "error", "type": { "primitive": "object", "concise": "MediaErrorDetail | null", "full": "MediaErrorDetail | null" }, "docs": "Contains the most recent media error or undefined if there's been none. You can listen for\n`error` event updates and examine this object to debug further.", "doctags": [ { "name": "defaultValue", "text": "null" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error" } ], "default": "null" }, { "name": "fullscreen", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the player is currently in fullscreen mode.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API" } ], "default": "false" }, { "name": "controlsVisible", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the controls are visible. By default, controls will be hidden when media playback\nis progressing (playing) without any detected user activity for a set period of time\n(default is 2.5s).", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "controlsHidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether controls are hidden.", "readonly": true }, { "name": "userBehindLiveEdge", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the user has intentionally seeked behind the live edge. The user must've seeked\nroughly 2 or more seconds behind during a live stream for this to be considered true.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "loop", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media should automatically start playing from the beginning (replay) every time\nit ends.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop" } ], "readonly": true }, { "name": "logLevel", "type": { "primitive": "string", "concise": "LogLevel", "full": "'error' | 'silent' | 'warn' | 'info' | 'debug'" }, "docs": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "default": "__DEV__ ? 'warn' : 'silent'" }, { "name": "live", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current media stream is live (i.e., being broadcast right now).", "readonly": true }, { "name": "liveEdgeTolerance", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The number of seconds that `currentTime` can be behind `liveEdgeStart` and still be considered\nat the edge. The default value is 10, meaning the user can be up to 10 seconds behind the\nlive edge start and still be considered live.", "doctags": [ { "name": "defaultValue", "text": "10" } ], "default": "10" }, { "name": "minLiveDVRWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum seekable length in seconds before seeking operations are permitted on live streams.", "doctags": [ { "name": "defaultValue", "text": "60" } ], "default": "60" }, { "name": "liveDVRWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The inferred length of the live DVR window.", "readonly": true }, { "name": "isLiveDVR", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the live stream has Digital Video Recording (DVR) enabled.", "readonly": true }, { "name": "liveEdge", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current stream is at the live edge. This is true if:\n\n1. The player is _not_ in a paused state.\n2. The user has _not_ intentionally seeked behind live edge start.\n3. The `currentTime` is greater or equal than `liveEdgeStart`.\n\nThis value will default to `false` for non-live streams.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "readonly": true }, { "name": "liveEdgeStart", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "This is the starting edge of the live stream.\n\nA delay is applied in `hls.js` that's specified by the `liveSyncDurationCount` which is\nexpressed as a multiple of `EXT-X-TARGETDURATION` (default value is safely set to 3). If\nset to `m`, playback will start from the fragment at `n-m`, where `n` is the last fragment\nof the live playlist. Decreasing this value is likely to cause playback stalls.\n\nThe `seekableEnd` value is used as the live edge start in native playback engines.", "doctags": [ { "name": "see", "text": "https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlslivesyncposition" }, { "name": "see", "text": "https://github.com/video-dev/hls.js/blob/master/docs/API.md#livesyncdurationcount" }, { "name": "see", "text": "https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md" } ], "readonly": true }, { "name": "liveEdgeWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The length of the live edge window in seconds starting from `liveEdgeStart` and ending at\n`seekableEnd`. If the `duration` of the stream is `Infinity` or the stream is non-live then\nthis value will default to 0.", "readonly": true }, { "name": "mediaType", "type": { "primitive": "string", "concise": "MediaType", "full": "'unknown' | 'audio' | 'video'" }, "docs": "The type of media that is currently active, whether it's audio or video. Defaults\nto `unknown` when no media has been loaded or the type cannot be determined.", "doctags": [ { "name": "defaultValue", "text": "'unknown'" } ], "default": "'unknown'" }, { "name": "muted", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the audio is muted or not.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted" } ], "default": "false" }, { "name": "paused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback should be paused. Defaults to `true` if no media has loaded or playback has\nnot started. Setting this to `false` will begin/resume playback.", "doctags": [ { "name": "defaultValue", "text": "true" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused" } ], "default": "true" }, { "name": "played", "type": { "primitive": "object", "concise": "TimeRanges", "full": "TimeRanges" }, "docs": "Contains the ranges of the media source that the browser has played, if any.", "doctags": [ { "name": "defaultValue", "text": "TimeRanges" } ], "default": "new TimeRange()" }, { "name": "playing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media is actively playing back. Defaults to `false` if no media has\nloaded or playback has not started.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "playsInline", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the video is to be played \"inline\", that is within the element's playback area. Note\nthat setting this to `false` does not imply that the video will always be played in fullscreen.\nDepending on the provider, changing this prop may cause the player to completely reset.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline" } ], "default": "false" }, { "name": "playbackRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Sets the rate at which the media is being played back. This is used to implement user\ncontrols for fast forward, slow motion, and so forth. The normal playback rate is multiplied\nby this value to obtain the current rate, so a value of 1.0 indicates normal speed.\n\nExamples:\n\n- `0.5` = slow down to 50% of the normal speed\n- `1.5` = speed up normal speed by 50%\n- `2` = double the normal speed", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate" } ], "default": "1" }, { "name": "pictureInPicture", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the player is currently in picture-in-picture mode.", "doctags": [ { "name": "defaultValue", "text": "false" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API" } ], "default": "false" }, { "name": "preload", "type": { "primitive": "string", "concise": "'none' | 'metadata' | 'auto'", "full": "'none' | 'metadata' | 'auto'" }, "docs": "Configures the preload setting of the underlying media provider once it can load (see\n`loading` property).\n\nThe `preload` attribute provides a hint to the browser about what the author thinks will\nlead to the best user experience with regards to what content is loaded before the video is\nplayed. The recommended default is `metadata`.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ], "default": "'metadata'" }, { "name": "autoQuality", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether auto quality selection is active.", "default": "false" }, { "name": "qualities", "type": { "primitive": "object", "concise": "VideoQuality[]", "full": "VideoQuality[]" }, "docs": "The list of available video qualities/renditions. This will be empty if quality information\nis not provided by the current media provider.", "default": "[]" }, { "name": "quality", "type": { "primitive": "object", "concise": "VideoQuality | null", "full": "VideoQuality | null" }, "docs": "The current playback quality. This will be `null` if quality information is not provided\nby the current media provider.", "default": "null" }, { "name": "audioTracks", "type": { "primitive": "object", "concise": "AudioTrack[]", "full": "AudioTrack[]" }, "docs": "The list of available audio tracks. This will be empty if audio track information is not\nprovided by the current media provider.", "default": "[]" }, { "name": "audioTrack", "type": { "primitive": "object", "concise": "AudioTrack | null", "full": "AudioTrack | null" }, "docs": "The current audio track. This will be `null` if audio track information is not provided by\n the current media provider.", "default": "null" }, { "name": "audioGain", "type": { "primitive": "number", "concise": "number | null", "full": "number | null" }, "docs": "The current audio gain. This will be `null` if audio gain is not supported or is not set.", "default": "null" }, { "name": "canSetQuality", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current video quality list is read-only, meaning quality selections can only\nbe set internally by the media provider. This will only be `false` when working with particular\nthird-party embeds such as YouTube.", "default": "true" }, { "name": "canSetPlaybackRate", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current playback rate can be set. This will only be `false` when working with\nparticular third-party embeds such as Vimeo (only available to pro/business accounts).", "default": "true" }, { "name": "canSetVolume", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current volume can be changed. This depends on the current provider and browser\nenvironment. It will generally be `false` on mobile devices as it's set by system controls.", "default": "false" }, { "name": "canSetAudioGain", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the current audio gain can be changed. This depends on the current provider and browser\nenvironment. It generally depends on browser's Web Audio API support.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" } ], "default": "false" }, { "name": "seekable", "type": { "primitive": "object", "concise": "TimeRanges", "full": "TimeRanges" }, "docs": "Contains the time ranges that the user is able to seek to, if any. This tells us which parts\nof the media can be played without delay; this is irrespective of whether that part has\nbeen downloaded or not.\n\nSome parts of the media may be seekable but not buffered if byte-range\nrequests are enabled on the server. Byte range requests allow parts of the media file to\nbe delivered from the server and so can be ready to play almost immediately — thus they are\nseekable.", "doctags": [ { "name": "defaultValue", "text": "TimeRanges" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable" } ], "default": "new TimeRange()" }, { "name": "seekableStart", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Contains the earliest time in seconds at which media can be seeked to. Generally this is\nzero, but for live streams it may start at a non-zero value.", "doctags": [ { "name": "defaultValue", "text": "0" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable" } ], "readonly": true }, { "name": "seekableEnd", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The latest time in seconds at which media can be seeked to. This will default to `Infinity`\nif no seekable range is found. If byte-range requests are enabled on the server this should\nbe equal to the media duration - note for live streams duration is a moving target.", "doctags": [ { "name": "defaultValue", "text": "Infinity" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable" } ], "readonly": true }, { "name": "seekableWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The length of the seekable window in seconds starting from `seekableStart` and ending at\n`seekableEnd`.", "doctags": [ { "name": "defaultValue", "text": "0" } ], "readonly": true }, { "name": "seeking", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media is actively seeking to a new playback position.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "sources", "type": { "primitive": "object", "concise": "Src[]", "full": "Src[]" }, "docs": "The URL and optionally type of the current media resource/s to be considered for playback.\nUse `source` to get the currently loaded resource.", "doctags": [ { "name": "defaultValue", "text": "[]" } ], "default": "[]" }, { "name": "source", "type": { "primitive": "object", "concise": "Src", "full": "Src" }, "docs": "The chosen media resource. Defaults to `{ src: '', type: '' }` if no media has been loaded.", "doctags": [ { "name": "defaultValue", "text": "{ src: '', type: '' }" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc" } ], "default": "{ src: '', type: '' }" }, { "name": "currentSrc", "type": { "primitive": "object", "concise": "Src", "full": "Src" }, "docs": "Alias for `source`.", "readonly": true }, { "name": "started", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether media playback has started. In other words it will be true if `currentTime > 0`.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "streamType", "type": { "primitive": "string", "concise": "MediaStreamType", "full": "'unknown' | 'live' | 'on-demand' | 'live:dvr' | 'll-live' | 'll-live:dvr'" }, "docs": "The current media stream type. This value helps determine what type of UI should be\ndisplayed and whether seeking operations are permitted during live streams. If seeking\nis permitted, set this value to `live:dvr` or `ll-live:dvr`.", "readonly": true }, { "name": "title", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The title of the current media.", "readonly": true }, { "name": "artist", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The artist or channel name for which this content belongs to. This can be used in your\nlayout and it will be included in the Media Session API.", "default": "''" }, { "name": "artwork", "type": { "primitive": "object", "concise": "MediaImage[] | null", "full": "MediaImage[] | null" }, "docs": "Images to be included in the Media Session API.", "default": "null" }, { "name": "textTracks", "type": { "primitive": "object", "concise": "TextTrack[]", "full": "TextTrack[]" }, "docs": "The list of all available text tracks.", "default": "[]" }, { "name": "textTrack", "type": { "primitive": "object", "concise": "TextTrack | null", "full": "TextTrack | null" }, "docs": "The current captions/subtitles text track that is showing.", "default": "null" }, { "name": "hasCaptions", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether there are any captions or subtitles available.", "readonly": true }, { "name": "viewType", "type": { "primitive": "string", "concise": "MediaViewType", "full": "'unknown' | 'audio' | 'video'" }, "docs": "The type of player view that should be used (i.e., audio or video). By default this is set\nto `video`.", "doctags": [ { "name": "defaultValue", "text": "'unknown'" } ], "readonly": true }, { "name": "volume", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "An `int` between `0` (silent) and `1` (loudest) indicating the audio volume. Defaults to `1`.", "doctags": [ { "name": "defaultValue", "text": "1" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume" } ], "default": "1" }, { "name": "waiting", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback has temporarily stopped because of a lack of temporary data.", "doctags": [ { "name": "defaultValue", "text": "false" } ], "default": "false" }, { "name": "pointer", "type": { "primitive": "string", "concise": "'fine' | 'coarse'", "full": "'fine' | 'coarse'" }, "docs": "The user's pointing device type.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer" } ], "default": "'fine'" }, { "name": "orientation", "type": { "primitive": "string", "concise": "'portrait' | 'landscape'", "full": "'portrait' | 'landscape'" }, "docs": "The current screen orientation.", "default": "'landscape'" }, { "name": "width", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The width of the media player container in pixels.", "default": "0" }, { "name": "height", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The height of the media player container in pixels.", "default": "0" }, { "name": "mediaWidth", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The width of the media provider in pixels.", "default": "0" }, { "name": "mediaHeight", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The height of the media in provider pixels.", "default": "0" }, { "name": "lastKeyboardAction", "type": { "primitive": "object", "concise": "{ action: string; event: KeyboardEvent; } | null", "full": "{ action: string; event: KeyboardEvent; } | null" }, "docs": "The last keyboard shortcut that was triggered.", "default": "null" }, { "name": "autoPlaying", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "doctags": [ { "name": "internal" } ], "default": "false", "internal": true }, { "name": "providedTitle", "type": { "primitive": "string", "concise": "string", "full": "string" }, "doctags": [ { "name": "internal" } ], "default": "''", "internal": true }, { "name": "inferredTitle", "type": { "primitive": "string", "concise": "string", "full": "string" }, "doctags": [ { "name": "internal" } ], "default": "''", "internal": true }, { "name": "providedLoop", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "doctags": [ { "name": "internal" } ], "default": "false", "internal": true }, { "name": "userPrefersLoop", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "doctags": [ { "name": "internal" } ], "default": "false", "internal": true }, { "name": "realCurrentTime", "type": { "primitive": "number", "concise": "number", "full": "number" }, "doctags": [ { "name": "internal", "text": "- Unclipped current time." } ], "default": "0", "internal": true }, { "name": "providedPoster", "type": { "primitive": "string", "concise": "string", "full": "string" }, "doctags": [ { "name": "internal" } ], "default": "''", "internal": true }, { "name": "intrinsicDuration", "type": { "primitive": "number", "concise": "number", "full": "number" }, "doctags": [ { "name": "internal" } ], "default": "0", "internal": true }, { "name": "providedDuration", "type": { "primitive": "number", "concise": "number", "full": "number" }, "doctags": [ { "name": "internal" } ], "default": "-1", "internal": true }, { "name": "inferredPoster", "type": { "primitive": "string", "concise": "string", "full": "string" }, "doctags": [ { "name": "internal" } ], "default": "''", "internal": true }, { "name": "inferredViewType", "type": { "primitive": "string", "concise": "MediaViewType", "full": "'unknown' | 'audio' | 'video'" }, "doctags": [ { "name": "internal" } ], "default": "'unknown'", "internal": true }, { "name": "providedViewType", "type": { "primitive": "string", "concise": "MediaViewType", "full": "'unknown' | 'audio' | 'video'" }, "doctags": [ { "name": "internal" } ], "default": "'unknown'", "internal": true }, { "name": "providedStreamType", "type": { "primitive": "string", "concise": "MediaStreamType", "full": "'unknown' | 'live' | 'on-demand' | 'live:dvr' | 'll-live' | 'll-live:dvr'" }, "doctags": [ { "name": "internal" } ], "default": "'unknown'", "internal": true }, { "name": "inferredStreamType", "type": { "primitive": "string", "concise": "MediaStreamType", "full": "'unknown' | 'live' | 'on-demand' | 'live:dvr' | 'll-live' | 'll-live:dvr'" }, "doctags": [ { "name": "internal" } ], "default": "'unknown'", "internal": true }, { "name": "inferredLiveDVRWindow", "type": { "primitive": "number", "concise": "number", "full": "number" }, "default": "0" }, { "name": "liveSyncPosition", "type": { "primitive": "number", "concise": "number | null", "full": "number | null" }, "doctags": [ { "name": "internal" } ], "default": "null", "internal": true }, { "name": "savedState", "type": { "primitive": "object", "concise": "{ paused?: boolean | undefined; currentTime?: number | undefined; } | null", "full": "{ paused?: boolean | undefined; currentTime?: number | undefined; } | null" }, "doctags": [ { "name": "internal" } ], "default": "null", "internal": true } ], "members": { "props": [ { "name": "canPlayQueue", "default": "new RequestQueue()", "type": { "primitive": "object", "concise": "RequestQueue", "full": "RequestQueue" }, "readonly": true }, { "name": "remoteControl", "type": { "primitive": "object", "concise": "MediaRemoteControl", "full": "MediaRemoteControl" }, "readonly": true }, { "name": "provider", "type": { "primitive": "unknown", "concise": "AnyMediaProvider | null", "full": "AnyMediaProvider | null" }, "docs": "The current media provider.", "readonly": true }, { "name": "controls", "type": { "primitive": "object", "concise": "MediaControls", "full": "MediaControls" }, "docs": "Media controls settings." }, { "name": "orientation", "type": { "primitive": "object", "concise": "ScreenOrientationController", "full": "ScreenOrientationController" }, "docs": "Controls the screen orientation of the current browser window and dispatches orientation\nchange events on the player.", "readonly": true }, { "name": "title", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The title of the current media." }, { "name": "qualities", "type": { "primitive": "object", "concise": "VideoQualityList", "full": "VideoQualityList" }, "docs": "A list of all `VideoQuality` objects representing the set of available video renditions.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/video-quality" } ], "readonly": true }, { "name": "audioTracks", "type": { "primitive": "object", "concise": "AudioTrackList", "full": "AudioTrackList" }, "docs": "A list of all `AudioTrack` objects representing the set of available audio tracks.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/audio-tracks" } ], "readonly": true }, { "name": "textTracks", "type": { "primitive": "object", "concise": "TextTrackList", "full": "TextTrackList" }, "docs": "A list of all `TextTrack` objects representing the set of available text tracks.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/text-tracks" } ], "readonly": true }, { "name": "textRenderers", "type": { "primitive": "object", "concise": "TextRenderers", "full": "TextRenderers" }, "docs": "Contains text renderers which are responsible for loading, parsing, and rendering text\ntracks.", "readonly": true }, { "name": "duration", "type": { "primitive": "number", "concise": "number", "full": "number" } }, { "name": "paused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether playback should be paused. Defaults to `true` if no media has loaded or playback has\nnot started. Setting this to `false` will begin/resume playback." }, { "name": "muted", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the audio is muted or not." }, { "name": "currentTime", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A `double` indicating the current playback time in seconds. Defaults to `0` if the media has\nnot started to play and has not seeked. Setting this value seeks the media to the new\ntime. The value can be set to a minimum of `0` and maximum of the total length of the\nmedia (indicated by the duration prop)." }, { "name": "volume", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "An `int` between `0` (silent) and `1` (loudest) indicating the audio volume. Defaults to `1`." }, { "name": "playbackRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Sets the rate at which the media is being played back. This is used to implement user\ncontrols for fast forward, slow motion, and so forth. The normal playback rate is multiplied\nby this value to obtain the current rate, so a value of 1.0 indicates normal speed.\n\nExamples:\n\n- `0.5` = slow down to 50% of the normal speed\n- `1.5` = speed up normal speed by 50%\n- `2` = double the normal speed" }, { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "MediaPlayerState", "full": "MediaPlayerState" }, "readonly": true } ], "methods": [ { "name": "play", "docs": "Begins/resumes playback of the media. If this method is called programmatically before the\nuser has interacted with the player, the promise may be rejected subject to the browser's\nautoplay policies. This method will throw if called before media is ready for playback.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "pause", "docs": "Pauses playback of the media. This method will throw if called before media is ready for\nplayback.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "enterFullscreen", "docs": "Attempts to display the player in fullscreen. The promise will resolve if successful, and\nreject if not. This method will throw if any fullscreen API is _not_ currently available.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/fullscreen" } ], "parameters": [ { "name": "target", "type": { "primitive": "string", "concise": "MediaFullscreenRequestTarget | undefined", "full": "MediaFullscreenRequestTarget | undefined" }, "optional": true }, { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(target?: MediaFullscreenRequestTarget, trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "exitFullscreen", "docs": "Attempts to display the player inline by exiting fullscreen. This method will throw if any\nfullscreen API is _not_ currently available.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/fullscreen" } ], "parameters": [ { "name": "target", "type": { "primitive": "string", "concise": "MediaFullscreenRequestTarget | undefined", "full": "MediaFullscreenRequestTarget | undefined" }, "optional": true }, { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(target?: MediaFullscreenRequestTarget, trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "enterPictureInPicture", "docs": "Attempts to display the player in picture-in-picture mode. This method will throw if PIP is\nnot supported. This method will also return a `PictureInPictureWindow` if the current\nprovider supports it.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/picture-in-picture" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "exitPictureInPicture", "docs": "Attempts to display the player in inline by exiting picture-in-picture mode. This method\nwill throw if not supported.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/picture-in-picture" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "seekToLiveEdge", "docs": "Sets the current time to the live edge (i.e., `duration`). This is a no-op for non-live\nstreams and will throw if called before media is ready for playback.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/live" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => void" }, "return": { "type": "void" } }, { "name": "startLoading", "docs": "Called when media can begin loading. Calling this method will trigger the initial provider\nloading process. Calling it more than once has no effect.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => void" }, "return": { "type": "void" } }, { "name": "startLoadingPoster", "docs": "Called when the poster image can begin loading. Calling it more than once has no effect.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/core-concepts/loading#load-strategies" } ], "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => void" }, "return": { "type": "void" } }, { "name": "requestAirPlay", "docs": "Request Apple AirPlay picker to open.", "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "requestGoogleCast", "docs": "Request Google Cast device picker to open. The Google Cast framework will be loaded if it\nhasn't yet.", "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => Promise" }, "return": { "type": "Promise" } }, { "name": "setAudioGain", "docs": "Set the audio gain, amplifying volume and enabling a maximum volume above 100%.", "doctags": [ { "name": "see", "text": "https://vidstack.io/docs/player/api/audio-gain" } ], "parameters": [ { "name": "gain", "type": { "primitive": "number", "concise": "number", "full": "number" } }, { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(gain: number, trigger?: Event) => void" }, "return": { "type": "void" } }, { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: MediaPlayerState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 30 }, "generics": { "props": "MediaPlayerProps", "state": "MediaPlayerState", "events": "MediaPlayerEvents" } }, { "type": "component", "name": "MediaProvider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/provider/provider.ts" }, "docs": "Used to render the current provider.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/provider" } ], "props": [ { "name": "loaders", "default": "[]", "type": { "primitive": "object", "concise": "MediaProviderLoader[]", "full": "MediaProviderLoader[]" }, "internal": true } ], "state": [ { "name": "loader", "type": { "primitive": "object", "concise": "MediaProviderLoader | null", "full": "MediaProviderLoader | null" }, "default": "null" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "MediaProviderState", "full": "MediaProviderState" }, "readonly": true } ], "methods": [ { "name": "load", "parameters": [ { "name": "target", "type": { "primitive": "object", "concise": "HTMLElement | null | undefined", "full": "HTMLElement | null | undefined" } } ], "signature": { "type": "(target: HTMLElement | null | undefined) => void" }, "return": { "type": "void" } }, { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: MediaProviderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 3 }, "generics": { "props": "MediaProviderProps", "state": "MediaProviderState" } }, { "type": "component", "name": "AirPlayButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/airplay-button.ts" }, "docs": "A button for requesting remote playback via Apple AirPlay.", "doctags": [ { "name": "attr", "text": "data-active - Whether AirPlay is connected." }, { "name": "attr", "text": "data-supported - Whether AirPlay is available." }, { "name": "attr", "text": "data-state - Current connection state." }, { "name": "see", "text": "https://www.apple.com/au/airplay" }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/airplay-button" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-airplay-request", "type": { "primitive": "object", "concise": "MediaAirPlayRequestEvent", "full": "MediaAirPlayRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the AirPlay picker to open.", "bubbles": true, "composed": true } ], "generics": { "props": "AirPlayButtonProps", "events": "AirPlayButtonEvents" } }, { "type": "component", "name": "CaptionButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/caption-button.ts" }, "docs": "A button for toggling the showing state of the captions.", "doctags": [ { "name": "attr", "text": "data-supported - Whether captions/subtitles are available." }, { "name": "attr", "text": "data-active - Whether closed captions or subtitles are on." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/caption-button" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-text-track-change-request", "type": { "primitive": "object", "concise": "MediaTextTrackChangeRequestEvent", "full": "MediaTextTrackChangeRequestEvent" }, "detail": { "primitive": "object", "concise": "{ index: number; mode: TextTrackMode; }", "full": "{ index: number; mode: TextTrackMode; }" }, "docs": "Fired when requesting to change the `mode` on a text track at the given index in the\n`TextTrackList` on the player.", "bubbles": true, "composed": true } ], "generics": { "props": "CaptionButtonProps", "events": "CaptionButtonEvents" } }, { "type": "component", "name": "FullscreenButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/fullscreen-button.ts" }, "docs": "A button for toggling the fullscreen mode of the player.", "doctags": [ { "name": "attr", "text": "data-active - Whether fullscreen mode is active." }, { "name": "attr", "text": "data-supported - Whether fullscreen mode is supported." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/fullscreen-button" }, { "name": "see", "text": "https://www.vidstack.io/docs/player/api/fullscreen" } ], "props": [ { "name": "target", "default": "'prefer-media'", "type": { "primitive": "string", "concise": "MediaFullscreenRequestTarget | undefined", "full": "MediaFullscreenRequestTarget | undefined" }, "docs": "The target element on which to request fullscreen on. The target can be `media`\n(i.e., ``) or `provider`. The `prefer-media` option will first see if the native\nfullscreen API is available, if not it'll try the media provider." }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-enter-fullscreen-request", "type": { "primitive": "object", "concise": "MediaEnterFullscreenRequestEvent", "full": "MediaEnterFullscreenRequestEvent" }, "detail": { "primitive": "string", "concise": "MediaFullscreenRequestTarget", "full": "'prefer-media' | 'media' | 'provider'" }, "docs": "Fired when requesting media to enter fullscreen. The event `detail` can specify the\nfullscreen target, which can be the media or provider (defaults to `prefer-media`).", "bubbles": true, "composed": true }, { "name": "media-exit-fullscreen-request", "type": { "primitive": "object", "concise": "MediaExitFullscreenRequestEvent", "full": "MediaExitFullscreenRequestEvent" }, "detail": { "primitive": "string", "concise": "MediaFullscreenRequestTarget", "full": "'prefer-media' | 'media' | 'provider'" }, "docs": "Fired when requesting media to exit fullscreen. The event `detail` can specify the fullscreen\ntarget, which can be the media or provider (defaults to `prefer-media`).", "bubbles": true, "composed": true } ], "generics": { "props": "FullscreenButtonProps", "events": "FullscreenButtonEvents" } }, { "type": "component", "name": "GoogleCastButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/google-cast-button.ts" }, "docs": "A button for requesting remote playback via Google Cast.", "doctags": [ { "name": "attr", "text": "data-active - Whether Google Cast is connected." }, { "name": "attr", "text": "data-supported - Whether Google Cast is available." }, { "name": "attr", "text": "data-state - Current connection state." }, { "name": "see", "text": "https://developers.google.com/cast/docs/overview" }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/google-cast-button" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-google-cast-request", "type": { "primitive": "object", "concise": "MediaGoogleCastRequestEvent", "full": "MediaGoogleCastRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting Google Cast.", "bubbles": true, "composed": true } ], "generics": { "props": "GoogleCastButtonProps", "events": "GoogleCastButtonEvents" } }, { "type": "component", "name": "LiveButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/live-button.ts" }, "docs": "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.", "doctags": [ { "name": "attr", "text": "data-edge - Playback is at the live edge." }, { "name": "attr", "text": "data-hidden - Whether current media is _not_ live." }, { "name": "attr", "text": "data-focus - Whether button is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether button is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/live-button" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive). This will prevent seeking to the\nlive edge when pressed." } ], "events": [ { "name": "media-live-edge-request", "type": { "primitive": "object", "concise": "MediaLiveEdgeRequestEvent", "full": "MediaLiveEdgeRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to seek to the live edge (i.e., set the current time to the current\nlive time)." } ], "generics": { "props": "LiveButtonProps", "events": "LiveButtonEvents" } }, { "type": "component", "name": "MuteButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/mute-button.ts" }, "docs": "A button for toggling the muted state of the player.", "doctags": [ { "name": "attr", "text": "data-muted - Whether volume is muted (0)." }, { "name": "attr", "text": "data-state - Current volume setting (low/high/muted)." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/mute-button" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-mute-request", "type": { "primitive": "object", "concise": "MediaMuteRequestEvent", "full": "MediaMuteRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the media to be muted.", "bubbles": true, "composed": true }, { "name": "media-unmute-request", "type": { "primitive": "object", "concise": "MediaUnmuteRequestEvent", "full": "MediaUnmuteRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting the media to be unmuted.", "bubbles": true, "composed": true } ], "generics": { "props": "MuteButtonProps", "events": "MuteButtonEvents" } }, { "type": "component", "name": "PIPButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/pip-button.ts" }, "docs": "A button for toggling the picture-in-picture (PIP) mode of the player.", "doctags": [ { "name": "attr", "text": "data-active - Whether picture-in-picture mode is active." }, { "name": "attr", "text": "data-supported - Whether picture-in-picture mode is available." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/pip-button" }, { "name": "see", "text": "https://www.vidstack.io/docs/player/api/picture-in-picture" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-enter-pip-request", "type": { "primitive": "object", "concise": "MediaEnterPIPRequestEvent", "full": "MediaEnterPIPRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to enter picture-in-picture mode.", "bubbles": true, "composed": true }, { "name": "media-exit-pip-request", "type": { "primitive": "object", "concise": "MediaExitPIPRequestEvent", "full": "MediaExitPIPRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to exit picture-in-picture mode.", "bubbles": true, "composed": true } ], "generics": { "props": "PIPButtonProps", "events": "PIPButtonEvents" } }, { "type": "component", "name": "PlayButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/play-button.ts" }, "docs": "A button for toggling the playback state (play/pause) of the current media.", "doctags": [ { "name": "attr", "text": "data-paused - Whether playback has stopped." }, { "name": "attr", "text": "data-ended - Whether playback has ended." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/play-button" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "media-play-request", "type": { "primitive": "object", "concise": "MediaPlayRequestEvent", "full": "MediaPlayRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to begin/resume.", "bubbles": true, "composed": true }, { "name": "media-pause-request", "type": { "primitive": "object", "concise": "MediaPauseRequestEvent", "full": "MediaPauseRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to temporarily stop.", "bubbles": true, "composed": true } ], "generics": { "props": "PlayButtonProps", "events": "PlayButtonEvents" } }, { "type": "component", "name": "SeekButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/seek-button.ts" }, "docs": "A button for seeking the current media playback forwards or backwards by a specified amount.", "doctags": [ { "name": "attr", "text": "data-seeking - Whether a seeking operation is in progress." }, { "name": "attr", "text": "data-supported - Whether seeking operations are permitted." }, { "name": "attr", "text": "data-focus - Whether button is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether button is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/seek-button" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." }, { "name": "seconds", "default": "30", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The amount to seek the media playback forwards (positive number) or backwards (negative number)\nwhen the seek button is pressed." } ], "events": [ { "name": "media-seek-request", "type": { "primitive": "object", "concise": "MediaSeekRequestEvent", "full": "MediaSeekRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting a time change. In other words, moving the play head to a new position.", "doctags": [ { "name": "detail", "text": "seekTo" } ], "bubbles": true, "composed": true } ], "generics": { "props": "SeekButtonProps", "events": "SeekButtonEvents" } }, { "type": "component", "name": "ToggleButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/buttons/toggle-button.ts" }, "docs": "A toggle button is a two-state button that can be either off (not pressed) or on (pressed).", "doctags": [ { "name": "attr", "text": "data-pressed - Whether the toggle is in an \"on\" state (pressed)." }, { "name": "attr", "text": "aria-pressed - Same as `data-pressed` but `\"true\"` or `\"false\"`." }, { "name": "attr", "text": "data-focus - Whether button is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether button is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/buttons/toggle-button" } ], "props": [ { "name": "defaultPressed", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether it should start in the on (pressed) state." }, { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "members": { "props": [ { "name": "pressed", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the toggle is currently in a `pressed` state.", "readonly": true } ], "length": 1 }, "generics": { "props": "ToggleButtonProps" } }, { "type": "component", "name": "Captions", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/captions/captions.ts" }, "docs": "Renders and displays captions/subtitles. This will be an overlay for video and a simple\ncaptions box for audio.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/display/captions" } ], "props": [ { "name": "textDir", "default": "'ltr'", "type": { "primitive": "string", "concise": "'ltr' | 'rtl'", "full": "'ltr' | 'rtl'" } }, { "name": "exampleText", "default": "'Captions look like this.'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to be displayed when an example caption is being shown." } ], "generics": { "props": "CaptionsProps" } }, { "type": "component", "name": "ControlsGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/controls-group.ts" }, "docs": "This component creates a container for media controls.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/controls#group" } ] }, { "type": "component", "name": "Controls", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/controls.ts" }, "docs": "This component creates a container for control groups.", "doctags": [ { "name": "attr", "text": "data-visible - Whether controls should be visible." }, { "name": "attr", "text": "data-pip - Whether picture-in-picture mode is active." }, { "name": "attr", "text": "data-fullscreen - Whether fullscreen mode is active." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/controls" } ], "props": [ { "name": "hideDelay", "default": "2000", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The default amount of delay in milliseconds while media playback is progressing without user\nactivity to hide the controls." }, { "name": "hideOnMouseLeave", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether controls visibility should be toggled when the mouse enters and leaves the player\ncontainer." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "ControlsChangeEvent", "full": "ControlsChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the active state of the controls change.", "doctags": [ { "name": "detail", "text": "isVisible" } ] } ], "generics": { "props": "ControlsProps", "events": "ControlsEvents" } }, { "type": "component", "name": "Gesture", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/gesture.ts" }, "docs": "This component enables actions to be performed on the media based on user gestures.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/gesture" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether this gesture should not be triggered." }, { "name": "event", "default": "undefined", "type": { "primitive": "string", "concise": "GestureEventType | undefined", "full": "GestureEventType | undefined" }, "docs": "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).", "doctags": [ { "name": "example", "text": "'pointerup'" }, { "name": "example", "text": "'dblpointerup'" }, { "name": "example", "text": "'mouseleave'" } ] }, { "name": "action", "default": "undefined", "type": { "primitive": "string", "concise": "GestureAction | undefined", "full": "GestureAction | undefined" }, "docs": "An action describes the type of media request event that will be dispatched, which will\nultimately perform some operation on the player.", "doctags": [ { "name": "example", "text": "'play'" }, { "name": "example", "text": "'seek:30'" }, { "name": "example", "text": "'seek:-30'" }, { "name": "example", "text": "'toggle:paused'" } ] } ], "events": [ { "name": "will-trigger", "type": { "primitive": "object", "concise": "GestureWillTriggerEvent", "full": "GestureWillTriggerEvent" }, "detail": { "primitive": "string", "concise": "GestureAction", "full": "'play' | 'pause' | `seek:${number}` | 'toggle:controls' | 'toggle:fullscreen' | 'toggle:muted' | 'toggle:paused'" }, "docs": "This event will fire before the gesture action is triggered. Calling `event.preventDefault()`\nwill stop the action from being triggered.", "doctags": [ { "name": "detail", "text": "action" }, { "name": "cancelable" } ] }, { "name": "trigger", "type": { "primitive": "object", "concise": "GestureTriggerEvent", "full": "GestureTriggerEvent" }, "detail": { "primitive": "string", "concise": "GestureAction", "full": "'play' | 'pause' | `seek:${number}` | 'toggle:controls' | 'toggle:fullscreen' | 'toggle:muted' | 'toggle:paused'" }, "docs": "This event will fire after the gesture action has been triggered.", "doctags": [ { "name": "detail", "text": "action" } ] } ], "generics": { "props": "GestureProps", "events": "GestureEvents" } }, { "type": "component", "name": "MenuButton", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/menu-button.ts" }, "docs": "A button that controls the opening and closing of a menu component. The button will become a\nmenuitem when used inside a submenu.", "doctags": [ { "name": "attr", "text": "data-root - Whether this is the root menu button." }, { "name": "attr", "text": "data-submenu - Whether menu button is part of a submenu." }, { "name": "attr", "text": "data-open - Whether menu is currently open." }, { "name": "attr", "text": "data-focus - Whether button is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether button is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/menu" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "select", "type": { "primitive": "object", "concise": "MenuButtonSelectEvent", "full": "MenuButtonSelectEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the button is pressed via mouse, touch, or keyboard." } ], "members": { "props": [ { "name": "expanded", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 1 }, "generics": { "props": "MenuButtonProps", "events": "MenuButtonEvents" } }, { "type": "component", "name": "MenuItem", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/menu-item.ts" }, "docs": "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.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/menu" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the button should be disabled (non-interactive)." } ], "events": [ { "name": "select", "type": { "primitive": "object", "concise": "MenuButtonSelectEvent", "full": "MenuButtonSelectEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the button is pressed via mouse, touch, or keyboard." } ], "members": { "props": [ { "name": "expanded", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "length": 1 }, "generics": { "props": "MenuButtonProps", "events": "MenuButtonEvents" } }, { "type": "component", "name": "MenuItems", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/menu-items.ts" }, "docs": "Menu items can be used to display settings or arbitrary content in a floating panel.", "doctags": [ { "name": "attr", "text": "data-root - Whether this is the root menu items." }, { "name": "attr", "text": "data-submenu - Whether menu items are part of a submenu." }, { "name": "attr", "text": "data-open - Whether menu items are currently visible." }, { "name": "attr", "text": "data-keyboard - Whether the menu is opened via keyboard." }, { "name": "attr", "text": "data-placement - The placement prop setting." }, { "name": "attr", "text": "data-focus - Whether item are being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether items are being keyboard focused or hovered over." }, { "name": "attr", "text": "data-transition - Whether the menu is resizing." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/menu" } ], "props": [ { "name": "placement", "default": "null", "type": { "primitive": "string", "concise": "MenuPlacement | null", "full": "MenuPlacement | null" }, "docs": "A space-separated list which specifies the side and alignment of the menu relative\nto the menu button.", "doctags": [ { "name": "example", "text": "`top center`" }, { "name": "example", "text": "`bottom end`" } ] }, { "name": "offset", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "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." }, { "name": "alignOffset", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "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." } ], "generics": { "props": "MenuItemsProps" } }, { "type": "component", "name": "MenuPortal", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/menu-portal.ts" }, "docs": "Portals menu items into the document body.", "doctags": [ { "name": "attr", "text": "data-portal - Whether portal is active (determined by `disabled` prop)." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu#portal" } ], "props": [ { "name": "container", "default": "null", "type": { "primitive": "string", "concise": "string | HTMLElement | null", "full": "string | HTMLElement | null" }, "docs": "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`." }, { "name": "disabled", "default": "false", "type": { "primitive": "mixed", "concise": "boolean | 'fullscreen'", "full": "boolean | 'fullscreen'" }, "docs": "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." } ], "generics": { "props": "MenuPortalProps" } }, { "type": "component", "name": "Menu", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/menu.ts" }, "docs": "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.", "doctags": [ { "name": "attr", "text": "data-root - Whether this is the root menu items." }, { "name": "attr", "text": "data-submenu - Whether menu is a submenu." }, { "name": "attr", "text": "data-open - Whether menu is open." }, { "name": "attr", "text": "data-keyboard - Whether the menu is opened via keyboard." }, { "name": "attr", "text": "data-disabled - Whether menu is disabled." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/menu" } ], "props": [ { "name": "showDelay", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The amount of time in milliseconds to wait before showing the menu." } ], "events": [ { "name": "open", "type": { "primitive": "object", "concise": "MenuOpenEvent", "full": "MenuOpenEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the menu is opened." }, { "name": "close", "type": { "primitive": "object", "concise": "MenuCloseEvent", "full": "MenuCloseEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the menu is closed." }, { "name": "media-pause-controls-request", "type": { "primitive": "object", "concise": "MediaPauseControlsRequestEvent", "full": "MediaPauseControlsRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when controls visibility tracking should pause. This is typically used when a control\nis being actively interacted with, and we don't want the controls to be hidden before\nthe interaction is complete (eg: scrubbing, or settings is open).", "bubbles": true, "composed": true }, { "name": "media-resume-controls-request", "type": { "primitive": "object", "concise": "MediaResumeControlsRequestEvent", "full": "MediaResumeControlsRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when controls visibility tracking may resume. This is typically called after requesting\ntracking to pause via `media-pause-controls-request`.", "bubbles": true, "composed": true } ], "members": { "props": [ { "name": "triggerElement", "type": { "primitive": "object", "concise": "HTMLElement | null", "full": "HTMLElement | null" }, "docs": "The menu trigger element.", "readonly": true }, { "name": "contentElement", "type": { "primitive": "object", "concise": "HTMLElement | null", "full": "HTMLElement | null" }, "docs": "The menu items element.", "readonly": true }, { "name": "isSubmenu", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether this menu is the child of another menu that contains it.", "readonly": true } ], "methods": [ { "name": "open", "docs": "Open this menu. The first menu item will be focused if a `KeyboardEvent` trigger is provided", "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => void" }, "return": { "type": "void" } }, { "name": "close", "docs": "Close this menu. The menu button that controls this menu will be focused if a `KeyboardEvent`\ntrigger is provided", "parameters": [ { "name": "trigger", "type": { "primitive": "object", "concise": "Event | undefined", "full": "Event | undefined" }, "optional": true } ], "signature": { "type": "(trigger?: Event) => void" }, "return": { "type": "void" } } ], "length": 5 }, "generics": { "props": "MenuProps", "events": "MenuEvents" } }, { "type": "component", "name": "AudioGainRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/audio-gain-radio-group.ts" }, "docs": "This component manages audio gain radios.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/audio-gain-radio-group" } ], "props": [ { "name": "gains", "default": "DEFAULT_AUDIO_GAINS", "type": { "primitive": "object", "concise": "number[]", "full": "number[]" }, "docs": "The audio gain options to be displayed." }, { "name": "normalLabel", "default": "'Disabled'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to display for disabled audio gain (i.e., audio gain is 1.0)." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "AudioGainRadioGroupChangeEvent", "full": "AudioGainRadioGroupChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "gain" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => RadioOption[]" }, "return": { "type": "RadioOption[]" } } ], "length": 3 }, "generics": { "props": "AudioGainRadioGroupProps", "events": "AudioGainRadioGroupEvents" } }, { "type": "component", "name": "AudioRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/audio-radio-group.ts" }, "docs": "This component manages audio track radios.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/audio-radio-group" } ], "props": [ { "name": "emptyLabel", "default": "'Default'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to display when the are no audio tracks." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "AudioRadioGroupChangeEvent", "full": "AudioRadioGroupChangeEvent" }, "detail": { "primitive": "object", "concise": "AudioTrack", "full": "AudioTrack" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "track" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => AudioRadioOption[]" }, "return": { "type": "AudioRadioOption[]" } } ], "length": 3 }, "generics": { "props": "AudioRadioGroupProps", "events": "AudioRadioGroupEvents" } }, { "type": "component", "name": "CaptionsRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/captions-radio-group.ts" }, "docs": "This component manages caption/subtitle track radio options.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/captions-radio-group" } ], "props": [ { "name": "offLabel", "default": "'Off'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to display when the captions are turned off." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "CaptionsRadioGroupChangeEvent", "full": "CaptionsRadioGroupChangeEvent" }, "detail": { "primitive": "object", "concise": "TextTrack | null", "full": "TextTrack | null" }, "docs": "Fired when the checked radio changes. The event detail will be `null` when no track is selected\nor captions are turned off.", "doctags": [ { "name": "detail", "text": "track" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => CaptionsRadioOption[]" }, "return": { "type": "CaptionsRadioOption[]" } } ], "length": 3 }, "generics": { "props": "CaptionsRadioGroupProps", "events": "CaptionsRadioGroupEvents" } }, { "type": "component", "name": "ChaptersRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/chapters-radio-group.ts" }, "docs": "This component manages media chapters inside of a radio group.", "doctags": [ { "name": "attr", "text": "data-thumbnails - Whether thumbnails are available." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/chapters-radio-group" } ], "props": [ { "name": "thumbnails", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails" } ] } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "ChaptersRadioGroupChangeEvent", "full": "ChaptersRadioGroupChangeEvent" }, "detail": { "primitive": "object", "concise": "VTTCue", "full": "VTTCue" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "cue" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => ChaptersRadioOption[]" }, "return": { "type": "ChaptersRadioOption[]" } } ], "length": 3 }, "generics": { "props": "ChapterRadioGroupProps", "events": "ChaptersRadioGroupEvents" } }, { "type": "component", "name": "QualityRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/quality-radio-group.ts" }, "docs": "This component manages video quality radios.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/quality-radio-group" } ], "props": [ { "name": "autoLabel", "default": "'Auto'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to display for the auto quality radio option." }, { "name": "hideBitrate", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the bitrate should _not_ be displayed next to each quality radio option." }, { "name": "sort", "default": "'descending'", "type": { "primitive": "string", "concise": "'descending' | 'ascending'", "full": "'descending' | 'ascending'" }, "docs": "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" } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "QualityRadioGroupChangeEvent", "full": "QualityRadioGroupChangeEvent" }, "detail": { "primitive": "string", "concise": "'auto' | VideoQuality", "full": "'auto' | VideoQuality" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "quality" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => QualityRadioOption[]" }, "return": { "type": "QualityRadioOption[]" } } ], "length": 3 }, "generics": { "props": "QualityRadioGroupProps", "events": "QualityRadioGroupEvents" } }, { "type": "component", "name": "SpeedRadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio-groups/speed-radio-group.ts" }, "docs": "This component manages playback rate radios.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/speed-radio-group" } ], "props": [ { "name": "rates", "default": "DEFAULT_PLAYBACK_RATES", "type": { "primitive": "object", "concise": "number[]", "full": "number[]" }, "docs": "The playback rate options to be displayed." }, { "name": "normalLabel", "default": "'Normal'", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The text to display for normal speed (i.e., playback rate of 1)." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "SpeedRadioGroupChangeEvent", "full": "SpeedRadioGroupChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "speed" } ] } ], "members": { "props": [ { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "readonly": true }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "readonly": true } ], "methods": [ { "name": "getOptions", "parameters": [], "signature": { "type": "() => RadioOption[]" }, "return": { "type": "RadioOption[]" } } ], "length": 3 }, "generics": { "props": "SpeedRadioGroupProps", "events": "SpeedRadioGroupEvents" } }, { "type": "component", "name": "RadioGroup", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio/radio-group.ts" }, "docs": "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).", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/radio-group" } ], "props": [ { "name": "value", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The value of the radio that is checked in this group." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "RadioGroupChangeEvent", "full": "RadioGroupChangeEvent" }, "detail": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "Fired when the checked radio changes.", "doctags": [ { "name": "detail", "text": "value" } ] } ], "members": { "props": [ { "name": "values", "type": { "primitive": "object", "concise": "string[]", "full": "string[]" }, "docs": "A list of radio values that belong this group.", "readonly": true }, { "name": "value", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The radio value that is checked in this group." } ], "length": 2 }, "generics": { "props": "RadioGroupProps", "events": "RadioGroupEvents" } }, { "type": "component", "name": "Radio", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/menu/radio/radio.ts" }, "docs": "A radio represents a option that a user can select inside of a radio group. Only one radio\ncan be checked in a group.", "doctags": [ { "name": "attr", "text": "data-checked - Whether radio is checked." }, { "name": "attr", "text": "data-focus - Whether radio is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether radio is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/menu/radio" } ], "props": [ { "name": "value", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The radio value." } ], "events": [ { "name": "change", "type": { "primitive": "object", "concise": "RadioChangeEvent", "full": "RadioChangeEvent" }, "detail": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Fired when the radio's checked value changes.", "doctags": [ { "name": "detail", "text": "isSelected" } ] }, { "name": "select", "type": { "primitive": "object", "concise": "RadioSelectEvent", "full": "RadioSelectEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the radio is pressed via mouse, touch, or, keyboard. This will not fire if the radio\nis programmatically selected." } ], "members": { "props": [ { "name": "checked", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether this radio is currently checked.", "readonly": true } ], "length": 1 }, "generics": { "props": "RadioProps", "events": "RadioEvents" } }, { "type": "component", "name": "Poster", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/poster.ts" }, "docs": "Loads and displays the current media poster image. By default, the media provider's\nloading strategy is respected meaning the poster won't load until the media can.", "doctags": [ { "name": "attr", "text": "data-visible - Whether poster image should be shown." }, { "name": "attr", "text": "data-loading - Whether poster image is loading." }, { "name": "attr", "text": "data-error - Whether an error occurred loading poster." }, { "name": "attr", "text": "data-hidden - Whether poster has no src or has failed to load." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/media/poster" } ], "props": [ { "name": "src", "default": "null", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "docs": "The URL of the poster image resource." }, { "name": "alt", "default": "null", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "docs": "♿ **ARIA:** Provides alternative information for a poster image if a user for some reason\ncannot view it." }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin | null", "full": "true | MediaCrossOrigin | null" }, "docs": "Defines how the img handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] } ], "state": [ { "name": "img", "type": { "primitive": "object", "concise": "HTMLImageElement | null", "full": "HTMLImageElement | null" }, "default": "null" }, { "name": "src", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "default": "null" }, { "name": "alt", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "default": "null" }, { "name": "crossOrigin", "type": { "primitive": "string", "concise": "MediaCrossOrigin | null", "full": "MediaCrossOrigin | null" }, "default": "null" }, { "name": "loading", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "true" }, { "name": "error", "type": { "primitive": "object", "concise": "ErrorEvent | null", "full": "ErrorEvent | null" }, "default": "null" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "PosterState", "full": "PosterState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: PosterState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "PosterProps", "state": "PosterState" } }, { "type": "component", "name": "AudioGainSlider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/audio-gain-slider.ts" }, "docs": "Versatile and user-friendly audio boost control designed for seamless cross-browser and provider\ncompatibility and accessibility with ARIA support. It offers a smooth user experience for both\nmouse and touch interactions and is highly customizable in terms of styling. Users can\neffortlessly change the audio gain within the range 0 to 100.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "attr", "text": "data-supported - Whether audio gain is supported." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/audio-gain-slider" } ], "props": [ { "name": "min", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum audio gain boost represented as a percentage." }, { "name": "max", "default": "300", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum audio gain boost represented as a percentage." }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "default": "25", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "default": "25", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] }, { "name": "media-audio-gain-change-request", "type": { "primitive": "object", "concise": "MediaAudioGainChangeRequestEvent", "full": "MediaAudioGainChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current audio gain.", "doctags": [ { "name": "detail", "text": "gain" } ], "bubbles": true, "composed": true } ], "cssvars": [ { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "AudioGainSliderState", "full": "AudioGainSliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: AudioGainSliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "AudioGainSliderProps", "state": "AudioGainSliderState", "events": "AudioGainSliderEvents" } }, { "type": "component", "name": "QualitySlider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/quality-slider.ts" }, "docs": "Versatile and user-friendly input video quality control designed for seamless cross-browser and\nprovider compatibility and accessibility with ARIA support. It offers a smooth user experience\nfor both mouse and touch interactions and is highly customizable in terms of styling.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "attr", "text": "data-supported - Whether setting video quality is supported." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/quality-slider" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "default": "1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "default": "1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "default": "1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] }, { "name": "media-quality-change-request", "type": { "primitive": "object", "concise": "MediaQualityChangeRequestEvent", "full": "MediaQualityChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current video quality to the given index in the\n`VideoQualityList` on the player.", "doctags": [ { "name": "detail", "text": "qualityIndex" } ], "bubbles": true, "composed": true } ], "cssvars": [ { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "QualitySliderState", "full": "QualitySliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: QualitySliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "QualitySliderProps", "state": "QualitySliderState", "events": "QualitySliderEvents" } }, { "type": "component", "name": "SliderPreview", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/slider-preview.ts" }, "docs": "Used to provide users with a real-time or interactive preview of the value or selection they\nare making as they move the slider thumb. This can include displaying the current pointer\nvalue numerically, or displaying a thumbnail over the time slider.", "doctags": [ { "name": "attr", "text": "data-visible - Whether the preview is visible." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider#preview" } ], "props": [ { "name": "offset", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The distance in pixels between the preview and the slider. You can also set\nthe CSS variable `--media-slider-preview-offset` to adjust this offset." }, { "name": "noClamp", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "By default, the preview will be clamped to the left and right of the slider track. If this\nis set to `true`, the preview will flow outside of the container when at the edges." } ], "generics": { "props": "SliderPreviewProps" } }, { "type": "component", "name": "SliderThumbnail", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/slider-thumbnail.ts" }, "docs": "Used to display preview thumbnails when the user is hovering or dragging the time slider.\nThe time ranges in the WebVTT file will automatically be matched based on the current slider\npointer position.", "doctags": [ { "name": "attr", "text": "data-loading - Whether thumbnail image is loading." }, { "name": "attr", "text": "data-error - Whether an error occurred loading thumbnail." }, { "name": "attr", "text": "data-hidden - Whether thumbnail is not available or failed to load." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider-thumbnail" } ], "props": [ { "name": "src", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails" } ] }, { "name": "time", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Finds, loads, and displays the first active thumbnail cue that's start/end times are in range." }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin | null", "full": "true | MediaCrossOrigin | null" }, "docs": "Defines how the media handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] } ], "state": [ { "name": "src", "type": { "primitive": "string", "concise": "string", "full": "string" }, "default": "''" }, { "name": "img", "type": { "primitive": "object", "concise": "HTMLImageElement | null | undefined", "full": "HTMLImageElement | null | undefined" }, "default": "null" }, { "name": "crossOrigin", "type": { "primitive": "string", "concise": "MediaCrossOrigin | null", "full": "MediaCrossOrigin | null" }, "default": "null" }, { "name": "thumbnails", "type": { "primitive": "object", "concise": "ThumbnailImage[]", "full": "ThumbnailImage[]" }, "default": "[]" }, { "name": "activeThumbnail", "type": { "primitive": "object", "concise": "ThumbnailImage | null", "full": "ThumbnailImage | null" }, "default": "null" }, { "name": "loading", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" }, { "name": "error", "type": { "primitive": "object", "concise": "ErrorEvent | null", "full": "ErrorEvent | null" }, "default": "null" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "ThumbnailState", "full": "ThumbnailState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: ThumbnailState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "ThumbnailProps", "state": "ThumbnailState" } }, { "type": "component", "name": "SliderValue", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/slider-value.ts" }, "docs": "Displays the specific numeric representation of the current or pointer value of the slider.\nWhen a user interacts with a slider by moving its thumb along the track, the slider value\nchanges accordingly.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider-value" } ], "props": [ { "name": "type", "default": "'pointer'", "type": { "primitive": "string", "concise": "'pointer' | 'current'", "full": "'pointer' | 'current'" }, "docs": "Whether to use the slider's current value, or pointer value." }, { "name": "format", "default": "null", "type": { "primitive": "string", "concise": "'value' | 'percent' | 'time' | null", "full": "'value' | 'percent' | 'time' | null" }, "docs": "Determines how the value is formatted. By default it will use the most appropriate formatting,\nfor the time slider that's time, and for volume percent." }, { "name": "showHours", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time should always show the hours unit, even if the time is less than\n1 hour. Only available if the `format` prop is set to `time`.", "doctags": [ { "name": "example", "text": "`20:30 -> 0:20:35`" } ] }, { "name": "showMs", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time should display milliseconds. Only available if the `format` prop is set to\n`time`." }, { "name": "padHours", "default": "null", "type": { "primitive": "boolean", "concise": "boolean | null", "full": "boolean | null" }, "docs": "Whether the hours unit should be padded with zeroes to a length of 2. Only available if\nthe `format` prop is set to `time`.", "doctags": [ { "name": "example", "text": "`1:20:03 -> 01:20:03`" } ] }, { "name": "padMinutes", "default": "null", "type": { "primitive": "boolean", "concise": "boolean | null", "full": "boolean | null" }, "docs": "Whether the minutes unit should be padded with zeroes to a length of 2. Setting this to `null`\nwill pad minutes when hours is >=1. Only available if the `format` prop is set to `time`.", "doctags": [ { "name": "example", "text": "`5:22 -> 05:22`" } ] }, { "name": "decimalPlaces", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Round the value when formatted as a percentage to the given number of decimal places. Only\navailable if `format` prop is `percent`." } ], "members": { "methods": [ { "name": "getValueText", "docs": "Returns the current value formatted as text based on prop settings.", "parameters": [], "signature": { "type": "() => string" }, "return": { "type": "string" } } ], "length": 1 }, "generics": { "props": "SliderValueProps" } }, { "type": "component", "name": "SliderVideo", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/slider-video.ts" }, "docs": "Used to load a low-resolution video to be displayed when the user is hovering over or dragging\nthe time slider. The preview video will automatically be updated to be in-sync with the current\npreview position, so ensure it has the same length as the original media (i.e., same duration).", "doctags": [ { "name": "attr", "text": "data-loading - Whether the video is loading." }, { "name": "attr", "text": "data-error - Whether an error occurred loading video." }, { "name": "attr", "text": "data-hidden - Whether the video is not ready or has failed to load." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider-video" } ], "props": [ { "name": "src", "default": "null", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "docs": "The URL of a media resource to use.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" } ] }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin | null", "full": "true | MediaCrossOrigin | null" }, "docs": "Defines how the media handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] } ], "events": [ { "name": "can-play", "type": { "primitive": "object", "concise": "SliderVideoCanPlayEvent", "full": "SliderVideoCanPlayEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when the user agent can play the media, but estimates that **not enough** data has been\nloaded to play the media up to its end without having to stop for further buffering of content.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event" } ] }, { "name": "error", "type": { "primitive": "object", "concise": "SliderVideoErrorEvent", "full": "SliderVideoErrorEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when media loading or playback has encountered any issues (for example, a network\nconnectivity problem). The event detail contains a potential message containing more\ninformation about the error (empty string if nothing available), and a code that identifies\nthe general type of error that occurred.", "doctags": [ { "name": "see", "text": "https://html.spec.whatwg.org/multipage/media.html#error-codes" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event" } ] } ], "state": [ { "name": "video", "type": { "primitive": "object", "concise": "HTMLVideoElement | null", "full": "HTMLVideoElement | null" }, "default": "null" }, { "name": "src", "type": { "primitive": "string", "concise": "string | null", "full": "string | null" }, "default": "null" }, { "name": "crossOrigin", "type": { "primitive": "string", "concise": "MediaCrossOrigin | null", "full": "MediaCrossOrigin | null" }, "default": "null" }, { "name": "canPlay", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" }, { "name": "error", "type": { "primitive": "object", "concise": "ErrorEvent | null", "full": "ErrorEvent | null" }, "default": "null" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "video", "type": { "primitive": "object", "concise": "HTMLVideoElement | null", "full": "HTMLVideoElement | null" }, "readonly": true }, { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "SliderVideoState", "full": "SliderVideoState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: SliderVideoState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 3 }, "generics": { "props": "SliderVideoProps", "state": "SliderVideoState", "events": "SliderVideoEvents" } }, { "type": "component", "name": "Slider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/slider/slider.ts" }, "docs": "Versatile and user-friendly input control designed for seamless cross-browser compatibility and\naccessibility with ARIA support. It offers a smooth user experience for both mouse and touch\ninteractions and is highly customizable in terms of styling. Users can effortlessly input numeric\nvalues within a specified range, defined by a minimum and maximum value.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider" } ], "props": [ { "name": "min", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The lowest slider value in the range of permitted values." }, { "name": "max", "default": "100", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The greatest slider value in the range of permitted values." }, { "name": "value", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value." }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] } ], "cssvars": [ { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "SliderState", "full": "SliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: SliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "SliderProps", "state": "SliderState", "events": "SliderEvents" } }, { "type": "component", "name": "SpeedSlider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/speed-slider.ts" }, "docs": "Versatile and user-friendly input playback rate control designed for seamless cross-browser and\nprovider compatibility and accessibility with ARIA support. It offers a smooth user experience\nfor both mouse and touch interactions and is highly customizable in terms of styling.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "attr", "text": "data-supported - Whether setting playback rate is supported." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/speed-slider" } ], "props": [ { "name": "min", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum playback rate." }, { "name": "max", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum playback rate." }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "default": "0.25", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "default": "0.25", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] }, { "name": "media-rate-change-request", "type": { "primitive": "object", "concise": "MediaRateChangeRequestEvent", "full": "MediaRateChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting to change the current playback rate.", "doctags": [ { "name": "detail", "text": "rate" } ], "bubbles": true, "composed": true } ], "cssvars": [ { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "SpeedSliderState", "full": "SpeedSliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: SpeedSliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "SpeedSliderProps", "state": "SpeedSliderState", "events": "SpeedSliderEvents" } }, { "type": "component", "name": "SliderChapters", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts" }, "docs": "Used to create predefined sections within a time slider interface based on the currently\nactive chapters text track.", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/slider-chapters" } ], "props": [ { "name": "disabled", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether chapters should be disabled." } ], "events": [ { "name": "chapter-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "detail": { "concise": "unknown", "primitive": "unknown", "full": "unknown" }, "docs": "The percentage of the chapter that is filled." }, { "name": "chapter-progress", "type": { "primitive": "string", "concise": "string", "full": "string" }, "detail": { "concise": "unknown", "primitive": "unknown", "full": "unknown" }, "docs": "The percentage of the chapter that has been buffered." } ], "members": { "props": [ { "name": "cues", "type": { "primitive": "object", "concise": "VTTCue[]", "full": "VTTCue[]" }, "readonly": true }, { "name": "activeCue", "type": { "primitive": "object", "concise": "VTTCue | null", "full": "VTTCue | null" }, "readonly": true }, { "name": "activePointerCue", "type": { "primitive": "object", "concise": "VTTCue | null", "full": "VTTCue | null" }, "readonly": true } ], "methods": [ { "name": "setRefs", "parameters": [ { "name": "refs", "type": { "primitive": "object", "concise": "HTMLElement[]", "full": "HTMLElement[]" } } ], "signature": { "type": "(refs: HTMLElement[]) => void" }, "return": { "type": "void" } } ], "length": 4 }, "generics": { "props": "SliderChaptersProps", "events": "SliderChaptersCSSVars" } }, { "type": "component", "name": "TimeSlider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/time-slider/time-slider.ts" }, "docs": "Versatile and user-friendly input time control designed for seamless cross-browser and provider\ncompatibility and accessibility with ARIA support. It offers a smooth user experience for both\nmouse and touch interactions and is highly customizable in terms of styling. Users can\neffortlessly change the current playback time within the range 0 to seekable end.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/time-slider" } ], "props": [ { "name": "pauseWhileDragging", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether it should request playback to pause while the user is dragging the\nthumb. If the media was playing before the dragging starts, the state will be restored by\ndispatching a user play request once the dragging ends." }, { "name": "seekingRequestThrottle", "default": "100", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The amount of milliseconds to throttle media seeking request events being dispatched." }, { "name": "noSwipeGesture", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether touch swiping left or right on the player canvas should activate the time slider. This\ngesture makes it easier for touch users to drag anywhere on the player left or right to\nseek backwards or forwards, without directly interacting with time slider." }, { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "default": "0.1", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "default": "5", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] }, { "name": "media-live-edge-request", "type": { "primitive": "object", "concise": "MediaLiveEdgeRequestEvent", "full": "MediaLiveEdgeRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media to seek to the live edge (i.e., set the current time to the current\nlive time)." }, { "name": "media-play-request", "type": { "primitive": "object", "concise": "MediaPlayRequestEvent", "full": "MediaPlayRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to begin/resume.", "bubbles": true, "composed": true }, { "name": "media-pause-request", "type": { "primitive": "object", "concise": "MediaPauseRequestEvent", "full": "MediaPauseRequestEvent" }, "detail": { "primitive": "unknown", "concise": "void", "full": "void" }, "docs": "Fired when requesting media playback to temporarily stop.", "bubbles": true, "composed": true }, { "name": "media-seek-request", "type": { "primitive": "object", "concise": "MediaSeekRequestEvent", "full": "MediaSeekRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting a time change. In other words, moving the play head to a new position.", "doctags": [ { "name": "detail", "text": "seekTo" } ], "bubbles": true, "composed": true }, { "name": "media-seeking-request", "type": { "primitive": "object", "concise": "MediaSeekingRequestEvent", "full": "MediaSeekingRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when seeking/scrubbing to a new playback position.", "doctags": [ { "name": "detail", "text": "time" } ], "bubbles": true, "composed": true } ], "cssvars": [ { "name": "slider-progress", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The percentage of media playback that has been buffered.", "readonly": true }, { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "TimeSliderState", "full": "TimeSliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: TimeSliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "TimeSliderProps", "state": "TimeSliderState", "events": "TimeSliderEvents" } }, { "type": "component", "name": "VolumeSlider", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/sliders/volume-slider.ts" }, "docs": "Versatile and user-friendly input volume control designed for seamless cross-browser and provider\ncompatibility and accessibility with ARIA support. It offers a smooth user experience for both\nmouse and touch interactions and is highly customizable in terms of styling. Users can\neffortlessly change the volume level within the range 0 (muted) to 100.", "doctags": [ { "name": "attr", "text": "data-dragging - Whether slider thumb is being dragged." }, { "name": "attr", "text": "data-pointing - Whether user's pointing device is over slider." }, { "name": "attr", "text": "data-active - Whether slider is being interacted with." }, { "name": "attr", "text": "data-focus - Whether slider is being keyboard focused." }, { "name": "attr", "text": "data-hocus - Whether slider is being keyboard focused or hovered over." }, { "name": "attr", "text": "data-supported - Whether volume control is supported." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/sliders/volume-slider" } ], "props": [ { "name": "disabled", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider should be disabled (non-interactive)." }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the slider is not visible and stops all events and expensive updates to\nbe more power efficient." }, { "name": "orientation", "type": { "primitive": "string", "concise": "SliderOrientation", "full": "'horizontal' | 'vertical'" }, "docs": "The orientation of the slider." }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "A number that specifies the granularity that the slider value must adhere to.\n\nA step is an abstract unit that may carry a different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "keyStep", "default": "5", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that specifies the number of steps taken when interacting with\nthe slider via keyboard.\n\nA step is an abstract unit that may carry different type of measure depending on the type of\nslider. For example, for the volume slider each step is 1% of volume, and for the time slider\nit is 1 second which is a varying percentage depending on the media duration." }, { "name": "shiftKeyMultiplier", "default": "2", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key\nis held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think\nof it as `keyStep * shiftKeyMultiplier`." } ], "events": [ { "name": "drag-start", "type": { "primitive": "object", "concise": "SliderDragStartEvent", "full": "SliderDragStartEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user begins interacting with the slider and dragging the thumb. The event\ndetail contains the current value the drag is starting at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-end", "type": { "primitive": "object", "concise": "SliderDragEndEvent", "full": "SliderDragEndEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the user stops dragging the slider thumb. The event detail contains the value\nthe drag is ending at.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "value-change", "type": { "primitive": "object", "concise": "SliderValueChangeEvent", "full": "SliderValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider value changes. The event detail contains the current value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "drag-value-change", "type": { "primitive": "object", "concise": "SliderDragValueChangeEvent", "full": "SliderDragValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the slider drag value changes. The drag value indicates the last slider value that\nthe user has dragged to. The event detail contains the value.", "doctags": [ { "name": "detail", "text": "value" } ] }, { "name": "pointer-value-change", "type": { "primitive": "object", "concise": "SliderPointerValueChangeEvent", "full": "SliderPointerValueChangeEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when the device pointer is inside the slider region and it's position changes. The\nevent detail contains the preview value. Do note, this includes touch, mouse, and keyboard\ndevices.", "doctags": [ { "name": "detail", "text": "pointerValue" } ] }, { "name": "media-volume-change-request", "type": { "primitive": "object", "concise": "MediaVolumeChangeRequestEvent", "full": "MediaVolumeChangeRequestEvent" }, "detail": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Fired when requesting the media volume to be set to a new level.", "doctags": [ { "name": "detail", "text": "volume" } ], "bubbles": true, "composed": true } ], "cssvars": [ { "name": "slider-fill", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The fill rate expressed as a percentage.", "readonly": true }, { "name": "slider-pointer", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "The pointer rate expressed as a percentage.", "readonly": true } ], "state": [ { "name": "value", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current slider value.", "default": "0" }, { "name": "pointerValue", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The value at which the device pointer is pointing to inside the slider.", "default": "0" }, { "name": "min", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The minimum slider value.", "default": "0" }, { "name": "max", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The maximum slider value.", "default": "100" }, { "name": "step", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The granularity that the slider value must adhere to.", "default": "1" }, { "name": "focused", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider has keyboard focus.", "default": "false" }, { "name": "dragging", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider thumb is currently being dragged.", "default": "false" }, { "name": "pointing", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether a device pointer is within the slider bounds.", "default": "false" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is not visible.", "default": "false" }, { "name": "active", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the slider is being interacted with via keyboard or pointer device.", "readonly": true }, { "name": "fillRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The current value to range ratio.", "doctags": [ { "name": "signal" }, { "name": "example", "text": "`min` = 0\n`max` = 10\n`value` = 5\n`range` = 10 (max - min)\n`fillRate` = 0.5 (result)" } ], "readonly": true }, { "name": "fillPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The fill rate expressed as a percentage (`fillRate * 100`).", "readonly": true }, { "name": "pointerRate", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer value to range ratio.", "readonly": true }, { "name": "pointerPercent", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The pointer rate expressed as a percentage (`pointerRate * 100`).", "readonly": true } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "VolumeSliderState", "full": "VolumeSliderState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: VolumeSliderState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "VolumeSliderProps", "state": "VolumeSliderState", "events": "VolumeSliderEvents" } }, { "type": "component", "name": "Thumbnail", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/thumbnails/thumbnail.ts" }, "docs": "Used to load and display a preview thumbnail at the given `time`.", "doctags": [ { "name": "attr", "text": "data-loading - Whether thumbnail image is loading." }, { "name": "attr", "text": "data-error - Whether an error occurred loading thumbnail." }, { "name": "attr", "text": "data-hidden - Whether thumbnail is not available or failed to load." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/display/thumbnail" } ], "props": [ { "name": "src", "default": "null", "type": { "primitive": "string", "concise": "ThumbnailSrc", "full": "string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null" }, "docs": "The thumbnails resource.", "doctags": [ { "name": "see", "text": "https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails" } ] }, { "name": "time", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "Finds, loads, and displays the first active thumbnail cue that's start/end times are in range." }, { "name": "crossOrigin", "default": "null", "type": { "primitive": "mixed", "concise": "true | MediaCrossOrigin | null", "full": "true | MediaCrossOrigin | null" }, "docs": "Defines how the media handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "doctags": [ { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] } ], "state": [ { "name": "src", "type": { "primitive": "string", "concise": "string", "full": "string" }, "default": "''" }, { "name": "img", "type": { "primitive": "object", "concise": "HTMLImageElement | null | undefined", "full": "HTMLImageElement | null | undefined" }, "default": "null" }, { "name": "crossOrigin", "type": { "primitive": "string", "concise": "MediaCrossOrigin | null", "full": "MediaCrossOrigin | null" }, "default": "null" }, { "name": "thumbnails", "type": { "primitive": "object", "concise": "ThumbnailImage[]", "full": "ThumbnailImage[]" }, "default": "[]" }, { "name": "activeThumbnail", "type": { "primitive": "object", "concise": "ThumbnailImage | null", "full": "ThumbnailImage | null" }, "default": "null" }, { "name": "loading", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" }, { "name": "error", "type": { "primitive": "object", "concise": "ErrorEvent | null", "full": "ErrorEvent | null" }, "default": "null" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "ThumbnailState", "full": "ThumbnailState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: ThumbnailState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "ThumbnailProps", "state": "ThumbnailState" } }, { "type": "component", "name": "Time", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/time.ts" }, "docs": "Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time\nformatted text.", "doctags": [ { "name": "attr", "text": "data-type - The type prop setting (current, duration, etc.)." }, { "name": "attr", "text": "data-remainder - Whether time remaining is being shown." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/display/time" } ], "props": [ { "name": "type", "default": "'current'", "type": { "primitive": "string", "concise": "'buffered' | 'duration' | 'current'", "full": "'buffered' | 'duration' | 'current'" }, "docs": "The type of media time to track." }, { "name": "showHours", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether the time should always show the hours unit, even if the time is less than\n1 hour.", "doctags": [ { "name": "example", "text": "`20:30 -> 0:20:35`" } ] }, { "name": "padHours", "default": "null", "type": { "primitive": "boolean", "concise": "boolean | null", "full": "boolean | null" }, "docs": "Whether the hours unit should be padded with zeroes to a length of 2.", "doctags": [ { "name": "example", "text": "`1:20:03 -> 01:20:03`" } ] }, { "name": "padMinutes", "default": "null", "type": { "primitive": "boolean", "concise": "boolean | null", "full": "boolean | null" }, "docs": "Whether the minutes unit should be padded with zeroes to a length of 2.", "doctags": [ { "name": "example", "text": "`5:22 -> 05:22`" } ] }, { "name": "remainder", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether to display the remaining time from the current type, until the duration is reached.", "doctags": [ { "name": "example", "text": "`duration` - `currentTime`" } ] }, { "name": "toggle", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Whether on press the time should invert showing the remaining time (i.e., toggle the\n`remainder` prop)." }, { "name": "hidden", "default": "false", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "docs": "Provides a hint that the time is not visible and stops all events and updates to be more\npower efficient." } ], "state": [ { "name": "timeText", "type": { "primitive": "string", "concise": "string", "full": "string" }, "default": "''" }, { "name": "hidden", "type": { "primitive": "boolean", "concise": "boolean", "full": "boolean" }, "default": "false" } ], "members": { "props": [ { "name": "state", "docs": "This object contains the current state of the component.", "type": { "primitive": "object", "concise": "TimeState", "full": "TimeState" }, "readonly": true } ], "methods": [ { "name": "subscribe", "docs": "Subscribe to live updates of component state.", "parameters": [ { "name": "callback", "type": { "primitive": "function", "concise": "Effect", "full": "(state: TimeState) => Maybe" } } ], "signature": { "type": "(callback: Effect) => Unsubscribe" }, "return": { "type": "Unsubscribe" } } ], "length": 2 }, "generics": { "props": "TimeProps", "state": "TimeState" } }, { "type": "component", "name": "TooltipContent", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/tooltip/tooltip-content.ts" }, "docs": "This component contains the content that is visible when the tooltip trigger is interacted with.", "doctags": [ { "name": "attr", "text": "data-visible - Whether tooltip is visible." }, { "name": "attr", "text": "data-placement - The placement prop setting." }, { "name": "attr", "text": "data-hocus - Whether tooltip is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/tooltip" } ], "props": [ { "name": "placement", "default": "'top center'", "type": { "primitive": "string", "concise": "TooltipPlacement", "full": "'top start' | 'top center' | 'top end' | 'bottom start' | 'bottom center' | 'bottom end' | 'right start' | 'right center' | 'right end' | 'left start' | 'left center' | 'left end' | TooltipPlacementSide" }, "docs": "A space-separated list which specifies the side and alignment of the tooltip content relative\nto the trigger.", "doctags": [ { "name": "example", "text": "`top center`" }, { "name": "example", "text": "`bottom end`" } ] }, { "name": "offset", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The distance in pixels between the content and the tooltip trigger. You can also set\nthe CSS variable `--media-tooltip-y-offset` to adjust this offset." }, { "name": "alignOffset", "default": "0", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The offset in pixels from the start/center/end aligned position. You can also set\nthe CSS variable `--media-tooltip-x-offset` to adjust this offset." } ], "generics": { "props": "TooltipContentProps" } }, { "type": "component", "name": "TooltipTrigger", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/tooltip/tooltip-trigger.ts" }, "docs": "Wraps the element that will trigger showing/hiding the tooltip on hover or keyboard focus. The\ntooltip content is positioned relative to this element.", "doctags": [ { "name": "attr", "text": "data-visible - Whether tooltip is visible." }, { "name": "attr", "text": "data-hocus - Whether tooltip is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/tooltip" } ] }, { "type": "component", "name": "Tooltip", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/components/ui/tooltip/tooltip.ts" }, "docs": "A contextual text bubble that displays a description for an element that appears on pointer\nhover or keyboard focus.", "doctags": [ { "name": "attr", "text": "data-visible - Whether tooltip is visible." }, { "name": "attr", "text": "data-hocus - Whether tooltip is being keyboard focused or hovered over." }, { "name": "docs", "text": "https://www.vidstack.io/docs/player/components/tooltip" }, { "name": "see", "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role" } ], "props": [ { "name": "showDelay", "default": "700", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The amount of time in milliseconds to wait before showing a tooltip." } ], "generics": { "props": "TooltipProps" } }, { "type": "component", "name": "ChapterTitle", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/chapter-title-element.ts" }, "props": [ { "name": "defaultText", "default": "''", "type": { "primitive": "string", "concise": "string", "full": "string" }, "docs": "Specify text to be displayed when no chapter title is available." } ], "generics": { "props": "ChapterTitleProps" } }, { "type": "component", "name": "MediaLayout", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/layouts/layout-element.ts" }, "props": [ { "name": "when", "default": "false", "type": { "primitive": "boolean", "concise": "boolean | MediaPlayerQuery", "full": "boolean | MediaPlayerQuery" } } ], "generics": { "props": "MediaLayoutProps" } }, { "type": "component", "name": "SliderSteps", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-steps-element.ts" } }, { "type": "component", "name": "Spinner", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/spinner-element.ts" }, "props": [ { "name": "size", "default": "96", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The horizontal (width) and vertical (height) length of the spinner." }, { "name": "trackWidth", "default": "8", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The width of the spinner track and track fill." }, { "name": "fillPercent", "default": "50", "type": { "primitive": "number", "concise": "number", "full": "number" }, "docs": "The percentage of the spinner track that should be filled." } ], "generics": { "props": "SpinnerProps" } }, { "type": "component", "name": "Title", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/title-element.ts" } } ], "elements": [ { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/announcer-element.ts" }, "name": "MediaAnnouncerElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/announcer" }, { "name": "example", "text": "```html\n\n```" } ], "tag": { "name": "media-announcer" }, "component": { "name": "MediaAnnouncer" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/airplay-button-element.ts" }, "name": "MediaAirPlayButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n\n```" } ], "tag": { "name": "media-airplay-button" }, "component": { "name": "AirPlayButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/caption-button-element.ts" }, "name": "MediaCaptionButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-caption-button" }, "component": { "name": "CaptionButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/fullscreen-button-element.ts" }, "name": "MediaFullscreenButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-fullscreen-button" }, "component": { "name": "FullscreenButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/google-cast-button-element.ts" }, "name": "MediaGoogleCastButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n\n```" } ], "tag": { "name": "media-google-cast-button" }, "component": { "name": "GoogleCastButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/live-button-element.ts" }, "name": "MediaLiveButtonElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/buttons/live-button" }, { "name": "example", "text": "```html\n\n \n\n```" } ], "tag": { "name": "media-live-button" }, "component": { "name": "LiveButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/mute-button-element.ts" }, "name": "MediaMuteButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-mute-button" }, "component": { "name": "MuteButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/pip-button-element.ts" }, "name": "MediaPIPButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-pip-button" }, "component": { "name": "PIPButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/play-button-element.ts" }, "name": "MediaPlayButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-play-button" }, "component": { "name": "PlayButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/seek-button-element.ts" }, "name": "MediaSeekButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n\n \n\n\n\n \n\n```" } ], "tag": { "name": "media-seek-button" }, "component": { "name": "SeekButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/buttons/toggle-button-element.ts" }, "name": "MediaToggleButtonElement", "doctags": [ { "name": "example", "text": "```html\n\n \n\n```" } ], "tag": { "name": "media-toggle-button" }, "component": { "name": "ToggleButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/captions-element.ts" }, "name": "MediaCaptionsElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/captions" }, { "name": "example", "text": "```html\n\n```" } ], "tag": { "name": "media-captions" }, "component": { "name": "Captions" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/chapter-title-element.ts" }, "name": "MediaChapterTitleElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/chapter-title" }, { "name": "example", "text": "```html\n\n```" } ], "tag": { "name": "media-chapter-title" }, "component": { "name": "ChapterTitle" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/controls-element.ts" }, "name": "MediaControlsElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/controls" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n\n```" } ], "tag": { "name": "media-controls" }, "component": { "name": "Controls" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/controls-group-element.ts" }, "name": "MediaControlsGroupElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/controls" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n\n```" } ], "tag": { "name": "media-controls-group" }, "component": { "name": "ControlsGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/gesture-element.ts" }, "name": "MediaGestureElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/gesture" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-gesture" }, "component": { "name": "Gesture" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/layouts/default/audio-layout-element.ts" }, "name": "MediaAudioLayoutElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/layouts/default-layout" }, { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-audio-layout" }, "component": { "name": "DefaultAudioLayout" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/layouts/default/video-layout-element.ts" }, "name": "MediaVideoLayoutElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/layouts/default-layout" }, { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-video-layout" }, "component": { "name": "DefaultVideoLayout" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/layouts/layout-element.ts" }, "name": "MediaLayoutElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/layouts#custom" }, { "name": "example", "text": "```html\n\n \n\n\n\n```" } ], "tag": { "name": "media-layout" }, "component": { "name": "MediaLayout" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/layouts/plyr/plyr-layout-element.ts" }, "name": "MediaPlyrLayoutElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/layouts/plyr-layout" }, { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-plyr-layout" }, "component": { "name": "PlyrLayout" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/audio-gain-group-element.ts" }, "name": "MediaAudioGainRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the audio gain option label." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/audio-gain-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-audio-gain-radio-group" }, "component": { "name": "AudioGainRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/audio-radio-group-element.ts" }, "name": "MediaAudioRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the audio track option label." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/audio-radio-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-audio-radio-group" }, "component": { "name": "AudioRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/captions-radio-group-element.ts" }, "name": "MediaCaptionsRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the caption/subtitle option label." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/captions-radio-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-captions-radio-group" }, "component": { "name": "CaptionsRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/chapters-radio-group-element.ts" }, "name": "MediaChaptersRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the chapter option title." }, { "name": "part", "text": "start-time - Contains the chapter option start time." }, { "name": "part", "text": "duration - Contains the chapter option duration." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/chapters-radio-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-chapters-radio-group" }, "component": { "name": "ChaptersRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/menu-button-element.ts" }, "name": "MediaMenuButtonElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/menu" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-menu-button" }, "component": { "name": "MenuButton" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/menu-element.ts" }, "name": "MediaMenuElement", "doctags": [ { "name": "part", "text": "close-target - Closes menu when pressed." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/menu" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-menu" }, "component": { "name": "Menu" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/menu-item-element.ts" }, "name": "MediaMenuItemElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/menu" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-menu-item" }, "component": { "name": "MenuItem" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/menu-items-element.ts" }, "name": "MediaMenuItemsElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/menu" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-menu-items" }, "component": { "name": "MenuItems" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/menu-portal-element.ts" }, "name": "MediaMenuPortalElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/menu#portal" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-menu-portal" }, "component": { "name": "MenuPortal" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/quality-radio-group-element.ts" }, "name": "MediaQualityRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the quality option label." }, { "name": "part", "text": "bitrate - Contains the quality option bitrate." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/quality-radio-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-quality-radio-group" }, "component": { "name": "QualityRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/radio-element.ts" }, "name": "MediaRadioElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/radio" }, { "name": "example", "text": "```html\n\n 1080p\n 720p\n \n\n```" } ], "tag": { "name": "media-radio" }, "component": { "name": "Radio" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/radio-group-element.ts" }, "name": "MediaRadioGroupElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/radio-group" }, { "name": "example", "text": "```html\n\n 1080p\n 720p\n \n\n```" } ], "tag": { "name": "media-radio-group" }, "component": { "name": "RadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/menus/speed-radio-group-element.ts" }, "name": "MediaSpeedRadioGroupElement", "doctags": [ { "name": "part", "text": "label - Contains the speed option label." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/menu/speed-radio-group" }, { "name": "example", "text": "```html\n\n \n \n \n \n \n \n\n```" } ], "tag": { "name": "media-speed-radio-group" }, "component": { "name": "SpeedRadioGroup" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/player-element.ts" }, "name": "MediaPlayerElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/core/player" }, { "name": "example", "text": "```html\n\n \n \n\n```" }, { "name": "deprecated", "text": "Vidstack is deprecated in favour of Video.js 10 (https://videojs.org) and receives\nsecurity fixes only until January 2028. Migration guide: https://videojs.org/docs/framework/html/guides/migrate-from-vidstack" } ], "tag": { "name": "media-player" }, "component": { "name": "MediaPlayer" }, "attrs": { "ariaLabel": { "attr": "aria-label" }, "autoPlay": { "attr": "autoplay" }, "crossOrigin": { "attr": "crossorigin" }, "playsInline": { "attr": "playsinline" }, "preferNativeHLS": { "attr": "prefer-native-hls" }, "minLiveDVRWindow": { "attr": "min-live-dvr-window" } } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/poster-element.ts" }, "name": "MediaPosterElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/poster" }, { "name": "example", "text": "```html\n\n \n\n```" } ], "tag": { "name": "media-poster" }, "component": { "name": "Poster" }, "attrs": { "crossOrigin": { "attr": "crossorigin" } } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/provider-element.ts" }, "name": "MediaProviderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/core/provider" }, { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-provider" }, "component": { "name": "MediaProvider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/audio-gain-slider-element.ts" }, "name": "MediaAudioGainSliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/audio-gain-slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-audio-gain-slider" }, "component": { "name": "AudioGainSlider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/quality-slider-element.ts" }, "name": "MediaQualitySliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/quality-slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-quality-slider" }, "component": { "name": "QualitySlider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-chapters-element.ts" }, "name": "MediaSliderChaptersElement", "doctags": [ { "name": "part", "text": "chapter-title - Contains the current chapter title." }, { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider-chapters" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-slider-chapters" }, "component": { "name": "SliderChapters" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-element.ts" }, "name": "MediaSliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" } ], "tag": { "name": "media-slider" }, "component": { "name": "Slider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-preview-element.ts" }, "name": "MediaSliderPreviewElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider#preview" } ], "tag": { "name": "media-slider-preview" }, "component": { "name": "SliderPreview" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-steps-element.ts" }, "name": "MediaSliderStepsElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider-steps" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-slider-steps" }, "component": { "name": "SliderSteps" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-thumbnail-element.ts" }, "name": "MediaSliderThumbnailElement", "doctags": [ { "name": "example", "text": "```html\n\n \n \n \n \n \n\n```" } ], "tag": { "name": "media-slider-thumbnail" }, "component": { "name": "Thumbnail" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-value-element.ts" }, "name": "MediaSliderValueElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider-value" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" }, { "name": "example", "text": "```html\n\n```" }, { "name": "example", "text": "```html\n\n```" }, { "name": "example", "text": "```html\n\n```" } ], "tag": { "name": "media-slider-value" }, "component": { "name": "SliderValue" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/slider-video-element.ts" }, "name": "MediaSliderVideoElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/slider-video" }, { "name": "example", "text": "```html\n\n \n \n \n\n```" } ], "tag": { "name": "media-slider-video" }, "component": { "name": "SliderVideo" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/speed-slider-element.ts" }, "name": "MediaSpeedSliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/speed-slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-speed-slider" }, "component": { "name": "SpeedSlider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/time-slider-element.ts" }, "name": "MediaTimeSliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/time-slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-time-slider" }, "component": { "name": "TimeSlider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/sliders/volume-slider-element.ts" }, "name": "MediaVolumeSliderElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/sliders/volume-slider" }, { "name": "example", "text": "```html\n\n
\n
\n
\n
\n\n```" }, { "name": "example", "text": "```html\n\n \n \n \n \n\n```" } ], "tag": { "name": "media-volume-slider" }, "component": { "name": "VolumeSlider" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/spinner-element.ts" }, "name": "MediaSpinnerElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/buffering-indicator" }, { "name": "example", "text": "```html\n\n\n```" }, { "name": "example", "text": "```css\nmedia-spinner [data-part=\"track\"] {\n color: rgb(255 255 255 / 0.5);\n}\n\nmedia-spinner [data-part=\"track-fill\"] {\n color: white;\n}\n```" } ], "tag": { "name": "media-spinner" }, "component": { "name": "Spinner" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/thumbnail-element.ts" }, "name": "MediaThumbnailElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/thumbnail" }, { "name": "example", "text": "```html\n\n \n \n\n```" } ], "tag": { "name": "media-thumbnail" }, "component": { "name": "Thumbnail" }, "attrs": { "crossOrigin": { "attr": "crossorigin" } } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/time-element.ts" }, "name": "MediaTimeElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/time" }, { "name": "example", "text": "```html\n\n```" }, { "name": "example", "text": "```html\n\n\n```" } ], "tag": { "name": "media-time" }, "component": { "name": "Time" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/title-element.ts" }, "name": "MediaTitleElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/display/title" }, { "name": "example", "text": "```html\n\n```" } ], "tag": { "name": "media-title" }, "component": { "name": "Title" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/tooltips/tooltip-content-element.ts" }, "name": "MediaTooltipContentElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/tooltip" }, { "name": "example", "text": "```html\n\n \n \n \n \n Play\n Pause\n \n\n```" } ], "tag": { "name": "media-tooltip-content" }, "component": { "name": "TooltipContent" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/tooltips/tooltip-element.ts" }, "name": "MediaTooltipElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/tooltip" }, { "name": "example", "text": "```html\n\n \n \n \n \n Play\n Pause\n \n\n```" } ], "tag": { "name": "media-tooltip" }, "component": { "name": "Tooltip" } }, { "type": "element", "file": { "path": "/Users/rahimalwer/Desktop/projects.nosync/vds-player/packages/vidstack/src/elements/define/tooltips/tooltip-trigger-element.ts" }, "name": "MediaTooltipTriggerElement", "doctags": [ { "name": "docs", "text": "https://www.vidstack.io/docs/wc/player/components/tooltip" }, { "name": "example", "text": "```html\n\n \n \n \n \n Play\n Pause\n \n\n```" } ], "tag": { "name": "media-tooltip-trigger" }, "component": { "name": "TooltipTrigger" } } ], "react": [] }