Getting Started

Installieren

You können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten Ihrem AI-Tool mit der folgenden Befehl hinzu:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Dann verwenden Sie die folgende Anfrage:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-youtube-player` plugin in my project.

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den unten angegebenen Plattform-spezifischen Anweisungen:

bun add @capgo/capacitor-youtube-player
bunx cap sync

Importieren

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

Fixieren Sie das YouTube-Referer-Blockieren in der Haupt-WebView

Wenn YouTube innerhalb des Plugins funktioniert, aber fehlschlägt, wenn das gleiche App YouTube-Seiten, -Einbettungen oder -APIs über den Haupt-WebView von Capacitor lädt, aktivieren Sie patchRefererHeader in Ihrer Capacitor-Konfiguration.

Wenn aktiviert, wird das Plugin Capacitor während der Synchronisierung/aktualisierung so umgehen, dass abgefangene YouTube-Anfragen ein gültiges Referer Kopfzeichen enthalten.

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

• Nur youtube.com, youtube-nocookie.com, und youtu.be Anfragen werden betroffen.
• Anfragen, die bereits ein Referer Kopfzeichen definieren, behalten ihren ursprünglichen Wert.
• refererHeader ist optional und hat den Standardwert https://www.youtube.com.
• Unterstützt auf Capacitor 8.x für installierte iOS- und Android-Plattformen.

API Übersicht

initialize

Ein neues YouTube-Player-Instanz initialisieren.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.initialize({
  playerId: 'my-player',
  videoId: 'dQw4w9WgXcQ',
  playerSize: { width: 640, height: 360 },
  privacyEnhanced: true
});

destroy

Eine Player-Instanz zerstören und Ressourcen freigeben.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

Videoabspiel stoppen und das Laden stornieren. Verwenden Sie dies sparsam - pauseVideo() wird normalerweise bevorzugt.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

Wiedergabe des derzeit gespielten oder geladenen Videos. Die endgültige Spielerzustand wird zu PLAYING (1) gesetzt.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

Pausieren des derzeit gespielten Videos. Der endgültige Spielerzustand wird zu PAUSED (2) gesetzt, es sei denn, er ist bereits ENDED (0).

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

seekTo

Zurücksetzen des Videos zu einer bestimmten Zeit. 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

Laden und Abspielen eines Videos nach seinem YouTube-Bezeichner.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

cueVideoById

Ein Video durch ID ohne Abspielen einstellen. Miniaturbild lädt und Spieler vorbereitet, aber Video bis playVideo() aufgerufen wird nicht anfordert.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);

loadVideoByUrl

Ein Video durch seine vollständige URL laden und abspielen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

cueVideoByUrl

Ein Video durch URL ohne Abspielen einstellen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

cuePlaylist

Ein Wiedergabeliste ohne Abspielen einstellen. Wiedergabeliste lädt und ersten Video vorbereitet.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

loadPlaylist

Ein Playlist laden und abspielen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

nextVideo

Den nächsten Video in der Playlist abspielen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

previousVideo

Den vorherigen Video in der Playlist abspielen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

playVideoAt

Ein bestimmtes Video in der Playlist durch Index abspielen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

mute

Die Spieler-Audio stummschalten.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.mute({} as PlayerIdOptions);

unMute

Die Spieler-Audio wieder einstellen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

Überprüfen, ob der Spieler derzeit stumm ist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

Das Lautsprecher-Volumen auf einen bestimmten Wert einstellen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setVolume({} as SetVolumeOptions);

getVolume

Ermitteln Sie derzeitigen Lautstärkelevel des Spielers. Gibt die Lautstärke auch dann zurück, wenn der Spieler stummgeschaltet ist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVolume({} as PlayerIdOptions);

setSize

Setzen Sie die Abmessungen des Spielers in Pixel.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

Ermitteln Sie derzeitige Wiedergabe-Geschwindigkeit.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

Setzen Sie die Wiedergabe-Geschwindigkeit.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

getAvailablePlaybackRates

Liste der verfügbaren Abspielraten für das aktuelle Video abrufen.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);

setLoop

Wiederholung des Playlists aktivieren oder deaktivieren. Wenn aktiviert, wird die Playlist nach dem letzten Video von vorne neu gestartet.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setLoop({} as SetLoopOptions);

setShuffle

Playlistschleifen aktivieren oder deaktivieren.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

getVideoLoadedFraction

Den Anteil des Videos abrufen, der bereits geladen wurde. Verlässlicher als der veraltete getVideoBytesLoaded/getVideoBytesTotal.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

getPlayerState

Ermitteln Sie den aktuellen Zustand des Spielers.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

getAllPlayersEventsState

Ermitteln Sie die Ereigniszustände für alle aktiven Spieler. Zum Verfolgen mehrerer Spielerinstanzen geeignet.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAllPlayersEventsState();

getCurrentTime

Ermitteln Sie die aktuelle Wiedergabelageposition in Sekunden.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

toggleFullScreen

Schalten Sie den Vollbildmodus auf oder ab.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

getPlaybackQuality

Ermitteln Sie derzeitige Wiedergabequalität.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

setPlaybackQuality

Legen Sie die empfohlene Wiedergabequalität fest. Die tatsächliche Qualität kann je nach Netzwerkbedingungen variieren.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

getAvailableQualityLevels

Ermitteln Sie die Liste der verfügbaren Qualitätsebenen für das aktuelle Video.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);

getDuration

Ermitteln Sie die Länge des aktuellen Videos in Sekunden.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

Ermitteln Sie die URL von YouTube.com für das aktuelle Video.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

getVideoEmbedCode

Get the embed code for the current video. Returns HTML iframe embed code.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

getPlaylist

Ermitteln Sie eine Liste der Video-IDs im aktuellen Playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

getPlaylistIndex

Ermitteln Sie die Indexnummer des aktuellen Videos in der Playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

getIframe

Ermitteln Sie das iframe- DOM-Element für den Spieler. Nur Web-Plattform.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getIframe({} as PlayerIdOptions);

addEventListener

Fügen Sie einem Ereignislistener zum Spieler 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

Entfernen Sie einen Ereignislistener vom Spieler. Nur Web-Plattform.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);

Typenverweis

PlayerIdOptions

export interface PlayerIdOptions {
  playerId: string;
}

SeekToOptions

export interface SeekToOptions extends PlayerIdOptions {
  playerId: string;
  seconds: number;
  allowSeekAhead: boolean;
}

VideoByIdMethodOptions

export interface VideoByIdMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsById;
}

VideoByUrlMethodOptions

export interface VideoByUrlMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsByUrl;
}

PlaylistMethodOptions

export interface PlaylistMethodOptions extends PlayerIdOptions {
  playerId: string;
  playlistOptions: IPlaylistOptions;
}

PlayVideoAtOptions

export interface PlayVideoAtOptions extends PlayerIdOptions {
  playerId: string;
  index: number;
}

SetVolumeOptions

export interface SetVolumeOptions extends PlayerIdOptions {
  playerId: string;
  volume: number;
}

SetSizeOptions

export interface SetSizeOptions extends PlayerIdOptions {
  playerId: string;
  width: number;
  height: number;
}

SetPlaybackRateOptions

export interface SetPlaybackRateOptions extends PlayerIdOptions {
  playerId: string;
  suggestedRate: number;
}

SetLoopOptions

export interface SetLoopOptions extends PlayerIdOptions {
  playerId: string;
  loopPlaylists: boolean;
}

SetShuffleOptions

export interface SetShuffleOptions extends PlayerIdOptions {
  playerId: string;
  shufflePlaylist: boolean;
}

ToggleFullScreenOptions

export interface ToggleFullScreenOptions extends PlayerIdOptions {
  playerId: string;
  isFullScreen: boolean | null | undefined;
}

Quelle der Wahrheit

Diese Seite wird aus dem Plugin generiert. src/definitions.tsWenn sich die öffentliche API im Hintergrund ändert, führen Sie die Synchronisierung erneut durch.

Weiter von Anleitung für Einsteiger

Wenn Sie Anleitung für Einsteiger für die Planung Ihres Dashboards und API-Operationen verwenden, verbinden Sie es mit Für die native Fähigkeit in Using @capgo/capacitor-youtube-player Verwenden Sie @capgo/capacitor-youtube-player Übersicht über API 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.