Video Player

<pc-video-player>

1.0.0-alpha.5

Experimental

Video players present visual media and provide controls for playback.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    poster="https://placer-toolkit.vercel.app/images/poster/elephants-dream.webp"    data-title="Elephants Dream">    <track        src="https://placer-toolkit.vercel.app/subtitles/elephants-dream/captions-en.vtt"        kind="captions"        srclang="en"        label="English"        default    />    <track        src="https://placer-toolkit.vercel.app/subtitles/elephants-dream/captions-de.vtt"        kind="captions"        srclang="de"        label="Deutsch"    /></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format    and captions added by Placer.</p>

Code

Edit

Demos

Poster

Use the poster attribute to add a poster (thumbnail) to the video, which shows before the video is played.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    poster="https://placer-toolkit.vercel.app/images/poster/elephants-dream.webp"></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format.</p>

Code

Edit

Autoplay

Use the autoplay attribute to start the video automatically.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    autoplay    muted></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format.</p>

Code

Edit

Muted

Use the muted attribute to silence the video by default.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    muted></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format.</p>

Code

Edit

Loop

Use the loop attribute to make the video loop to the start again once it reaches the end.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    loop></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format.</p>

Code

Edit

No controls

Use the no-controls attribute to hide the video player controls.

<pc-video-player    src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm"    no-controls></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format.</p>

Code

Edit

Subtitles and captions

To add subtitles or captions, put a <track> element inside the default slot to import your WebVTT file.

Captions (which include dialogue alongside sound descriptions and speaker identifiers) should use kind="captions". Standard subtitles (which contain dialogue only) should use kind="subtitles".

<pc-video-player src="https://placer-toolkit.vercel.app/videos/elephants-dream.webm">    <track        src="https://placer-toolkit.vercel.app/subtitles/elephants-dream/captions-en.vtt"        kind="captions"        srclang="en"        label="English (CC)"        default    />    <track        src="https://placer-toolkit.vercel.app/subtitles/elephants-dream/subtitles-en.vtt"        kind="subtitles"        srclang="en"        label="English"    /></pc-video-player><p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">    <strong>Elephants Dream</strong> by Bassam Kurdali    and the Blender Foundation. Licensed under    <a href="https://creativecommons.org/licenses/by/2.5">        CC BY 2.5</a>; transformed to WebM format    and captions added by Placer.</p>

Code

Edit

Properties

Name	Description	Default
`src`	The source of the video. Type: `string`	`""`
`poster`	The placeholder image of the video if it hasn’t loaded yet. Type: `string`	`""`
`autoplay`	Automatically plays the video without user interaction (i.e., pressing the play button). Type: `boolean`	`false`
`muted`	Mutes the video by default. Type: `boolean`	`false`
`loop`	Loops the video by default. Type: `boolean`	`false`
`preload`	Determines how much of the video is loaded before the user interacts with it. Type: `"none" \| "metadata" \| "auto"`	`"metadata"`
`noControls` `no-controls`	Hides the video player controls. Type: `boolean`	`false`
`dataTitle` `data-title`	Provides a custom title to the video. Type: `string`	`""`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	‐

Learn more about attributes and properties.

Slots

Name	Description
(default)	The video player’s media sources and subtitle/caption tracks.

Learn more about using slots.

Methods

Name	Description	Arguments
`play()`	Plays the video.	‐
`pause()`	Pauses the video.	‐
`toggle()`	Toggles the state of the video between play and pause.	‐

Learn more about methods.

Events

Name	Description	Event detail
`pc-play`	Emitted when the video is played.	‐
`pc-pause`	Emitted when the video is paused.	‐

Learn more about events.

Parts

Name	Description
`frame`	The video player’s frame.
`initial-overlay`	The video player’s initial overlay before the video starts.
`initial-play`	The initial overlay’s play button.
`initial-play-base`	The initial play button’s `base` part.
`initial-play-label`	The initial play button’s `label` part.
`initial-play-icon`	The initial play button’s `<pc-icon>` element.
`initial-play-icon-svg`	The `<pc-icon>` element’s `svg` part of the initial play button.
`title`	The video player’s title.
`video`	The video player’s internal `<video>` element.
`captions-container`	The video player’s caption container.
`caption-cue`	The video player’s caption cue.
`caption-line-container`	The video player’s caption cue line’s container.
`caption-line`	The video player’s caption cue line.
`progress-bar`	The video player’s progress bar container.
`progress-wrapper`	The progress bar’s progress wrapper.
`progress-buffer`	The progress wrapper’s buffer element.
`progress-slider`	The progress wrapper’s slider.
`progress-slider-slider`	The progress slider’s `slider` part.
`progress-slider-track`	The progress slider’s `track` part.
`progress-slider-indicator`	The progress slider’s `indicator` part.
`progress-slider-thumb`	The progress slider’s `thumb` part.
`progress-slider-tooltip`	The progress slider’s `tooltip` part.
`progress-slider-tooltip-tooltip`	The tooltip’s `tooltip` part of the progress slider.
`progress-slider-tooltip-content`	The tooltip’s `content` part of the progress slider.
`progress-slider-tooltip-arrow`	The tooltip’s `arrow` part of the progress slider.
`controls`	The video player’s controls.
`play`	The video player’s play button.
`play-base`	The play button’s `base` part.
`play-label`	The play button’s `label` part.
`play-icon`	The play button’s `<pc-icon>` element.
`play-icon-svg`	The `<pc-icon>` element’s `svg` part of the play button.
`mute-container`	The container for the video player’s mute button and volume slider.
`mute`	The video player’s mute button.
`mute-base`	The mute button’s `base` part.
`mute-label`	The mute button’s `label` part.
`mute-icon`	The mute button’s `<pc-icon>` element.
`volume-slider`	The volume slider.
`volume-slider-slider`	The volume slider’s `slider` part.
`volume-slider-track`	The volume slider’s `track` part.
`volume-slider-indicator`	The volume slider’s `indicator` part.
`volume-slider-thumb`	The volume slider’s `thumb` part.
`volume-slider-tooltip`	The volume slider’s `tooltip` part.
`volume-slider-tooltip-tooltip`	The tooltip’s `tooltip` part of the volume slider.
`volume-slider-tooltip-content`	The tooltip’s `content` part of the volume slider.
`volume-slider-tooltip-arrow`	The tooltip’s `arrow` part of the volume slider.
`time-container`	The video player’s time container.
`controls-group`	The video player’s controls group.
`captions`	The video player’s captions button.
`captions-base`	The captions button’s `base` part.
`captions-label`	The captions button’s `label` part.
`captions-icon`	The captions button’s `<pc-icon>` element.
`captions-icon-svg`	The `<pc-icon>` element’s `svg` part of the captions button.
`settings-menu`	The video player’s settings menu.
`settings-menu-base`	The settings menu’s `base` part.
`settings-menu-menu`	The settings menu’s `menu` part.
`settings-button`	The settings menu’s trigger button.
`settings-button-base`	The settings button’s `base` part.
`settings-button-label`	The settings button’s `label` part.
`settings-button-icon`	The settings button’s `<pc-icon>` element.
`settings-button-icon-svg`	The `<pc-icon>` element’s `svg` part of the settings button.
`settings-menu-item`	The video player’s settings menu items.
`settings-menu-item-checkmark`	The settings items’ `checkmark` part.
`settings-menu-item-checkmark-svg`	The settings items’ `checkmark-svg` part.
`settings-menu-item-icon`	The settings items’ `icon` part.
`settings-menu-item-label`	The settings items’ `label` part.
`settings-menu-item-details`	The settings items’ `details` part.
`settings-menu-item-submenu-icon`	The settings items’ `submenu-icon` part.
`settings-menu-item-submenu-icon-svg`	The settings items’ `submenu-icon-svg` part.
`settings-menu-item-submenu`	The settings items’ `submenu` part.
`settings-menu-divider`	The settings menu’s divider.
`picture-in-picture`	The video player’s Picture in Picture button.
`picture-in-picture-base`	The Picture in Picture button’s `base` part.
`picture-in-picture-label`	The Picture in Picture button’s `label` part.
`picture-in-picture-icon`	The Picture in Picture button’s `<pc-icon>` element.
`picture-in-picture-icon-svg`	The `<pc-icon>` element’s `svg` part of the Picture in Picture button.
`full-screen`	The video player’s full screen button.
`full-screen-base`	The full screen button’s `base` part.
`full-screen-label`	The full screen button’s `label` part.
`full-screen-icon`	The full screen button’s `<pc-icon>` element.
`full-screen-icon-svg`	The `<pc-icon>` element’s `svg` part of the full screen button.

Learn more about customising CSS parts.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/video-player/video-player.js"></script>

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/components/video-player/video-player.js";

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/video-player/video-player.js";

Dependencies

This component automatically imports these components: