Video Player

<pc-video-player>

1.0.0-alpha.5

Experimentell

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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

Eigenschaften

Name	Beschreibung	Standard
`src`	The source of the video. Typ: `string`	`""`
`poster`	The placeholder image of the video if it hasn’t loaded yet. Typ: `string`	`""`
`autoplay`	Automatically plays the video without user interaction (i.e., pressing the play button). Typ: `boolean`	`false`
`muted`	Mutes the video by default. Typ: `boolean`	`false`
`loop`	Loops the video by default. Typ: `boolean`	`false`
`preload`	Determines how much of the video is loaded before the user interacts with it. Typ: `"none" \| "metadata" \| "auto"`	`"metadata"`
`noControls` `no-controls`	Hides the video player controls. Typ: `boolean`	`false`
`dataTitle` `data-title`	Provides a custom title to the video. Typ: `string`	`""`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

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

Erfahre mehr über die Benutzung von Slots.

Methoden

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

Erfahre mehr über Methoden.

Events

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

Erfahre mehr über Events.

Parts

Name	Beschreibung
`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.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Auto‐Loader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du dich für „Cherry‐Picking“ entschieden hast, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

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

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten: