Einstieg
Eine Einrichtungsanweisung mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-youtube-player`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/youtube-player/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Installieren
Abschnitt mit dem Titel „Installieren“bun add @capgo/capacitor-youtube-playerbunx cap syncImportieren
Abschnitt mit dem Titel „Importieren“import { YoutubePlayer } from '@capgo/capacitor-youtube-player';API Übersicht
Abschnitt mit dem Titel „API Übersicht“initialize
Abschnitt mit dem Titel „initialisieren“Eine neue Instanz des YouTube-Players initialisieren.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.initialize({ playerId: 'my-player', videoId: 'dQw4w9WgXcQ', playerSize: { width: 640, height: 360 }, privacyEnhanced: true});Eine Spielerinstanz zerstören und Ressourcen freigeben.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.destroy({} as PlayerIdOptions);stopVideo
Abschnitt mit dem Titel “stopVideo”Beende das Video und storniere das Laden. Verwende dies sparsam - pauseVideo() ist in der Regel bevorzugt.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);playVideo
Abschnitt mit dem Titel “playVideo”Wiedergabe des aktuellen angezeigten oder geladenen Videos. Der Endzustand des Spielers wird auf PLAYING (1) gesetzt.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);pauseVideo
Abschnitt mit dem Titel “pauseVideo”Pausiere das aktuell wiedergegebene Video. Der Endzustand des Spielers wird auf PAUSED (2) gesetzt, es sei denn, er ist bereits ENDED (0).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);Suche nach einer bestimmten Zeit im Video. Wenn der Spieler angehalten ist, bleibt er angehalten. Wenn er spielt, wird die Wiedergabe fortgesetzt.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
Abschnitt mit dem Titel „loadVideoById“Ein Video mit seinem YouTube-Beitrittscode laden und abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);cueVideoById
Abschnitt mit dem Titel „cueVideoById“Ein Video durch seinen ID ohne Abspielen vorbereiten. Lädt Vorschaubild und bereitet Spieler vor, aber fordert Video nicht an, bis playVideo() aufgerufen wird.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);loadVideoByUrl
Abschnitt mit dem Titel „loadVideoByUrl“Ein Video mit seinem vollständigen URL laden und abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
Abschnitt mit dem Titel „cueVideoByUrl“Ein Video durch seine URL ohne Abspielen vorbereiten.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Abschnitt mit dem Titel „cuePlaylist“Ein Playlist ohne Abspielen einrichten. Lädt Playlist und bereitet erste Video vor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Abschnitt mit dem Titel „loadPlaylist“Eine Playlist laden und abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
Abschnitt mit dem Titel „nextVideo“Das nächste Video in der Playlist abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
Abschnitt mit dem Titel „previousVideo“Das vorherige Video in der Playlist abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
Abschnitt mit dem Titel „playVideoAt“Ein bestimmtes Video in der Playlist durch Index abspielen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);Die Spieler-Audio abschalten.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);Die Spieler-Audio wieder einschalten.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);Überprüfen, ob der Spieler derzeit abgeschaltet ist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);setVolume
Abschnitt mit dem Titel „setVolume”Setze die Lautstärke des Spielers auf einen bestimmten Wert.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Abschnitt mit dem Titel „getVolume”Ermittle die aktuelle Lautstärke des Spielers. Gibt die Lautstärke auch dann zurück, wenn der Spieler ausgestellt ist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);Setze die Abmessungen des Spielers in Pixeln.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Abschnitt mit dem Titel „getPlaybackRate”Ermittle die aktuelle Wiedergabe-Geschwindigkeit.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
Abschnitt mit dem Titel „setPlaybackRate“Die Wiedergabe-Geschwindigkeit festlegen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
Abschnitt mit dem Titel „getAvailablePlaybackRates“Liste der verfügbaren Wiedergabe-Raten für das aktuelle Video abrufen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);Wiederholung des Wiedergabecycles aktivieren oder deaktivieren. Wenn aktiviert, wird der Wiedergabecycle nach dem letzten Video von vorne neu gestartet.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
Abschnitt mit dem Titel „setShuffle“Wiedergabecycle-Zufallsanordnung aktivieren oder deaktivieren.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Abschnitt mit dem Titel “getVideoLoadedFraction”Ermitteln Sie den Bruchteil des Videos, der bereits geladen wurde. Verlässlicher als der veraltete getVideoBytesLoaded/getVideoBytesTotal.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
Abschnitt mit dem Titel “getPlayerState”Ermitteln Sie den aktuellen Zustand des Spielers.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
Abschnitt mit dem Titel “getAllPlayersEventsState”Ermitteln Sie die Ereignisstatus für alle aktiven Spieler. Zum Verfolgen mehrerer Spielerinstanzen geeignet.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();getCurrentTime
Abschnitt mit dem Titel “getCurrentTime”Ermitteln Sie die aktuelle Abspielposition in Sekunden.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);toggleFullScreen
Abschnitt mit dem Titel „toggleFullScreen“Vollbildmodus an- oder aus schalten.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Abschnitt mit dem Titel „getPlaybackQuality“Aktuelle Wiedergabelösung ermitteln.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Abschnitt mit dem Titel „setPlaybackQuality“Sollende Wiedergabelösung festlegen. Die tatsächliche Qualität kann je nach Netzwerkbedingungen abweichen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);getAvailableQualityLevels
Abschnitt mit dem Titel „getAvailableQualityLevels“Liste der verfügbaren Qualitätsebenen für das aktuelle Video abrufen.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);getDuration
Abschnitt mit dem Titel “getDuration”Ermitteln Sie die Dauer des aktuellen Videos in Sekunden.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);getVideoUrl
Abschnitt mit dem Titel “getVideoUrl”Ermitteln Sie die YouTube.com-URL für das aktuelle Video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);getVideoEmbedCode
Abschnitt mit dem Titel “getVideoEmbedCode”Ermitteln Sie den Embed-code für das aktuelle Video. Gibt HTML-iframe-Embed-code zurück.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);getPlaylist
Abschnitt mit dem Titel “getPlaylist”Ermitteln Sie eine Liste der Video-IDs im aktuellen Playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);getPlaylistIndex
Abschnitt mit dem Titel “getPlaylistIndex”Ermitteln Sie die Index des derzeit abgespielten Videos in der Playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);getIframe
Abschnitt mit dem Titel “getIframe”Ermitteln Sie das iframe- DOM-Element für den Player. Nur Web-Plattform.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
Abschnitt mit dem Titel “addEventListener”Fügen Sie einem Ereignislistener zum Player hinzu. Nur Web-Plattform.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
YoutubePlayer.addEventListener({ playerId: 'my-player', eventName: 'onStateChange', listener: (event) => { console.log('Player state:', event.data); },});removeEventListener
Abschnitt mit dem Titel “removeEventListener”Entfernen Sie einen Ereignislistener vom Player. Nur Web-Plattform.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);Typenverweis
Abschnitt mit dem Titel „Typenverweis“PlayerIdOptions
Abschnitt mit dem Titel „PlayerIdOptions“export interface PlayerIdOptions { playerId: string;}SeekToOptions
Abschnitt mit dem Titel „SeekToOptions“export interface SeekToOptions extends PlayerIdOptions { playerId: string; seconds: number; allowSeekAhead: boolean;}VideoByIdMethodOptions
Abschnitt mit dem Titel „VideoByIdMethodOptions“export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Abschnitt mit dem Titel „VideoByUrlMethodOptions“export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Abschnitt mit dem Titel „PlaylistMethodOptions“export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Abschnitt mit dem Titel „PlayVideoAtOptions“export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Abschnitt mit dem Titel „SetVolumeOptions“export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Abschnitt mit dem Titel „SetSizeOptions“export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Abschnitt mit dem Titel „SetPlaybackRateOptions“export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Abschnitt mit dem Titel „SetLoopOptions“export interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
Abschnitt mit dem Titel „SetShuffleOptions“export interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
Sektion mit dem Titel „ToggleFullScreenOptions“export interface ToggleFullScreenOptions extends PlayerIdOptions { playerId: string; isFullScreen: boolean | null | undefined;}Quelle der Wahrheit
Sektion mit dem Titel „Quelle der Wahrheit“Diese Seite wurde aus dem Plugin generiert. src/definitions.tsWiederholen Sie die Synchronisierung, wenn die öffentliche API upstream geändert wird.
Fortsetzen von Getting Started
Sektion mit dem Titel „Fortsetzen von Getting Started“Wenn Sie das verwenden Getting Started um das Dashboard und API-Operationen zu planen, verbinden Sie es mit Mit @capgo/capacitor-youtube-player für die native Fähigkeit in Mit @capgo/capacitor-youtube-player API Übersicht für die Implementierungsdetails in API Übersicht Einführung für die Implementierungsdetails in Einführung API Schlüssel für die Implementierungsdetails in API Schlüssel, und Geräte für die Implementierungsdetails in Geräte.