Prise en main
Copiez un prompt de configuration avec les étapes d'installation et la guide markdown complète pour ce plugin.
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.
Installer
Section intitulée “Installer”Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plug-in. Ajoutez les Capgo compétences à votre outil IA à l'aide de la commande suivante :
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsEnsuite, utilisez la prompt suivante :
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-youtube-player` plugin in my project.Si vous préférez la configuration manuelle, installez le plug-in en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :
bun add @capgo/capacitor-youtube-playerbunx cap syncImporter
Section intitulée “Importer”import { YoutubePlayer } from '@capgo/capacitor-youtube-player';Réparer le blocage de référentiel YouTube dans la vue principale
Section intitulée « Réparer le blocage de référentiel YouTube dans la vue principale »Si YouTube fonctionne à l'intérieur du plugin mais échoue lorsque la même application charge des pages, des émbeds ou des API YouTube à travers la vue principale de Capacitor, activez patchRefererHeader dans votre configuration de Capacitor.
Lorsqu'elle est activée, le plugin met à jour Capacitor lors de la synchronisation/mise à jour afin que les requêtes YouTube interceptées incluent un en-tête valide. Referer Copier dans le presse-papier
{ "plugins": { "YoutubePlayer": { "patchRefererHeader": true, "refererHeader": "https://www.youtube.com" } }}- , et
youtube.com,youtube-nocookie.comles requêtes sont affectées.youtu.beLes requêtes qui définissent déjà un - header
Refererheader gardent leur valeur d'origine. refererHeaderest optionnel et se définit par défaut àhttps://www.youtube.com.- Supporté sur Capacitor
8.xpour les plateformes iOS et Android installées.
API Vue d'ensemble
Sous-titre « API Vue d'ensemble »initialize
Sous-titre « initialize »Initialiser une nouvelle instance de 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
Sous-titre « détruire »Détruire une instance de lecteur et libérer les ressources.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.destroy({} as PlayerIdOptions);Arrêtez la lecture vidéo et annulez la charge. Utilisez cela avec parcimonie - pauseVideo() est généralement préféré.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);playVideo
Section intitulée « jouer la vidéo »Jouez la vidéo actuellement chargée ou préchargée. L'état final du lecteur sera PLAYING (1).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);Mettez en pause la vidéo actuellement en lecture. L'état final du lecteur sera PAUSED (2), à moins qu'il ne soit déjà TERMINÉ (0).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);Sauter à une heure spécifique dans la vidéo. Si le lecteur est en pause, il reste en pause. Si en lecture, continue de jouer.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
Section intitulée « loadVideoById »Charger et jouer une vidéo en fonction de son ID YouTube.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);cueVideoById
Section intitulée « cueVideoById »Couper une vidéo en fonction de son ID sans la jouer. Charge l’affiche et prépare le lecteur, mais ne demande pas la vidéo jusqu’à ce que playVideo() soit appelé.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);loadVideoByUrl
Section intitulée « loadVideoByUrl »Charger et jouer une vidéo en fonction de son URL complète.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
Section intitulée « cueVideoByUrl »Couper une vidéo en fonction de son URL sans la jouer.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Section intitulée « cuePlaylist »Cuez une playlist sans la jouer. Charge la playlist et prépare la première vidéo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Section intitulée « loadPlaylist »Charger et jouer une playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
Section intitulée « nextVideo »Jouer la prochaine vidéo de la playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
Section intitulée « previousVideo »Jouer la vidéo précédente de la playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
Titre de la section « playVideoAt »Jouer une vidéo spécifique dans la playlist en fonction de son index.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);Mettre au silence le son du lecteur.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);Désactiver le silence du lecteur.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);Vérifier si le lecteur est actuellement mis au silence.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);setVolume
Section intitulée « setVolume »Définir le niveau de volume du lecteur.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Section intitulée « getVolume »Obtenir le niveau de volume actuel du lecteur. Renvoie le volume même si le lecteur est mis au silence.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);Définir les dimensions du lecteur en pixels.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Section intitulée « getPlaybackRate »Obtenir le taux de lecture actuel.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
Section intitulée « setPlaybackRate »Définir la vitesse de lecture.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
Section intitulée « getAvailablePlaybackRates »Obtenir la liste des vitesses de lecture disponibles pour la vidéo actuelle.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);Activer ou désactiver la boucle de playlist. Lorsque activé, la playlist redémarre depuis le début après la dernière vidéo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
Section intitulée « setShuffle »Activer ou désactiver le mélange de playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Section intitulée “getVideoLoadedFraction”Obtenez la fraction du vidéo qui a été tamponné. Plus fiable que les méthodes obsolètes getVideoBytesLoaded/getVideoBytesTotal.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
Section intitulée “getPlayerState”Obtenez l'état actuel du lecteur.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
Section intitulée “getAllPlayersEventsState”Obtenez les états des événements pour tous les lecteurs actifs. Utile pour suivre plusieurs instances de lecteur.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();getCurrentTime
Section intitulée “getCurrentTime”Obtenez la position de lecture actuelle en secondes.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);toggleFullScreen
Section intitulée « toggleFullScreen »Activer ou désactiver le mode plein écran.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Section intitulée « getPlaybackQuality »Obtenir la qualité actuelle de lecture.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Section intitulée « setPlaybackQuality »Définir la qualité de lecture suggérée. La qualité réelle peut varier en fonction des conditions réseau.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);getAvailableQualityLevels
Section intitulée « getAvailableQualityLevels »Obtenir la liste des niveaux de qualité disponibles pour la vidéo actuelle.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);getDuration
Section intitulée “getDuration”Obtenez la durée de la vidéo actuelle en secondes.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);getVideoUrl
Section intitulée “getVideoUrl”Obtenez l'URL YouTube.com pour la vidéo actuelle.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);getVideoEmbedCode
Section intitulée “getVideoEmbedCode”Obtenez le code d'embed code pour la vidéo actuelle. Retourne un code HTML iframe d'embed code.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);getPlaylist
Section intitulée “getPlaylist”Obtenez un tableau des ID de vidéos dans la playlist actuelle.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);getPlaylistIndex
Section intitulée “getPlaylistIndex”Obtenez l'index de la vidéo actuellement diffusée dans la playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);getIframe
Section intitulée “getIframe”Obtenez l'élément DOM iframe pour le joueur. Seulement disponible sur les plateformes web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
Section intitulée “addEventListener”Ajoutez un écouteur d'événements au joueur. Seulement disponible sur les plateformes web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
YoutubePlayer.addEventListener({ playerId: 'my-player', eventName: 'onStateChange', listener: (event) => { console.log('Player state:', event.data); },});removeEventListener
Section intitulée “removeEventListener”Supprimez l'écouteur d'événements du joueur. Seulement disponible sur les plateformes web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);Référence de type
Section intitulée « Référence de type »PlayerIdOptions
Section intitulée « Options de PlayerId »export interface PlayerIdOptions { playerId: string;}SeekToOptions
Section intitulée « Options de SeekTo »export interface SeekToOptions extends PlayerIdOptions { playerId: string; seconds: number; allowSeekAhead: boolean;}VideoByIdMethodOptions
Section intitulée « Options de méthode VideoById »export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Section intitulée « Options de méthode VideoByUrl »export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Section intitulée « Options de méthode Playlist »export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Titre de la section « Options de lecture vidéo »export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Titre de la section « Options de volume »export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Titre de la section « Options de taille »export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Titre de la section « Options de vitesse de lecture »export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Titre de la section « Options de boucle »export interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
Titre de la section « Options d'ordre aléatoire »export interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
Titre de la section « Options de plein écran »export interface ToggleFullScreenOptions extends PlayerIdOptions { playerId: string; isFullScreen: boolean | null | undefined;}Source de Vérité
Titre de la section « Source de Vérité »Cette page est générée à partir du plugin’s src/definitions.ts. Re-run la synchronisation lorsque les modifications publiques API se produisent en amont.
Continuez de la section « Getting Started »
Titre de la section « Continuez de la section « Getting Started » »Si vous utilisez Getting Started pour planifier le tableau de bord et les opérations API , connectez-l’avec Utilisation de @capgo/capacitor-youtube-player pour la capacité native dans Utilisation de @capgo/capacitor-youtube-player, API Vue d'ensemble pour le détail d'implémentation dans API Vue d'ensemble, Introduction pour le détail d'implémentation dans Introduction, API Clés pour le détail d'implémentation dans API Clés, et Appareils pour le détail d'implémentation dans Appareils.