Aller au contenu principal

Lecteur YouTube Plugin Capacitor

Intégrez des vidéos YouTube avec un contrôle complet du player API et la gestion des événements

Installer

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

Guide

Comment utiliser YouTube Player dans Capacitor

Tester sur l'appareil

Téléchargez l'application Capgo, puis scannez le QR code.

Lien QR d’aperçu du plugin YouTube Player code

Utiliser @capgo/capacitor-youtube-player

Interface du plugin YouTube Player pour Capacitor. Fournit des méthodes pour contrôler la lecture des vidéos YouTube dans votre application.

Installer

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

Ce que ce plugin expose

  • initialize - Initialiser une nouvelle instance du lecteur YouTube.
  • destroy - Détruire une instance du lecteur et libérer les ressources.
  • stopVideo - Arrête la lecture de la vidéo et annule le chargement. À utiliser avec parcimonie — pauseVideo() est généralement préférable.
  • playVideo - Lire la vidéo actuellement en file d'attente ou chargée. L'état final du lecteur sera PLAYING (1).

Patch du referer de la WebView principale

Activer patchRefererHeader lorsque le contenu YouTube fonctionne dans le plugin mais échoue depuis la WebView principale de Capacitor, car YouTube s'attend à un navigateur Referer header valide.

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

Le patch ne s'applique qu'aux youtube.com, youtube-nocookie.com, et youtu.be requêtes. Niveau requête existant Referer les en-têtes sont conservés, et refererHeader par défaut sur https://www.youtube.com lorsqu'ils sont omis.

Exemple d'utilisation

initialize

Initialiser une nouvelle instance du lecteur YouTube.

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

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

destroy

Détruire une instance du lecteur et libérer les ressources.

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

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

stopVideo

Arrête la lecture de la vidéo et annule le chargement. À utiliser avec parcimonie — pauseVideo() est généralement préférable.

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

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

playVideo

Lire la vidéo actuellement en file d'attente ou chargée. L'état final du lecteur sera PLAYING (1).

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

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

Référence complète

Continuer à partir de « Utiliser @capgo/capacitor-youtube-player »

Si vous utilisez Utiliser @capgo/capacitor-youtube-player pour planifier le comportement des médias et de l'interface natifs, connectez-l’à @capgo/capacitor-youtube-player pour le détail d’implémentation dans @capgo/capacitor-youtube-player, Prise en main pour les détails d'implémentation dans Getting Started Utiliser @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, et Utiliser @capgo/capacitor-video-player pour la fonctionnalité native dans Utilisation de @capgo/capacitor-video-player.

FAQ

FAQ du plugin YouTube Player

Comment installer le plugin YouTube Player dans une application Capacitor ?

Exécutez « bun add @capgo/capacitor-youtube-player » (ou « npm install @capgo/capacitor-youtube-player »), puis lancez « bunx cap sync » pour que les projets iOS et Android prennent en compte le code natif. Importez-le depuis « @capgo/capacitor-youtube-player » dans votre code.

Est-ce que @capgo/capacitor-youtube-player fonctionne avec React, Vue et Angular ?

Oui. YouTube Player est un package Capacitor, il fonctionne donc avec n'importe quel framework web qui tourne dans Capacitor, y compris Ionic, React, Vue, Angular, Svelte et du JavaScript pur.

Quelle version de Capacitor est supportée par @capgo/capacitor-youtube-player ?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple le plugin v8 avec Capacitor 8). Le tableau de compatibilité du README de GitHub recense les versions maintenues.

Est-ce que @capgo/capacitor-youtube-player est gratuit et open source ?

Oui. Le code source de code est public sur GitHub à l'adresse https://github.com/Cap-go/capacitor-youtube-player/ et le package s'installe gratuitement depuis npm. Les signalements de bugs et les pull requests sont les bienvenus.

Puis-je mettre à jour code utilisant YouTube Player sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie le code natif, ce qui impose un nouveau build pour les stores. Ensuite, les changements JavaScript, HTML et CSS qui appellent le plugin peuvent être livrés instantanément via les live updates de Capgo.

Déployez les changements de YouTube Player sans attendre la validation de l'app

Une fois le plugin intégré à votre build de store, Capgo live updates déploie vos changements JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo