@aidenlx/player

{ "version": 1.1, "tags": [ { "name": "vds-media-controller", "description": "The media controller acts as a message bus between the media provider and all other\ncomponents, such as UI components and plugins. The main responsibilities are:\n\n- Provide the media context that is used to pass media state down to components (this\ncontext is injected into and managed by the media provider).\n\n- Listen for media request events and fulfill them by calling the appropriate props/methods on\nthe current media provider.\n\n💡 The base `MediaPlayer` acts as both a media controller and provider.", "attributes": [] }, { "name": "vds-media-sync", "description": "This element is responsible for synchronizing elements of the type `MediaProviderElement`.\n\nSynchronization includes:\n\n- Single media playback (eg: user plays a video while another is already playing, so we pause\nthe newly inactive player).\n\n- Shared media volume (eg: user sets desired volume to 50% on one player, and they expect it to\nbe consistent across all players).\n\n- Saving media volume to local storage (eg: user sets desired to volume 50%, they leave\nthe site, and when they come back they expect it to be 50% without any interaction).", "attributes": [ { "name": "single-playback", "description": "Whether only one is player should be playing at a time.", "references": [] }, { "name": "shared-volume", "description": "Whether media volume should be in-sync across all media players.", "references": [] }, { "name": "volume-storage-key", "description": "If a value is provided, volume will be saved to local storage to the given key as it's\nupdated. In addition, when a media provider connects to the manager, it's volume will be\nset to the saved volume level. If no value is provided, nothing is saved or retrieved.\n\nNote that this includes both the volume and muted state.", "references": [] } ] }, { "name": "vds-media-visibility", "description": "This element is responsible for managing a `MediaProviderElement` as viewport or page\nvisibility changes occur.\n\nManagement includes:\n\n- Playback or volume changes when page visibility changes (eg: user changes tab or device\nsleeps).\n\n- Playback or volume changes when viewport visibility changes (eg: user scrolls video in and\nout of view).", "attributes": [ { "name": "enter-viewport", "description": "The action to perform on the media provider when it enters the viewport.", "values": [ { "name": "play" }, { "name": "unmute" } ], "references": [] }, { "name": "exit-viewport", "description": "The action to perform on the media provider when it exits the viewport.", "values": [ { "name": "pause" }, { "name": "mute" } ], "references": [] }, { "name": "viewport-enter-delay", "description": "The amount of time in milliseconds to delay viewport enter actions.", "references": [] }, { "name": "enter-page", "description": "The action to perform on the media provider when the page becomes visible.", "values": [ { "name": "play" }, { "name": "unmute" } ], "references": [] }, { "name": "exit-page", "description": "The action to perform on the media provider when the page becomes hidden.", "values": [ { "name": "pause" }, { "name": "mute" } ], "references": [] }, { "name": "page-change-type", "description": "The type of page state to use when determining visibility.\n\n- **state:** Refers to the page lifecycle state. This is typically what you want.\n- **visibility:** Visible here means the page content may be at least partially visible. In\npractice, this means that the page is the foreground tab of a non-minimized window.\n\n💡 Need help making a decision?\n\n- Use `state` when you want completely visible / not visible.\n- Use `visibility` when you want partially visible / not visible.", "values": [ { "name": "state" }, { "name": "visibility" } ], "references": [] }, { "name": "page-enter-delay", "description": "The amount of time in milliseconds to delay page enter actions.", "references": [] }, { "name": "intersection-root", "description": "A DOM query selector for the element that is used as the viewport for checking visibility\nof the media player. Must be a ancestor of the media player. Defaults to the browser viewport\nif not specified.", "references": [] }, { "name": "intersection-threshold", "description": "A number which indicates at what percentage of the media player's visibility the observer's\n`onEnter` and `onExit` actions should be triggered.", "references": [] } ] }, { "name": "vds-media-ui", "description": "This is a general styling container which holds your UI elements. Media attributes and\nCSS properties are exposed on this element to help you style your UI elements.\n\nExample media attributes include: `media-paused`, `media-can-play`, and `media-waiting`.\n\nExample media CSS properties include: `--media-seekable-amount`, `--media-buffered-amount`,\nand `--media-duration`.\n\nThis element also handles hiding the UI depending on whether native UI can't be hidden\n(*cough* iOS). This is simply to avoid double controls (native + custom). The `hidden` attribute\nwill be applied to prevent it from happening.", "attributes": [] }, { "name": "vds-audio-player", "description": "Used to embed sound content into documents via the native `<audio>` element. It may contain\none or more audio sources, represented using the `src` attribute or the `<source>` element: the\nbrowser will choose the most suitable one.\n\n💡 This element contains the exact same interface as the `<audio>` element. It redispatches\nall the native events if needed, but prefer the `vds-*` variants (eg: `vds-play`) as they\niron out any browser issues.", "attributes": [ { "name": "controls-list", "description": "Determines what controls to show on the media element whenever the browser shows its own set\nof controls (e.g. when the controls attribute is specified).", "values": [ { "name": "nodownload" }, { "name": "nofullscreen" }, { "name": "noremoteplayback" }, { "name": "nodownload nofullscreen" }, { "name": "nodownload noremoteplayback" }, { "name": "nofullscreen noremoteplayback" }, { "name": "nodownload nofullscreen noremoteplayback" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList" } ] }, { "name": "cross-origin", "description": "Whether to use CORS to fetch the related image.", "values": [ { "name": "anonymous" }, { "name": "use-credentials" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin" } ] }, { "name": "default-muted", "description": "Reflects the muted attribute, which indicates whether the audio output should be muted by\ndefault. This property has no dynamic effect. To mute and unmute the audio output, use\nthe `muted` property.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted" } ] }, { "name": "default-playback-rate", "description": "A `double` indicating the default playback rate for the media.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate" } ] }, { "name": "disable-remote-playback", "description": "Whether to disable the capability of remote playback in devices that are\nattached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast,\nDLNA, AirPlay, etc).", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/disableRemotePlayback" } ] }, { "name": "preload", "description": "Provides a hint to the browser about what the author thinks will lead to the best user\nexperience with regards to what content is loaded before the video is played.", "values": [ { "name": "none" }, { "name": "metadata" }, { "name": "auto" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "width", "description": "The width of the media player.", "references": [] }, { "name": "height", "description": "The height of the media player.", "references": [] }, { "name": "src", "description": "The URL of a media resource to use.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" } ] }, { "name": "src-object", "description": "Sets or returns the object which serves as the source of the media associated with the\n`HTMLMediaElement`.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "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": "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": "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": "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": "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": "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": "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": "loading", "description": "Indicates when the provider can begin loading media. If `eager`, media will be loaded\nimmediately, and `lazy` will delay loading until the provider has entered the viewport.", "values": [ { "name": "eager" }, { "name": "lazy" } ], "references": [] }, { "name": "log-level", "description": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "values": [ { "name": "silent" }, { "name": "error" }, { "name": "warn" }, { "name": "info" }, { "name": "debug" } ], "references": [] }, { "name": "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 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.", "values": [ { "name": "landscape" }, { "name": "landscape-primary" }, { "name": "landscape-secondary" }, { "name": "natural" }, { "name": "portrait" }, { "name": "portrait-primary" }, { "name": "portrait-secondary" } ], "references": [] } ] }, { "name": "vds-hls-player", "description": "Embeds video content into documents via the native `<video>` element. It may contain\none or more video sources, represented using the `src` attribute or the `<source>` element: the\nbrowser will choose the most suitable one.\n\nIn addition, this element introduces support for HLS streaming via the popular `hls.js` library.\nHLS streaming is either [supported natively](https://caniuse.com/?search=hls) (generally\non iOS), or in environments that [support the Media Stream API](https://caniuse.com/?search=mediastream).\n\nYou can decide whether you'd like to bundle `hls.js` into your application (not recommended), or\nload it dynamically from your own server or a CDN. We recommended dynamically loading it to\nprevent blocking the main thread when rendering this element, and to ensure `hls.js` is cached\nseparately. Refer to `HlsElement` for more information.\n\n💡 This element contains the exact same interface as the `<video>` element. It redispatches\nall the native events if needed, but prefer the `vds-*` variants (eg: `vds-play`) as they\niron out any browser issues. It also dispatches all the `hls.js` events.", "attributes": [ { "name": "hls-config", "description": "The `hls.js` configuration object.", "references": [ { "name": "Link", "url": "https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning" } ] }, { "name": "hls-library", "description": "The `hls.js` constructor (supports dynamic imports) or a URL of where it can be found.", "references": [] }, { "name": "autopictureinpicture", "description": "🧑‍🔬 **EXPERIMENTAL:** Whether the browser should automatically toggle picture-in-picture mode as\nthe user switches back and forth between this document and another document or application.", "references": [] }, { "name": "disablepictureinpicture", "description": "🧑‍🔬 **EXPERIMENTAL:** Prevents the browser from suggesting a picture-in-picture context menu or\nto request picture-in-picture automatically in some cases.", "references": [ { "name": "W3C", "url": "https://w3c.github.io/picture-in-picture/#disable-pip" } ] }, { "name": "poster", "description": "A URL for an image to be shown while the video is downloading. If this attribute isn't\nspecified, nothing is displayed until the first frame is available, then the first frame is\nshown as the poster frame.", "references": [] }, { "name": "controls-list", "description": "Determines what controls to show on the media element whenever the browser shows its own set\nof controls (e.g. when the controls attribute is specified).", "values": [ { "name": "nodownload" }, { "name": "nofullscreen" }, { "name": "noremoteplayback" }, { "name": "nodownload nofullscreen" }, { "name": "nodownload noremoteplayback" }, { "name": "nofullscreen noremoteplayback" }, { "name": "nodownload nofullscreen noremoteplayback" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList" } ] }, { "name": "cross-origin", "description": "Whether to use CORS to fetch the related image.", "values": [ { "name": "anonymous" }, { "name": "use-credentials" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin" } ] }, { "name": "default-muted", "description": "Reflects the muted attribute, which indicates whether the audio output should be muted by\ndefault. This property has no dynamic effect. To mute and unmute the audio output, use\nthe `muted` property.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted" } ] }, { "name": "default-playback-rate", "description": "A `double` indicating the default playback rate for the media.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate" } ] }, { "name": "disable-remote-playback", "description": "Whether to disable the capability of remote playback in devices that are\nattached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast,\nDLNA, AirPlay, etc).", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/disableRemotePlayback" } ] }, { "name": "preload", "description": "Provides a hint to the browser about what the author thinks will lead to the best user\nexperience with regards to what content is loaded before the video is played.", "values": [ { "name": "none" }, { "name": "metadata" }, { "name": "auto" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "width", "description": "The width of the media player.", "references": [] }, { "name": "height", "description": "The height of the media player.", "references": [] }, { "name": "src", "description": "The URL of a media resource to use.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" } ] }, { "name": "src-object", "description": "Sets or returns the object which serves as the source of the media associated with the\n`HTMLMediaElement`.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "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": "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": "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": "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": "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": "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": "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": "loading", "description": "Indicates when the provider can begin loading media. If `eager`, media will be loaded\nimmediately, and `lazy` will delay loading until the provider has entered the viewport.", "values": [ { "name": "eager" }, { "name": "lazy" } ], "references": [] }, { "name": "log-level", "description": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "values": [ { "name": "silent" }, { "name": "error" }, { "name": "warn" }, { "name": "info" }, { "name": "debug" } ], "references": [] }, { "name": "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 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.", "values": [ { "name": "landscape" }, { "name": "landscape-primary" }, { "name": "landscape-secondary" }, { "name": "natural" }, { "name": "portrait" }, { "name": "portrait-primary" }, { "name": "portrait-secondary" } ], "references": [] } ] }, { "name": "vds-video-player", "description": "Embeds video content into documents via the native `<video>` element. It may contain\none or more video sources, represented using the `src` attribute or the `<source>` element: the\nbrowser will choose the most suitable one.\n\nThe list of [supported media formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats)\nvaries from one browser to the other. You should either provide your video in a single format\nthat all the relevant browsers support, or provide multiple video sources in enough different\nformats that all the browsers you need to support are covered.\n\n💡 This element contains the exact same interface as the `<video>` element. It redispatches\nall the native events if needed, but prefer the `vds-*` variants (eg: `vds-play`) as they\niron out any browser issues.", "attributes": [ { "name": "autopictureinpicture", "description": "🧑‍🔬 **EXPERIMENTAL:** Whether the browser should automatically toggle picture-in-picture mode as\nthe user switches back and forth between this document and another document or application.", "references": [] }, { "name": "disablepictureinpicture", "description": "🧑‍🔬 **EXPERIMENTAL:** Prevents the browser from suggesting a picture-in-picture context menu or\nto request picture-in-picture automatically in some cases.", "references": [ { "name": "W3C", "url": "https://w3c.github.io/picture-in-picture/#disable-pip" } ] }, { "name": "poster", "description": "A URL for an image to be shown while the video is downloading. If this attribute isn't\nspecified, nothing is displayed until the first frame is available, then the first frame is\nshown as the poster frame.", "references": [] }, { "name": "controls-list", "description": "Determines what controls to show on the media element whenever the browser shows its own set\nof controls (e.g. when the controls attribute is specified).", "values": [ { "name": "nodownload" }, { "name": "nofullscreen" }, { "name": "noremoteplayback" }, { "name": "nodownload nofullscreen" }, { "name": "nodownload noremoteplayback" }, { "name": "nofullscreen noremoteplayback" }, { "name": "nodownload nofullscreen noremoteplayback" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList" } ] }, { "name": "cross-origin", "description": "Whether to use CORS to fetch the related image.", "values": [ { "name": "anonymous" }, { "name": "use-credentials" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin" } ] }, { "name": "default-muted", "description": "Reflects the muted attribute, which indicates whether the audio output should be muted by\ndefault. This property has no dynamic effect. To mute and unmute the audio output, use\nthe `muted` property.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted" } ] }, { "name": "default-playback-rate", "description": "A `double` indicating the default playback rate for the media.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate" } ] }, { "name": "disable-remote-playback", "description": "Whether to disable the capability of remote playback in devices that are\nattached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast,\nDLNA, AirPlay, etc).", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/disableRemotePlayback" } ] }, { "name": "preload", "description": "Provides a hint to the browser about what the author thinks will lead to the best user\nexperience with regards to what content is loaded before the video is played.", "values": [ { "name": "none" }, { "name": "metadata" }, { "name": "auto" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "width", "description": "The width of the media player.", "references": [] }, { "name": "height", "description": "The height of the media player.", "references": [] }, { "name": "src", "description": "The URL of a media resource to use.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" } ] }, { "name": "src-object", "description": "Sets or returns the object which serves as the source of the media associated with the\n`HTMLMediaElement`.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "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": "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": "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": "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": "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": "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": "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": "loading", "description": "Indicates when the provider can begin loading media. If `eager`, media will be loaded\nimmediately, and `lazy` will delay loading until the provider has entered the viewport.", "values": [ { "name": "eager" }, { "name": "lazy" } ], "references": [] }, { "name": "log-level", "description": "The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,\nand `debug`.", "values": [ { "name": "silent" }, { "name": "error" }, { "name": "warn" }, { "name": "info" }, { "name": "debug" } ], "references": [] }, { "name": "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 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.", "values": [ { "name": "landscape" }, { "name": "landscape-primary" }, { "name": "landscape-secondary" }, { "name": "natural" }, { "name": "portrait" }, { "name": "portrait-primary" }, { "name": "portrait-secondary" } ], "references": [] } ] }, { "name": "vds-audio", "description": "Used to embed sound content into documents via the native `<audio>` element. It may contain\none or more audio sources, represented using the `src` attribute or the `<source>` element: the\nbrowser will choose the most suitable one.\n\n💡 This element contains the exact same interface as the `<audio>` element. It redispatches\nall the native events if needed, but prefer the `vds-*` variants (eg: `vds-play`) as they\niron out any browser issues.", "attributes": [ { "name": "controls-list", "description": "Determines what controls to show on the media element whenever the browser shows its own set\nof controls (e.g. when the controls attribute is specified).", "values": [ { "name": "nodownload" }, { "name": "nofullscreen" }, { "name": "noremoteplayback" }, { "name": "nodownload nofullscreen" }, { "name": "nodownload noremoteplayback" }, { "name": "nofullscreen noremoteplayback" }, { "name": "nodownload nofullscreen noremoteplayback" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList" } ] }, { "name": "cross-origin", "description": "Whether to use CORS to fetch the related image.", "values": [ { "name": "anonymous" }, { "name": "use-credentials" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin" } ] }, { "name": "default-muted", "description": "Reflects the muted attribute, which indicates whether the audio output should be muted by\ndefault. This property has no dynamic effect. To mute and unmute the audio output, use\nthe `muted` property.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted" } ] }, { "name": "default-playback-rate", "description": "A `double` indicating the default playback rate for the media.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate" } ] }, { "name": "disable-remote-playback", "description": "Whether to disable the capability of remote playback in devices that are\nattached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast,\nDLNA, AirPlay, etc).", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/disableRemotePlayback" } ] }, { "name": "preload", "description": "Provides a hint to the browser about what the author thinks will lead to the best user\nexperience with regards to what content is loaded before the video is played.", "values": [ { "name": "none" }, { "name": "metadata" }, { "name": "auto" } ], "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" } ] }, { "name": "width", "description": "The width of the media player.", "references": [] }, { "name": "height", "description": "The height of the media player.", "references": [] }, { "name": "src", "description": "The URL of a media resource to use.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src" } ] }, { "name": "src-object", "description": "Sets or returns the object which serves as the source of the media associated with the\n`HTMLMediaElement`.", "references": [ { "name": "MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject" } ] }, { "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": "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": "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:/