Zum Hauptinhalt springen

YouTube-Player Capacitor-Plugin

API-Videos von YouTube einbetten, mit vollständiger Steuerung und Ereignisbehandlung des Spielers

Installieren

bun add @capgo/capacitor-youtube-player bunx cap sync
npm, pnpm oder yarn
  • npm install @capgo/capacitor-youtube-player
  • pnpm add @capgo/capacitor-youtube-player
  • yarn add @capgo/capacitor-youtube-player

Anleitung

How Capacitor YouTube Player zu verwenden

Gerät testen

Herunterladen Sie die Capgo-App, dann scannen Sie die QR-code.

Vorschau-QR-code für YouTube-Player-Plugin

@capgo/capacitor-youtube-player verwenden

YouTube Player Plugin Interface für Capacitor. Bietet Methoden zum Steuern des YouTube-Videowiederspiels in Ihrer App.

Installieren

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

Was diese Erweiterung bereitstellt

  • initialize - Eine neue Instanz des YouTube-Players initialisieren.
  • destroy - Eine Spielerinstanz zerstören und Ressourcen freigeben.
  • stopVideo - Videoabspiel und Ladevorgang beenden. Verwenden Sie dies sparsam - pauseVideo() wird normalerweise bevorzugt.
  • playVideo - Das derzeit angezeigte oder geladene Video abspielen. Der endgültige Spielerzustand wird auf PLAYING (1) gesetzt.

Haupt-WebView-Referer-Patch

Aktivieren patchRefererHeader wenn YouTube-Inhalte in der Erweiterung funktionieren, aber aus der Haupt-WebView von Capacitor fehlschlagen, weil YouTube einen Browser-basierten Referer header.

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

Der Patch gilt nur für youtube.com, youtube-nocookie.com, und youtu.be Anfragen. Bestehende Anfragen auf Ebene Referer Überschriften werden beibehalten und refererHeader standardmäßig https://www.youtube.com wenn diese weggelassen wird.

Beispiel für die Verwendung

initialize

Initialisieren Sie eine neue Instanz des YouTube-Players.

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

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

destroy

Zerstören Sie eine Spielerinstanz und freigeben Sie Ressourcen.

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

const result = await YoutubePlayer.destroy({ playerId: 'player-id-123' });
console.log(result);

stopVideo

Stoppe die Videoabspielung und storniere das Laden. Verwende dies sparsam - pauseVideo() wird normalerweise bevorzugt.

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

const result = await YoutubePlayer.stopVideo({ playerId: 'player-id-123' });
console.log(result);

playVideo

Abspielen Sie das derzeit angezeigte oder geladene Video. Der endgültige Spielerzustand wird auf PLAYING (1) gesetzt.

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

const result = await YoutubePlayer.playVideo({ playerId: 'player-id-123' });
console.log(result);

Vollständige Referenz

Fortfahren von Using @capgo/capacitor-youtube-player

Wenn Sie Using verwenden Verwendung von @capgo/capacitor-YouTube-Player Um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @capgo/capacitor-youtube-player für die Implementierungsdetails in @capgo/capacitor-youtube-player Getting Started für die Implementierungsdetails in Getting Started Using @capgo/capacitor-Live-Activities für die native Fähigkeit in Using @capgo/capacitor-live-activities @capgo/capacitor-Live-Activities für die Implementierungsdetails in @capgo/capacitor-live-activities und Mit @capgo/capacitor-Video-Player für die native Fähigkeit in Mit @capgo/capacitor-Video-Player.

FAQ

FAQ zum YouTube-Player-Plugin

Wie installiere ich die YouTube-Player-Plugin in einer Capacitor-App?

Führen Sie "bun add @capgo/capacitor-youtube-player" (oder "npm install @capgo/capacitor-youtube-player"), dann führen Sie "bunx cap sync" aus, damit die iOS- und Android-Projekte die native code aufnehmen. Importieren Sie es aus "@capgo/capacitor-youtube-player" in Ihrer code-Anwendung.

Funktioniert @capgo/capacitor-youtube-player mit React, Vue und Angular?

Ja. Der YouTube-Player ist ein Capacitor-Paket, daher funktioniert es mit jedem Webframework, das innerhalb von Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und plain JavaScript.

Welche Capacitor-Version unterstützt @capgo/capacitor-youtube-player?

Capgo-Plugins folgen der Capacitor-Version: verwenden Sie die Plugin-Major-Version, die Ihrer Capacitor-Major-Version entspricht (z.B. Plugin v8 mit Capacitor 8). Die Kompatibilitäts-Tabelle im GitHub-README listet die unterstützten Versionen auf.

Ist @capgo/capacitor-youtube-player kostenlos und Open-Source?

Ja. Der Quellcode von code ist öffentlich auf GitHub unter https://github.com/Cap-go/capacitor-youtube-player/ verfügbar und das Paket kann kostenlos installiert werden von npm. Bug-Reports und Pull-Requests sind willkommen.

Kann ich code aktualisieren, das YouTube Player verwendet, ohne eine App-Store-Bewertung?

Die Installation oder Aktualisierung des Plugins ändert die native code, daher benötigt es eine neue Store-Build. Danach können JavaScript-, HTML- und CSS-Änderungen, die den Plugin aufrufen, sofort mit Capgo-Live-Updates verschickt werden.

Versenden Sie Änderungen am YouTube-Player ohne auf eine App-Überprüfung zu warten.

Einmal der Plugin in Ihrem Store-Build ist, drücken Capgo live Updates Ihre JavaScript-, HTML- und CSS-Änderungen an die Benutzer in Minuten aus.

Starten Sie mit Capgo