Inicio
Copie un prompt de configuración con los pasos de instalación y la guía de markdown completa para este 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.
Instalar
Sección titulada “Instalar”bun add @capgo/capacitor-youtube-playerbunx cap syncImportar
Sección titulada “Importar”import { YoutubePlayer } from '@capgo/capacitor-youtube-player';API Resumen
Sección titulada “API Resumen”initialize
Sección titulada “inicializar”Inicialice una nueva instancia del reproductor de YouTube.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.initialize({ playerId: 'my-player', videoId: 'dQw4w9WgXcQ', playerSize: { width: 640, height: 360 }, privacyEnhanced: true});destroy
Sección titulada “destruir”Destruya una instancia del reproductor y libere recursos.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.destroy({} as PlayerIdOptions);stopVideo
Sección titulada “detenerVideo”Detener la reproducción de video y cancelar la carga. Use esto con moderación - pauseVideo() es preferible en la mayoría de los casos.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);playVideo
Sección titulada “reproducirVideo”Reproducir el video actualmente programado o cargado. El estado final del reproductor será REPRODUCIENDO (1).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);pauseVideo
Sección titulada “pausaVideo”Pausa el video que está reproduciendo actualmente. El estado final del reproductor será PAUSADO (2), a menos que ya haya FINALIZADO (0).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);Buscar en un momento específico del video. Si el reproductor está pausado, permanece pausado. Si está reproduciendo, continúa reproduciendo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
Sección titulada “cargarVideoPorId”Cargar y reproducir un video por su ID de YouTube.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);cueVideoById
Sección titulada “marcarVideoPorId”Marcar un video por ID sin reproducirlo. Carga la miniatura y prepara el reproductor, pero no solicita el video hasta que se llame playVideo().
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);loadVideoByUrl
Sección titulada “cargarVideoPorUrl”Cargar y reproducir un video según su URL completa.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
Sección titulada “marcarVideoPorUrl”Marcar un video según su URL sin reproducirlo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Sección titulada “marcarReproducción”Marcar una reproducción sin reproducirla. Cargar lista de reproducción y preparar primer video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Sección titulada “cargarReproducción”Cargar y reproducir una lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
Sección titulada “nextVideo”Reproducir el próximo video en la lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
Sección titulada “previousVideo”Reproducir el video anterior en la lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
Sección titulada “playVideoAt”Reproducir un video específico en la lista de reproducción por índice.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);Silenciar el audio del reproductor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);Desactivar el sonido del reproductor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);isMuted
Sección titulada “isMuted”Verificar si el reproductor está actualmente desactivado.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);Copiar a portapapeles
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Copiar a portapapelesSección titulada “setVolume”
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);setSize
Sección titulada “setSize”Establece las dimensiones del jugador en píxeles.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Sección titulada “getPlaybackRate”Obtén la velocidad de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
Establece la velocidad de reproducción.Copiar a portapapeles
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
Obtén la lista de velocidades de reproducción disponibles para el video actual.Copiar a portapapeles
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);setLoop
Sección titulada “setLoop”Habilitar o deshabilitar el bucle de reproducción de playlist. Cuando está habilitado, la playlist se reiniciará desde el principio después del último video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
Sección titulada “setShuffle”Habilitar o deshabilitar el modo aleatorio de playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Sección titulada “getVideoLoadedFraction”Obtener la fracción del video que ha sido cargado. Más confiable que los métodos deprecated getVideoBytesLoaded/getVideoBytesTotal.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
Sección titulada “getPlayerState”Obtener el estado actual del reproductor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
Sección titulada “getAllPlayersEventsState”Obtén estados de eventos para todos los jugadores activos. Útil para seguir múltiples instancias de jugadores.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();getCurrentTime
Sección titulada “getCurrentTime”Obtén la posición de reproducción actual en segundos.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);toggleFullScreen
Sección titulada “toggleFullScreen”Alternar modo pantalla completa en o fuera.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Sección titulada “getPlaybackQuality”Obtén la calidad de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Sección titulada “setPlaybackQuality”Establece la calidad de reproducción sugerida. La calidad real puede variar según las condiciones de la red.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);getAvailableQualityLevels
Sección titulada “getAvailableQualityLevels”Obtenga la lista de niveles de calidad disponibles para el video actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);getDuration
Sección titulada “getDuration”Obtenga la duración del video actual en segundos.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);getVideoUrl
Sección titulada “getVideoUrl”Obtenga la URL de YouTube.com para el video actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);getVideoEmbedCode
Sección titulada “getVideoEmbedCode”Obtenga el código de embeber code actual para el video actual. Devuelve el código HTML iframe de embeber code.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);getPlaylist
Sección titulada “getPlaylist”Obtenga un array de IDs de video en la lista de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);getPlaylistIndex
Sección titulada “getPlaylistIndex”Obtenga el índice del video que se está reproduciendo actualmente en la lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);getIframe
Sección titulada “getIframe”Obtenga el elemento DOM iframe del reproductor. Solo plataforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
Sección titulada “addEventListener”Agregar un escuchador de eventos al jugador. Solo plataforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
YoutubePlayer.addEventListener({ playerId: 'my-player', eventName: 'onStateChange', listener: (event) => { console.log('Player state:', event.data); },});removeEventListener
Sección titulada “removeEventListener”Quitar un escuchador de eventos del jugador. Solo plataforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);Referencia de tipos
Sección titulada “Referencia de tipos”PlayerIdOptions
Sección titulada “Opciones de PlayerId”export interface PlayerIdOptions { playerId: string;}SeekToOptions
Sección titulada “Opciones de SeekTo”export interface SeekToOptions extends PlayerIdOptions { playerId: string; seconds: number; allowSeekAhead: boolean;}VideoByIdMethodOptions
Sección titulada “VideoByIdMethodOptions”export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Sección titulada “VideoByUrlMethodOptions”export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Sección titulada “PlaylistMethodOptions”export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Sección titulada “PlayVideoAtOptions”export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Sección titulada “SetVolumeOptions”export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Sección titulada “SetSizeOptions”export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Sección titulada “Opciones de reproducción con velocidad de reproducción”export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Sección titulada “Opciones de bucle”export interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
Sección titulada “Opciones de mezcla aleatoria”export interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
Sección titulada “Opciones de alternar pantalla completa”export interface ToggleFullScreenOptions extends PlayerIdOptions { playerId: string; isFullScreen: boolean | null | undefined;}Fuente de verdad
Sección titulada “Fuente de verdad”Esta página se genera a partir del plugin’s src/definitions.ts. Re-ejecuta la sincronización cuando el API público cambie en la fuente.