Prise en main

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. 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-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 :

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

Importer

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

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

Si YouTube fonctionne à l'intérieur du plugin mais échoue lorsque le 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 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à un
• Référentiel Referer header gardent leur valeur d'origine.
• refererHeader est optionnel et se définit par défaut à https://www.youtube.com.
• Supporté sur Capacitor 8.x pour les plateformes iOS et Android installées.

API Vue d'ensemble

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

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

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

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

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

Jouez la vidéo actuellement affichée ou chargée. L'état final du lecteur sera PLAYING (1).

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

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

seekTo

Se rendre à 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

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

Couper une vidéo par son ID sans la jouer. Charge l'icône 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

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

Couper une vidéo par son URL sans la jouer.

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

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

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

Charger et jouer une playlist.

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

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

nextVideo

Jouer la vidéo suivante de la playlist.

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

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

previousVideo

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

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

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

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

mute

Mettre au silence le son du lecteur.

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

await YoutubePlayer.mute({} as PlayerIdOptions);

unMute

Désactiver le silence du lecteur.

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

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

Vérifier si le lecteur est actuellement mis au silence.

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

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

Définir le niveau de volume du lecteur.

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

await YoutubePlayer.setVolume({} as SetVolumeOptions);

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

setSize

Définir les dimensions du lecteur en pixels.

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

Obtenir le taux de lecture actuel.

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

Fixer la vitesse de lecture.

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

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

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

setLoop

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

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

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

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

getVideoLoadedFraction

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

getPlayerState

Obtenez l'état actuel du lecteur.

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

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

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

Obtenez la position de lecture actuelle en secondes.

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

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

toggleFullScreen

Activer ou désactiver le plein écran.

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

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

getPlaybackQuality

Obtenir la qualité de lecture actuelle.

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

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

setPlaybackQuality

Définir la qualité de lecture recommandé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

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

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

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

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

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

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

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

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

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

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

getIframe

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

addEventListener

Ajoutez un écouteur d'événement 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);
  },
});

removeEventListener

Supprimez l'écouteur d'événement 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

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

Source de vérité

Cette page est générée à partir du plugin’s src/definitions.tsRe-run la synchronisation lorsque les modifications publiques API se produisent en amont.

Continuez de la section « Démarrage »

Si vous utilisez Démarrage pour planifier le tableau de bord et les opérations API, connectez-l’avec En utilisant @capgo/capacitor-youtube-player pour la capacité native dans Utiliser @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.