media-chrome
Version:
Custom elements (web components) for making audio and video player controls that look great in your website or app.
542 lines • 141 kB
JSON
{
"version": 1.1,
"tags": [
{
"name": "media-airplay-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **mediaairplayrequest** - undefined\n\n### **Slots:**\n - **enter** - An element shown when the media is not in AirPlay mode and pressing the button will open the AirPlay menu.\n- **exit** - An element shown when the media is in AirPlay mode and pressing the button will open the AirPlay menu.\n- **icon** - The element shown for the AirPlay button’s display.\n\n### **CSS Properties:**\n - **--media-airplay-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediaairplayunavailable",
"description": "(read-only) Set if AirPlay is unavailable.",
"values": [{ "name": "(unavailable" }, { "name": "unsupported)" }]
},
{
"name": "mediaisairplaying",
"description": "(read-only) Present if the media is airplaying.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-captions-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **undefined** - undefined\n\n### **Slots:**\n - **on** - An element that will be shown while closed captions or subtitles are on.\n- **off** - An element that will be shown while closed captions or subtitles are off.\n- **icon** - An element for representing on and off states in a single icon\n\n### **CSS Properties:**\n - **--media-captions-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediasubtitleslist",
"description": "(read-only) A list of all subtitles and captions.",
"values": []
},
{
"name": "mediasubtitlesshowing",
"description": "(read-only) A list of the showing subtitles and captions.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-cast-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **Slots:**\n - **enter** - An element shown when the media is not in casting mode and pressing the button will open the Cast menu.\n- **exit** - An element shown when the media is in casting mode and pressing the button will open the Cast menu.\n- **icon** - An element for representing enter and exit states in a single icon\n\n### **CSS Properties:**\n - **--media-cast-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediacastunavailable",
"description": "(read-only) Set if casting is unavailable.",
"values": [{ "name": "(unavailable" }, { "name": "unsupported)" }]
},
{
"name": "mediaiscasting",
"description": "(read-only) Present if the media is casting.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-chrome-button",
"description": "\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-chrome-dialog",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **open** - Dispatched when the dialog is opened.\n- **close** - Dispatched when the dialog is closed.\n- **focus** - Dispatched when the dialog is focused.\n- **focusin** - Dispatched when the dialog is focused in.\n\n### **Slots:**\n - _default_ - Default slotted elements.\n\n### **CSS Properties:**\n - **--media-primary-color** - Default color of text / icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of background. _(default: undefined)_\n- **--media-text-color** - `color` of text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-dialog-display** - `display` of dialog. _(default: inline-flex)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: normal)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of text. _(default: var(--media-control-height, 24px))_",
"attributes": [
{
"name": "open",
"description": "The open state of the dialog.",
"values": []
}
],
"references": []
},
{
"name": "media-chrome-range",
"description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **thumb** - The thumb element to use for the range.\n\n### **CSS Properties:**\n - **--media-primary-color** - Default color of range bar. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of range background. _(default: rgb(20 20 30 / .7))_\n- **--media-control-display** - `display` property of control. _(default: inline-block)_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgb(50 50 70 / .7))_\n- **--media-control-height** - `height` of control. _(default: 24px)_\n- **--media-range-padding** - `padding` of range. _(default: var(--media-control-padding, 10px))_\n- **--media-range-padding-left** - `padding-left` of range. _(default: var(--_media-range-padding))_\n- **--media-range-padding-right** - `padding-right` of range. _(default: var(--_media-range-padding))_\n- **--media-range-thumb-width** - `width` of range thumb. _(default: 10px)_\n- **--media-range-thumb-height** - `height` of range thumb. _(default: 10px)_\n- **--media-range-thumb-border** - `border` of range thumb. _(default: none)_\n- **--media-range-thumb-border-radius** - `border-radius` of range thumb. _(default: 10px)_\n- **--media-range-thumb-background** - `background` of range thumb. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-range-thumb-box-shadow** - `box-shadow` of range thumb. _(default: 1px 1px 1px transparent)_\n- **--media-range-thumb-transition** - `transition` of range thumb. _(default: undefined)_\n- **--media-range-thumb-transform** - `transform` of range thumb. _(default: none)_\n- **--media-range-thumb-opacity** - `opacity` of range thumb. _(default: 1)_\n- **--media-range-bar-color** - `background` of range progress. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-range-track-background** - `background` of range track background. _(default: rgb(255 255 255 / .2))_\n- **--media-range-track-backdrop-filter** - `backdrop-filter` of range track. _(default: undefined)_\n- **--media-range-track-width** - `width` of range track. _(default: 100%)_\n- **--media-range-track-height** - `height` of range track. _(default: 4px)_\n- **--media-range-track-border** - `border` of range track. _(default: none)_\n- **--media-range-track-outline** - `outline` of range track. _(default: undefined)_\n- **--media-range-track-outline-offset** - `outline-offset` of range track. _(default: undefined)_\n- **--media-range-track-border-radius** - `border-radius` of range track. _(default: 1px)_\n- **--media-range-track-box-shadow** - `box-shadow` of range track. _(default: none)_\n- **--media-range-track-transition** - `transition` of range track. _(default: undefined)_\n- **--media-range-track-translate-x** - `translate` x-coordinate of range track. _(default: 0px)_\n- **--media-range-track-translate-y** - `translate` y-coordinate of range track. _(default: 0px)_\n- **--media-time-range-hover-display** - `display` of range hover zone. _(default: block)_\n- **--media-time-range-hover-bottom** - `bottom` of range hover zone. _(default: -5px)_\n- **--media-time-range-hover-height** - `height` of range hover zone. _(default: max(100% + 5px, 20px))_\n- **--media-range-track-pointer-background** - `background` of range track pointer. _(default: undefined)_\n- **--media-range-track-pointer-border-right** - `border-right` of range track pointer. _(default: undefined)_\n\n### **CSS Parts:**\n - **track** - The runnable track of the range.\n- **progress** - The progress part of the track.\n- **thumb** - The thumb of the range.",
"attributes": [
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{ "name": "aria-disabled", "values": [] },
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
}
],
"references": []
},
{
"name": "media-container",
"description": "\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--media-background-color** - `background-color` of container. _(default: #000)_\n- **--media-slot-display** - `display` of the media slot (default none for [audio] usage). _(default: none)_\n- **--media-control-transition-out** - `transition` used to define the animation effect when hiding the container. _(default: opacity 1s)_\n- **--media-control-transition-in** - `transition` used to define the animation effect when showing the container. _(default: opacity 0.25s)_",
"attributes": [
{ "name": "audio", "values": [] },
{ "name": "autohide", "values": [] },
{ "name": "autohideovercontrols", "values": [] },
{ "name": "breakpoints", "values": [] },
{ "name": "gesturesdisabled", "values": [] },
{ "name": "keyboardcontrol", "values": [] },
{ "name": "noautohide", "values": [] },
{ "name": "userinactive", "values": [] }
],
"references": []
},
{
"name": "media-control-bar",
"description": "\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: undefined)_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-bar-display** - `display` property of control bar. _(default: inline-flex)_\n- **--media-control-display** - `display` property of control. _(default: var(--media-control-bar-display, inline-flex))_",
"attributes": [
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
}
],
"references": []
},
{
"name": "media-controller",
"description": "Media Controller should not mimic the HTMLMediaElement API.\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n- **undefined** - undefined\n\n### **CSS Properties:**\n - **--media-background-color** - `background-color` of container. _(default: #000)_\n- **--media-slot-display** - `display` of the media slot (default none for [audio] usage). _(default: none)_\n- **--media-control-transition-out** - `transition` used to define the animation effect when hiding the container. _(default: opacity 1s)_\n- **--media-control-transition-in** - `transition` used to define the animation effect when showing the container. _(default: opacity 0.25s)_",
"attributes": [
{ "name": "defaultsubtitles", "values": [] },
{ "name": "defaultstreamtype", "values": [] },
{ "name": "defaultduration", "values": [] },
{ "name": "fullscreenelement", "values": [] },
{ "name": "nohotkeys", "values": [] },
{ "name": "hotkeys", "values": [] },
{ "name": "keysused", "values": [] },
{ "name": "liveedgeoffset", "values": [] },
{ "name": "seektoliveoffset", "values": [] },
{ "name": "noautoseektolive", "values": [] },
{ "name": "novolumepref", "values": [] },
{ "name": "nosubtitleslangpref", "values": [] },
{ "name": "nodefaultstore", "values": [] },
{ "name": "lang", "values": [] },
{ "name": "audio", "values": [] },
{ "name": "autohide", "values": [] },
{ "name": "autohideovercontrols", "values": [] },
{ "name": "breakpoints", "values": [] },
{ "name": "gesturesdisabled", "values": [] },
{ "name": "keyboardcontrol", "values": [] },
{ "name": "noautohide", "values": [] },
{ "name": "userinactive", "values": [] }
],
"references": []
},
{
"name": "media-duration-display",
"description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - Default slotted elements.\n\n### **CSS Properties:**\n - **--media-duration-display-display** - `display` property of display. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: normal)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of text. _(default: var(--media-control-height, 24px))_",
"attributes": [
{
"name": "mediaduration",
"description": "(read-only) Set to the media duration.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
}
],
"references": []
},
{
"name": "media-error-dialog",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **open** - Dispatched when the dialog is opened.\n- **close** - Dispatched when the dialog is closed.\n- **focus** - Dispatched when the dialog is focused.\n- **focusin** - Dispatched when the dialog is focused in.\n\n### **Slots:**\n - _default_ - Default slotted elements.\n\n### **CSS Properties:**\n - **--media-control-background** - `background` of control. _(default: undefined)_\n- **--media-primary-color** - Default color of text / icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of background. _(default: undefined)_\n- **--media-text-color** - `color` of text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-dialog-display** - `display` of dialog. _(default: inline-flex)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: normal)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of text. _(default: var(--media-control-height, 24px))_",
"attributes": [
{
"name": "mediaerrorcode",
"description": "(read-only) The error code for the current media error.",
"values": []
},
{
"name": "mediaerrormessage",
"description": "(read-only) The error message for the current media error.",
"values": []
},
{
"name": "open",
"description": "The open state of the dialog.",
"values": []
}
],
"references": []
},
{
"name": "media-fullscreen-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **Slots:**\n - **enter** - An element shown when the media is not in fullscreen and pressing the button will trigger entering fullscreen.\n- **exit** - An element shown when the media is in fullscreen and pressing the button will trigger exiting fullscreen.\n- **icon** - An element for representing enter and exit states in a single icon\n\n### **CSS Properties:**\n - **--media-fullscreen-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediafullscreenunavailable",
"description": "(read-only) Set if fullscreen is unavailable.",
"values": [{ "name": "(unavailable" }, { "name": "unsupported)" }]
},
{
"name": "mediaisfullscreen",
"description": "(read-only) Present if the media is fullscreen.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-gesture-receiver",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **CSS Properties:**\n - **--media-gesture-receiver-display** - `display` property of gesture receiver. _(default: inline-block)_\n- **--media-control-display** - `display` property of control. _(default: var(--media-gesture-receiver-display, inline-block))_",
"attributes": [
{
"name": "mediapaused",
"description": "(read-only) Present if the media is paused.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
}
],
"references": []
},
{
"name": "media-live-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **MEDIA_SEEK_TO_LIVE_REQUEST** - undefined\n- **MEDIA_PLAY_REQUEST** - undefined\n\n### **Slots:**\n - **indicator** - The default is an SVG of a circle that changes to red when the video or audio is live. Can be replaced with your own SVG or font icon.\n- **spacer** - A simple text space ( ) between the indicator and the text.\n- **text** - The text content of the button, with a default of “LIVE”.\n\n### **CSS Properties:**\n - **--media-live-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-live-button-icon-color** - `fill` and `color` of not live button icon. _(default: rgb(140, 140, 140))_\n- **--media-live-button-indicator-color** - `fill` and `color` of live button icon. _(default: rgb(255, 0, 0))_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediapaused",
"description": "(read-only) Present if the media is paused.",
"values": []
},
{
"name": "mediatimeislive",
"description": "(read-only) Present if the media playback is live.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-loading-indicator",
"description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The element shown for when the media is in a buffering state.\n\n### **CSS Properties:**\n - **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: var(--media-loading-indicator-display, inline-block))_\n- **--media-loading-indicator-display** - `display` property of loading indicator. _(default: inline-block)_\n- **--media-loading-indicator-opacity** - `opacity` property of loading indicator. Set to 1 to force it to be visible. _(default: 0)_\n- **--media-loading-indicator-transition-delay** - `transition-delay` property of loading indicator. Make sure to include units. _(default: 500ms)_\n- **--media-loading-indicator-icon-width** - `width` of loading icon. _(default: undefined)_\n- **--media-loading-indicator-icon-height** - `height` of loading icon. _(default: 100px)_",
"attributes": [
{
"name": "loadingdelay",
"description": "Set the delay in ms before the loading animation is shown.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "mediapaused",
"description": "(read-only) Present if the media is paused.",
"values": []
},
{
"name": "medialoading",
"description": "(read-only) Present if the media is loading.",
"values": []
}
],
"references": []
},
{
"name": "media-mute-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **Slots:**\n - **off** - An element shown when the media is muted or the media’s volume is 0.\n- **low** - An element shown when the media’s volume is “low” (less than 50% / 0.5).\n- **medium** - An element shown when the media’s volume is “medium” (between 50% / 0.5 and 75% / 0.75).\n- **high** - An element shown when the media’s volume is “high” (75% / 0.75 or greater).\n- **icon** - An element for representing all states in a single icon\n\n### **CSS Properties:**\n - **--media-mute-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediavolumelevel",
"description": "(read-only) Set to the media volume level.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-pip-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **Slots:**\n - **enter** - An element shown when the media is not in PIP mode and pressing the button will trigger entering PIP mode.\n- **exit** - An element shown when the media is in PIP and pressing the button will trigger exiting PIP mode.\n- **icon** - An element for representing enter and exit states in a single icon\n\n### **CSS Properties:**\n - **--media-pip-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediapipunavailable",
"description": "(read-only) Set if picture-in-picture is unavailable.",
"values": [{ "name": "(unavailable" }, { "name": "unsupported)" }]
},
{
"name": "mediaispip",
"description": "(read-only) Present if the media is playing in picture-in-picture.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-play-button",
"description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **eventName** - undefined\n\n### **Slots:**\n - **play** - An element shown when the media is paused and pressing the button will start media playback.\n- **pause** - An element shown when the media is playing and pressing the button will pause media playback.\n- **icon** - An element for representing play and pause states in a single icon\n\n### **CSS Properties:**\n - **--media-play-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined)_\n- **--media-control-background** - `background` of control. _(default: var(--media-secondary-color, rgb(20 20 30 / .7)))_\n- **--media-control-hover-background** - `background` of control hover state. _(default: rgba(50 50 70 / .7))_\n- **--media-control-padding** - `padding` of control. _(default: 10px)_\n- **--media-control-height** - `line-height` of control. _(default: 24px)_\n- **--media-font** - `font` shorthand property. _(default: var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif))_\n- **--media-font-weight** - `font-weight` property. _(default: bold)_\n- **--media-font-family** - `font-family` property. _(default: helvetica neue, segoe ui, roboto, arial, sans-serif)_\n- **--media-font-size** - `font-size` property. _(default: 14px)_\n- **--media-text-content-height** - `line-height` of button text. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-width** - `width` of button icon. _(default: undefined)_\n- **--media-button-icon-height** - `height` of button icon. _(default: var(--media-control-height, 24px))_\n- **--media-button-icon-transform** - `transform` of button icon. _(default: undefined)_\n- **--media-button-icon-transition** - `transition` of button icon. _(default: undefined)_",
"attributes": [
{
"name": "mediapaused",
"description": "(read-only) Present if the media is paused.",
"values": []
},
{
"name": "disabled",
"description": "The Boolean disabled attribute makes the element not mutable or focusable.",
"values": []
},
{
"name": "mediacontroller",
"description": "The element `id` of the media controller to connect to (if not nested within).",
"values": []
},
{
"name": "tooltipplacement",
"description": "The placement of the tooltip, defaults to \"top\"",
"values": [
{ "name": "('top'" },
{ "name": "right" },
{ "name": "bottom" },
{ "name": "left" },
{ "name": "'none')" }
]
},
{
"name": "notooltip",
"description": "Hides the tooltip if this attribute is present",
"values": []
}
],
"references": []
},
{
"name": "media-playback-rate-button",
"description": "\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--media-playback-rate-button-display** - `display` property of button. _(default: inline-flex)_\n- **--media-primary-color** - Default color of text and icon. _(default: rgb(238 238 238))_\n- **--media-secondary-color** - Default color of button background. _(default: rgb(20 20 30 / .7))_\n- **--media-text-color** - `color` of button text. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-icon-color** - `fill` color of button icon. _(default: var(--media-primary-color, rgb(238 238 238)))_\n- **--media-control-display** - `display` property of control. _(default: undefined