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.
Configuración
Preparado para pegarbun 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”Iniciar 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”Destruir una instancia del reproductor y liberar 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. Utilice esto con moderación - pauseVideo() es preferible en general.
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 “pausarVideo”Pausar el video que se está reproduciendo. 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 “sincronizarVideoPorId”Sincronizar un video por ID sin reproducirlo. Carga 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 por su URL completa.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
Sección titulada “sincronizarVideoPorUrl”Sincronizar un video por URL sin reproducirlo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Sección titulada “cuePlaylist”Cuea una lista de reproducción sin reproducirla. Carga la lista de reproducción y prepara el primer video.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Sección titulada “loadPlaylist”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 siguiente video de 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 de la lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
Sección titulada “playVideoAt”Reproduce 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 audio 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 silenciado.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);setVolume
Sección titulada “setVolume”Establece el nivel de volumen del reproductor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Sección titulada “getVolume”Obtenga el nivel de volumen actual del reproductor. Devuelve el volumen incluso si el reproductor está silenciado.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);setSize
Sección titulada “setSize”Establece las dimensiones del reproductor en píxeles.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Sección titulada “getPlaybackRate”Obtenga la velocidad de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
Sección titulada “setPlaybackRate”Establecer la velocidad de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
Sección titulada “getAvailablePlaybackRates”Obtener lista de velocidades de reproducción disponibles para el video actual.
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 mezcla aleatoria de la playlist.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Sección titulada “getVideoLoadedFraction”Obtenga la fracción del video que se ha cargado. Más confiable que la función deprecada getVideoBytesLoaded/getVideoBytesTotal.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
Sección titulada “getPlayerState”Obtenga el estado actual del jugador.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
Sección titulada “getAllPlayersEventsState”Obtenga 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”Obtenga 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”Activar o desactivar el modo pantalla completa.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Sección titulada “getPlaybackQuality”Obtener la calidad de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Sección titulada “setPlaybackQuality”Establecer 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”Obtener 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 para el video actual. Devuelve un código de iframe HTML 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 “obtener índice de lista de reproducción”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 “obtener iframe”Obtenga el elemento DOM iframe para el reproductor. Solo plataforma web.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
Sección titulada “añadir escuchador de eventos”Añada un escuchador de eventos al reproductor. 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 “eliminar escuchador de eventos”Elimine un escuchador de eventos del reproductor. 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 “Opciones del método de video por ID”export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Sección titulada “Opciones del método de video por URL”export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Sección titulada “Opciones del método de lista de reproducción”export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Sección titulada “Reproducir video con opciones”export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Sección titulada “Establecer volumen con opciones”export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Sección titulada “Establecer tamaño con opciones”export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Sección titulada “Establecer velocidad de reproducción con opciones”export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Sección titulada “Establecer repetición con opciones”export interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
Sección titulada “Establecer mezcla aleatoria con opciones”export interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
Sección titulada “Opciones de 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.tsRe-ejecutar la sincronización cuando el público API cambie en la fuente
Sigue adelante desde Getting Started
Sección titulada “Sigue adelante desde Getting Started”Si estás utilizando Getting Started para planificar la consola y API operaciones, conecta con Usando @capgo/capacitor-reproductor-de-youtube para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-youtube API Resumen para el detalle de implementación en API Resumen Introducción para el detalle de implementación en Introducción API Claves para el detalle de implementación en API Claves, y Dispositivos para el detalle de implementación en Dispositivos.