Passer à la navigation

Début de la démarche

GitHub

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA en utilisant la commande suivante :

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

Ensuite, 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 plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :

Onglet Terminal
bun add @capgo/capacitor-youtube-player
bunx cap sync
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

Réparer le blocage du référentiel YouTube dans la vue principale

Titre de la section « Réparer le blocage du référentiel YouTube dans la vue principale »

Si YouTube fonctionne à l'intérieur du plugin mais faille lorsque la même application charge des pages, des émbeds ou des APIs YouTube à travers la vue principale de Capacitor, activez patchRefererHeader dans votre configuration de Capacitor.

Lorsqu'il est activé, le plugin met à jour Capacitor lors de la synchronisation/mise à jour afin que les requêtes YouTube interceptées incluent une 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.be Les requêtes qui définissent déjà une en-tête conservent leur valeur d'origine.
  • Copier dans le presse-papier Referer Seulement
  • refererHeader est optionnel et prend par défaut https://www.youtube.com.
  • Soutenu sur Capacitor 8.x pour les plateformes iOS et Android installées.

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
});

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.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);

Section intitulée “playVideo”

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);

Copier dans le presse-papier

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

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.seekTo({} as SeekToOptions);

Charger et jouer une vidéo à partir de son ID YouTube.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

Cueillez une vidéo par son ID sans la jouer. Chargez l'icône et préparez le lecteur, mais n'obtenez pas la vidéo jusqu'à ce que playVideo() soit appelé.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);

Charger et jouer une vidéo à partir de son URL complète.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

Cueillez une vidéo par URL sans la jouer.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

Créez une playlist sans la jouer. Chargement de la playlist et préparation de la première vidéo.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

Charger et jouer une playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

Jouer la vidéo suivante de la playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);

Jouer la vidéo précédente de la playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);

Jouer une vidéo spécifique de la playlist par index.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

Muetre le son du lecteur.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);

Démuter le son du lecteur.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);

Vérifier si le lecteur est actuellement muet.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);

Fixer le niveau de volume du joueur.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);

Obtenir le niveau de volume actuel du joueur. Renvoie le volume même si le joueur est muet.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);

Définir les dimensions du joueur en pixels.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);

Obtenir le taux de lecture actuel.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

Fixer la vitesse de lecture.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

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);

Activer ou désactiver le mélange de playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);

Obtenez la fraction de la vidéo qui a été tamponnée. Plus fiable que les méthodes obsolètes getVideoBytesLoaded/getVideoBytesTotal.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

Obtenir l'état actuel du joueur.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

Obtenir les états d'événement pour tous les joueurs actifs. Utile pour suivre plusieurs instances de joueur.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();

Obtenir la position de lecture actuelle en secondes.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

Activer ou désactiver le mode plein écran.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

Obtenir la qualité de lecture actuelle.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

Définir la qualité de lecture suggérée. La qualité réelle peut varier en fonction des conditions du réseau.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

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);

Obtenez la durée de la vidéo actuelle en secondes.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);

Obtenez l'URL YouTube.com pour la vidéo actuelle.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

Obtenez l'code d'incrustation pour la vidéo actuelle. Retourne un code iframe HTML d'incrustation.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

Obtenez un tableau des ID de vidéos dans la playlist actuelle.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

Obtenez l'index de la vidéo en cours de lecture dans la playlist.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

Obtenez l'élément DOM iframe du joueur. Seulement pour les plateformes web.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);

Ajoutez un écouteur d'événements au joueur. Seulement pour 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);
},
});

Supprimez l'écouteur d'événements du joueur. Seulement pour les plateformes web.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);

Référence de type

Référence de type

PlayerIdOptions

Options de PlayerId
export interface PlayerIdOptions {
playerId: string;
}
export interface SeekToOptions extends PlayerIdOptions {
playerId: string;
seconds: number;
allowSeekAhead: boolean;
}
export interface VideoByIdMethodOptions extends PlayerIdOptions {
playerId: string;
options: IVideoOptionsById;
}
export interface VideoByUrlMethodOptions extends PlayerIdOptions {
playerId: string;
options: IVideoOptionsByUrl;
}
export interface PlaylistMethodOptions extends PlayerIdOptions {
playerId: string;
playlistOptions: IPlaylistOptions;
}
export interface PlayVideoAtOptions extends PlayerIdOptions {
playerId: string;
index: number;
}
export interface SetVolumeOptions extends PlayerIdOptions {
playerId: string;
volume: number;
}
export interface SetSizeOptions extends PlayerIdOptions {
playerId: string;
width: number;
height: number;
}
export interface SetPlaybackRateOptions extends PlayerIdOptions {
playerId: string;
suggestedRate: number;
}
export interface SetLoopOptions extends PlayerIdOptions {
playerId: string;
loopPlaylists: boolean;
}
export interface SetShuffleOptions extends PlayerIdOptions {
playerId: string;
shufflePlaylist: boolean;
}
export interface ToggleFullScreenOptions extends PlayerIdOptions {
playerId: string;
isFullScreen: boolean | null | undefined;
}

Cette page est générée à partir du plugin’s src/definitions.tsRe-faire la synchronisation lorsque le public API change en amont.

Si vous utilisez Getting Started pour planifier le tableau de bord et les opérations API, connectez-le avec Utilisez @capgo/capacitor-youtube-player pour la capacité native dans Utilisez @capgo/capacitor-youtube-player, API Résumé pour le détail d'implémentation dans API Résumé, 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.