UNPKG

vidstack

Version:

Build awesome media experiences on the web.

1,435 lines 77.5 kB
{ "version": 1.1, "tags": [ { "name": "media-icon", "description": "The `<media-icon>` component dynamically loads and renders our custom Vidstack icons. See our\n[media icons catalog](https://www.vidstack.io/media-icons) to preview them all. Do note, the icon `type` can\nbe dynamically changed.", "attributes": [ { "name": "type", "description": "The type of icon. You can find a complete and searchable list on our website - see our\n[media icons catalog](https://vidstack.io/media-icons).", "values": [ { "name": "add-note", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=add-note" } ] }, { "name": "add-playlist", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=add-playlist" } ] }, { "name": "add-user", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=add-user" } ] }, { "name": "add", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=add" } ] }, { "name": "airplay", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=airplay" } ] }, { "name": "arrow-collapse-in", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-collapse-in" } ] }, { "name": "arrow-collapse", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-collapse" } ] }, { "name": "arrow-down", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-down" } ] }, { "name": "arrow-expand-out", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-expand-out" } ] }, { "name": "arrow-expand", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-expand" } ] }, { "name": "arrow-left", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-left" } ] }, { "name": "arrow-right", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-right" } ] }, { "name": "arrow-up", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=arrow-up" } ] }, { "name": "bookmark", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=bookmark" } ] }, { "name": "camera", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=camera" } ] }, { "name": "chapters", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chapters" } ] }, { "name": "chat-collapse", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chat-collapse" } ] }, { "name": "chat", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chat" } ] }, { "name": "chevron-down", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chevron-down" } ] }, { "name": "chevron-left", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chevron-left" } ] }, { "name": "chevron-right", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chevron-right" } ] }, { "name": "chevron-up", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chevron-up" } ] }, { "name": "chromecast", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=chromecast" } ] }, { "name": "clip", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=clip" } ] }, { "name": "closed-captions-on", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=closed-captions-on" } ] }, { "name": "closed-captions", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=closed-captions" } ] }, { "name": "comment", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=comment" } ] }, { "name": "computer", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=computer" } ] }, { "name": "device", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=device" } ] }, { "name": "download", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=download" } ] }, { "name": "episodes", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=episodes" } ] }, { "name": "eye", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=eye" } ] }, { "name": "fast-backward", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fast-backward" } ] }, { "name": "fast-forward", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fast-forward" } ] }, { "name": "flag", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=flag" } ] }, { "name": "fullscreen-arrow-exit", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fullscreen-arrow-exit" } ] }, { "name": "fullscreen-arrow", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fullscreen-arrow" } ] }, { "name": "fullscreen-exit", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fullscreen-exit" } ] }, { "name": "fullscreen", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=fullscreen" } ] }, { "name": "heart", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=heart" } ] }, { "name": "info", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=info" } ] }, { "name": "language", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=language" } ] }, { "name": "link", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=link" } ] }, { "name": "lock-closed", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=lock-closed" } ] }, { "name": "lock-open", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=lock-open" } ] }, { "name": "menu-horizontal", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=menu-horizontal" } ] }, { "name": "menu-vertical", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=menu-vertical" } ] }, { "name": "microphone", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=microphone" } ] }, { "name": "mobile", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=mobile" } ] }, { "name": "moon", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=moon" } ] }, { "name": "music-off", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=music-off" } ] }, { "name": "music", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=music" } ] }, { "name": "mute", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=mute" } ] }, { "name": "next", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=next" } ] }, { "name": "notification", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=notification" } ] }, { "name": "odometer", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=odometer" } ] }, { "name": "pause", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=pause" } ] }, { "name": "picture-in-picture-exit", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=picture-in-picture-exit" } ] }, { "name": "picture-in-picture", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=picture-in-picture" } ] }, { "name": "play", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=play" } ] }, { "name": "playback-speed-circle", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=playback-speed-circle" } ] }, { "name": "playlist", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=playlist" } ] }, { "name": "previous", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=previous" } ] }, { "name": "question-mark", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=question-mark" } ] }, { "name": "queue-list", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=queue-list" } ] }, { "name": "radio-button-selected", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=radio-button-selected" } ] }, { "name": "radio-button", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=radio-button" } ] }, { "name": "repeat-on", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=repeat-on" } ] }, { "name": "repeat-square-on", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=repeat-square-on" } ] }, { "name": "repeat-square", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=repeat-square" } ] }, { "name": "repeat", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=repeat" } ] }, { "name": "replay", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=replay" } ] }, { "name": "rotate", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=rotate" } ] }, { "name": "search", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=search" } ] }, { "name": "seek-backward-10", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-backward-10" } ] }, { "name": "seek-backward-15", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-backward-15" } ] }, { "name": "seek-backward-30", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-backward-30" } ] }, { "name": "seek-backward", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-backward" } ] }, { "name": "seek-forward-10", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-forward-10" } ] }, { "name": "seek-forward-15", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-forward-15" } ] }, { "name": "seek-forward-30", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-forward-30" } ] }, { "name": "seek-forward", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=seek-forward" } ] }, { "name": "send", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=send" } ] }, { "name": "settings-menu", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=settings-menu" } ] }, { "name": "settings-switch", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=settings-switch" } ] }, { "name": "settings", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=settings" } ] }, { "name": "share-arrow", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=share-arrow" } ] }, { "name": "share", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=share" } ] }, { "name": "shuffle-on", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=shuffle-on" } ] }, { "name": "shuffle", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=shuffle" } ] }, { "name": "stop", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=stop" } ] }, { "name": "subtitles", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=subtitles" } ] }, { "name": "sun", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=sun" } ] }, { "name": "theatre-mode-exit", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=theatre-mode-exit" } ] }, { "name": "theatre-mode", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=theatre-mode" } ] }, { "name": "thumbs-down", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=thumbs-down" } ] }, { "name": "thumbs-up", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=thumbs-up" } ] }, { "name": "timer", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=timer" } ] }, { "name": "transcript", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=transcript" } ] }, { "name": "tv", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=tv" } ] }, { "name": "user", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=user" } ] }, { "name": "volume-high", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=volume-high" } ] }, { "name": "volume-low", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=volume-low" } ] }, { "name": "x-mark", "references": [ { "name": "Preview Icon", "url": "https://vidstack.io/media-icons?lib=html&icon=x-mark" } ] } ], "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/display/icons" } ] }, { "name": "media-outlet", "description": "Used to render the current provider.", "attributes": [], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/media/outlet" } ] }, { "name": "media-player", "description": "All media elements exist inside the `<media-player>` component. This component's main\nresponsibilities are to manage media state updates, dispatch media events, handle media\nrequests, and expose media state through HTML attributes and CSS properties for styling\npurposes.", "attributes": [ { "name": "src", "description": "The URL and optionally type of the current media resource/s to be considered for playback.", "references": [ { "name": "Documentation", "url": "https://vidstack.io/docs/player/core-concepts/loading#loading-source" }, { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" }, { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "name": "log-level", "description": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "references": [] }, { "name": "load", "description": "Indicates when the provider can begin loading media.\n\n- `eager`: media will be loaded immediately.\n- `idle`: media will be loaded after the page has loaded and `requestIdleCallback` is fired.\n- `visible`: media will delay loading until the provider has entered the viewport.\n- `custom`: media will wait for the `startLoading()` method or `media-start-loading` event.", "references": [ { "name": "Documentation", "url": "https://vidstack.io/docs/player/core-concepts/loading#loading-strategies" } ] }, { "name": "user-idle-delay", "description": "The amount of delay in milliseconds while media playback is progressing without user\nactivity to indicate an idle state.", "references": [] }, { "name": "fullscreen-orientation", "description": "This method will indicate the orientation to lock the screen to when in fullscreen mode and\nthe Screen Orientation API is available. The default is `undefined` which indicates\nno screen orientation change.", "references": [] }, { "name": "prefer-native-hls", "description": "Whether native HLS support is preferred over using `hls.js`. We recommend setting this to\n`false` to ensure a consistent and configurable experience across browsers. In addition, our\nlive stream support and DVR detection is much better with `hls.js` so choose accordingly.\n\nThis should generally only be set to `true` if (1) you're working with HLS streams, and (2)\nyou want AirPlay to work via the native Safari controls (i.e., `controls` attribute is\npresent on the `<media-player>` element).", "references": [] }, { "name": "aspect-ratio", "description": "The aspect ratio of the player media given as 'width/height' (e.g., 16/9).", "references": [] }, { "name": "key-disabled", "description": "Whether keyboard support is disabled for the media player globally. This property won't disable\nstandard ARIA keyboard controls for individual components when focused.", "references": [] }, { "name": "key-target", "description": "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.", "references": [] }, { "name": "key-shortcuts", "description": "Extends global media player keyboard shortcuts. The shortcuts can be specified as a\nspace-separated list of combinations (e.g., `p Control+Space`), see the provided doc link\nfor more information.\n\nDo note, if `aria-keyshortcuts` is specified on a component then it will take precedence\nover the respective value set here.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts" } ] }, { "name": "small-breakpoint-x", "description": "The maximum player width in pixels for when the small breakpoint should be active.", "references": [] }, { "name": "large-breakpoint-x", "description": "The minimum player width in pixels for when the large breakpoint should begin being active.", "references": [] }, { "name": "small-breakpoint-y", "description": "The maximum player height in pixels for when the small breakpoint should be active.", "references": [] }, { "name": "large-breakpoint-y", "description": "The minimum player height in pixels for when the large breakpoint should begin being active.", "references": [] }, { "name": "autoplay", "description": "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 autoplay\nfunctionality, you should make it opt-in (requiring a user to specifically enable it).\n\nHowever, autoplay can be useful when creating media elements whose source will be set at a\nlater time, under user control.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay" } ] }, { "name": "controls", "description": "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.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls" } ] }, { "name": "crossorigin", "description": "Defines how the media element handles cross-origin requests, thereby enabling the\nconfiguration of the CORS requests for the element's fetched data.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" } ] }, { "name": "current-time", "description": "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).", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime" } ] }, { "name": "loop", "description": "Whether media should automatically start playing from the beginning (replay) every time\nit ends.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop" } ] }, { "name": "muted", "description": "Whether the audio is muted or not.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted" } ] }, { "name": "paused", "description": "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.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused" } ] }, { "name": "playsinline", "description": "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.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline" } ] }, { "name": "poster", "description": "The URL of the current poster. Defaults to `''` if no media/poster has been given or\nloaded.", "references": [] }, { "name": "preload", "description": "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`.", "values": [ { "name": "metadata" }, { "name": "none" }, { "name": "auto" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "playback-rate", "description": "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", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate" } ] }, { "name": "title", "description": "The title of the current media.", "references": [] }, { "name": "thumbnails", "description": "The absolute or relative URL to a [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)\nfile resource.", "references": [] }, { "name": "view-type", "description": "The type of player view that should be used (i.e., audio or video). By default this is set\nto `video`.", "references": [] }, { "name": "volume", "description": "An `int` between `0` (silent) and `1` (loudest) indicating the audio volume. Defaults to `1`.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume" } ] }, { "name": "stream-type", "description": "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`.", "references": [] }, { "name": "live-edge-tolerance", "description": "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.", "references": [] }, { "name": "min-live-dvrwindow", "description": "The minimum seekable length in seconds before seeking operations are permitted.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/media/player" } ] }, { "name": "media-community-skin", "attributes": [ { "name": "translations", "description": "Translation map from english to your desired language for words used throughout the skin.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/core-concepts/skins#community-skin" } ] }, { "name": "media-buffering-indicator", "description": "Display a loading indicator to users before the media is ready for playback or when\nwaiting for media to buffer.", "attributes": [], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/display/buffering-indicator" } ] }, { "name": "media-caption-button", "description": "A button for toggling the showing state of the captions.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state. This prop is only available on the base\n`<media-toggle-button>`.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/caption-button" } ] }, { "name": "media-fullscreen-button", "description": "A button for toggling the fullscreen mode of the player.", "attributes": [ { "name": "target", "description": "The target element on which to request fullscreen on. The target can be `media`\n(i.e., `<media-player>`) or `provider`. The `prefer-media` option will first see if the native\nfullscreen API is available, if not it'll try the media provider.", "references": [] }, { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state. This prop is only available on the base\n`<media-toggle-button>`.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/fullscreen-button" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/core-concepts/fullscreen" } ] }, { "name": "media-mute-button", "description": "A button for toggling the muted state of the player.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state. This prop is only available on the base\n`<media-toggle-button>`.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/mute-button" } ] }, { "name": "media-pip-button", "description": "A button for toggling the picture-in-picture (PIP) mode of the player.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state. This prop is only available on the base\n`<media-toggle-button>`.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/pip-button" }, { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/core-concepts/picture-in-picture" } ] }, { "name": "media-play-button", "description": "A button for toggling the playback state (play/pause) of the current media.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "default-pressed", "description": "Whether it should start in the on (pressed) state. This prop is only available on the base\n`<media-toggle-button>`.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/play-button" } ] }, { "name": "media-seek-button", "description": "A button for seeking the current media playback forwards or backwards by a specified amount.", "attributes": [ { "name": "disabled", "description": "Whether the button should be disabled (non-interactive).", "references": [] }, { "name": "default-appearance", "description": "Whether the default button appearance should stay visible when elements have been passed inside\nit.", "references": [] }, { "name": "seconds", "description": "The amount to seek the media playback forwards (positive number) or backwards (negative number)\nwhen the seek button is pressed.", "references": [] } ], "references": [ { "name": "Documentation", "url": "https://www.vidstack.io/docs/player/components/buttons/seek-button" } ] }, { "name": "media-toggle-button", "description": "A toggle button is a two-state button that