Iniziare
Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo 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.
Installare
Sezione intitolata âInstallareâPuoi utilizzare la nostra configurazione assistita dall'IA per installare il plugin. Aggiungi le Capgo abilitĂ al tuo strumento di IA utilizzando il seguente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsUsa poi il seguente prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-youtube-player` plugin in my project.Se preferisci l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito:
bun add @capgo/capacitor-youtube-playerbunx cap syncimport { YoutubePlayer } from '@capgo/capacitor-youtube-player';Risolve il blocco del referente YouTube nella WebView principale
Sezione intitolata âRisolve il blocco del referente YouTube nella WebView principaleâSe YouTube funziona all'interno del plugin ma fallisce quando lo stesso app carica pagine, embed o API di YouTube attraverso la WebView principale di Capacitor , abilita patchRefererHeader nella tua configurazione di Capacitor .
When abilitato, il plugin patcha Capacitor durante la sincronizzazione/aggiornamento in modo che le richieste YouTube intercettate includano un valore valido per il Referer Copia nel portapenne
{ "plugins": { "YoutubePlayer": { "patchRefererHeader": true, "refererHeader": "https://www.youtube.com" } }}- , e
youtube.com,youtube-nocookie.comle richieste sono interessate.youtu.beLe richieste che giĂ definiscono un valore per il - header mantengono il loro valore originale.
Refererè facoltativo e si attiva per impostazione predefinita su refererHeaderSostenuto su __CAPGO_KEEP_0__https://www.youtube.com.- Supported on Capacitor
8.x__CAPGO_KEEP_0__ Overview
Supportato su API per le piattaforme iOS e Android installate.
Sezione intitolata âAPI PanoramicaâInizializza un nuovo istanza del player di YouTube.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.initialize({ playerId: 'my-player', videoId: 'dQw4w9WgXcQ', playerSize: { width: 640, height: 360 }, privacyEnhanced: true});Distruggi un'istanza del player e rilascia le risorse.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.destroy({} as PlayerIdOptions);stopVideo
Sezione intitolata âfermaVideoâFerma la riproduzione del video e annulla il caricamento. Usa questo con parsimonia - pauseVideo() è spesso preferito.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);Riproduci il video attualmente caricato o caricato. Lo stato finale del player sarĂ PLAYING (1).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);pauseVideo
Sezione intitolata âpauseVideoâFerma il video in corso. Lo stato finale del lettore sarĂ PAUSED (2), a meno che non sia giĂ ENDED (0).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);Cerca un momento specifico nel video. Se il lettore è in pausa, rimane in pausa. Se sta giocando, continua a giocare.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
Sezione intitolata âloadVideoByIdâCarica e gioca un video dal suo ID di YouTube.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);cueVideoById
Sezione intitolata âcueVideoByIdâCue un video dal suo ID senza giocarlo. Carica la miniatura e prepara il lettore, ma non richiede il video fino a quando non viene chiamata la funzione playVideo().
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);loadVideoByUrl
Sezione intitolata âcaricaVideoByUrlâCarica e riproduci un video tramite la sua URL completa.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
Sezione intitolata âcueVideoByUrlâCue un video tramite URL senza riprodurlo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Sezione intitolata âcuePlaylistâCue una playlist senza riprodurla. Carica playlist e prepara il primo video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Sezione intitolata âcaricaPlaylistâCarica e riproduci una playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
Sezione intitolata ânextVideoâGioca il prossimo video nella playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
Sezione intitolata âpreviousVideoâGioca il video precedente nella playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
Sezione intitolata âplayVideoAtâGioca un video specifico nella playlist tramite indice.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);Muta il player audio.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);Smutisci l'audio del player.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);Verifica se il player è attualmente smorzato.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);setVolume
Sezione intitolata âsetVolumeâImposta il livello di volume del player.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Sezione intitolata âgetVolumeâOttieni il livello di volume attuale del player. Restituisce il volume anche se il player è smorzato.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);Imposta le dimensioni del player in pixel.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Sezione intitolata âgetPlaybackRateâOttieni la velocitĂ di riproduzione corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
Sezione intitolata âsetPlaybackRateâImposta la velocitĂ di riproduzione.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
Sezione intitolata âgetAvailablePlaybackRatesâOttieni l'elenco delle velocitĂ di riproduzione disponibili per il video corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);Abilita o disabilita il loop della playlist. Quando abilitato, la playlist riprenderĂ dall'inizio dopo l'ultimo video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
Sezione intitolata âsetShuffleâAbilita o disabilita lo scambio della playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Sezione intitolata âgetVideoLoadedFractionâOttenere la frazione del video che è stata caricata. PiĂš affidabile rispetto alle funzioni obsolete getVideoBytesLoaded/getVideoBytesTotal.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
Sezione intitolata âgetPlayerStateâOttenere lo stato corrente del player.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
Sezione intitolata âgetAllPlayersEventsStateâOttenere gli stati degli eventi per tutti i giocatori attivi. Utile per tracciare piĂš istanze di giocatore.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();getCurrentTime
Sezione intitolata âgetCurrentTimeâOttenere la posizione di riproduzione corrente in secondi.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);toggleFullScreen
Sezione intitolata âtoggleFullScreenâAlternare il modalitĂ schermo intero su o fuori.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Sezione intitolata âgetPlaybackQualityâOttenere la qualitĂ di riproduzione corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Sezione intitolata âsetPlaybackQualityâImposta la qualitĂ di riproduzione consigliata. La qualitĂ effettiva può differire in base alle condizioni della rete.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);getAvailableQualityLevels
Sezione intitolata âgetAvailableQualityLevelsâOttieni l'elenco delle qualitĂ disponibili per il video corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);getDuration
Sezione intitolata âgetDurationâOttieni la durata del video corrente in secondi.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);getVideoUrl
Sezione intitolata âgetVideoUrlâOttieni l'URL YouTube.com per il video corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);getVideoEmbedCode
Sezione intitolata âgetVideoEmbedCodeâOttieni l'code di immissione per il video corrente. Restituisce l'code HTML iframe di immissione.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);getPlaylist
Sezione intitolata âgetPlaylistâOttieni l'array degli ID dei video nella playlist corrente.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);getPlaylistIndex
Sezione intitolata âgetPlaylistIndexâOttieni l'indice del video corrente che si sta riproducendo nella playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);getIframe
Sezione intitolata âgetIframeâOttieni l'elemento DOM iframe del player. Solo piattaforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
Sezione intitolata âaddEventListenerâAggiungi un ascoltatore di eventi al player. Solo piattaforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
YoutubePlayer.addEventListener({ playerId: 'my-player', eventName: 'onStateChange', listener: (event) => { console.log('Player state:', event.data); },});removeEventListener
Sezione intitolata âremoveEventListenerâRimuovi un ascoltatore di eventi dal player. Solo piattaforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);Riferimento di tipo
Sezione intitolata âRiferimento di tipoâPlayerIdOptions
Sezione intitolata âPlayerIdOptionsâexport interface PlayerIdOptions { playerId: string;}SeekToOptions
Sezione intitolata âSeekToOptionsâexport interface SeekToOptions extends PlayerIdOptions { playerId: string; seconds: number; allowSeekAhead: boolean;}VideoByIdMethodOptions
Sezione intitolata âVideoByIdMethodOptionsâexport interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Sezione intitolata âVideoByUrlMethodOptionsâexport interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Sezione intitolata âPlaylistMethodOptionsâexport interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Sezione intitolata âPlayVideoAtOptionsâexport interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Sezione intitolata âSetVolumeOptionsâexport interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Sezione intitolata âSetSizeOptionsâexport interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Sezione intitolata âSetPlaybackRateOptionsâexport interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Sezione intitolata âSetLoopOptionsâexport interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
Sezione intitolata âSetShuffleOptionsâexport interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
Sezione intitolata âToggleFullScreenOptionsâexport interface ToggleFullScreenOptions extends PlayerIdOptions { playerId: string; isFullScreen: boolean | null | undefined;}Fonte di VeritĂ
Sezione intitolata âFonte di VeritĂ âQuesta pagina è generata dal pluginâs src/definitions.ts. Riavvia la sincronizzazione quando il pubblico API cambia in alto flusso.
Continua da Iniziare
Sezione intitolata âContinua da IniziareâSe stai utilizzando Iniziare per pianificare il dashboard e le operazioni di API, connettilo con Utilizza @capgo/capacitor-youtube-player per la capacitĂ nativa in Utilizza @capgo/capacitor-youtube-player, API Overview per i dettagli di implementazione in API Overview, __CAPGO_KEEP_0__ per i dettagli di implementazione in __CAPGO_KEEP_0__ API Chiavi per i dettagli di implementazione in API Chiavi, e Dispositivi per i dettagli di implementazione in Dispositivi.