Inicio
Copiar una solicitud 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 “Import”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 “pararVideo”Detener la reproducción de video y cancelar la carga.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);playVideo
Copiar a portapapelesSección titulada “playVideo”
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);Copiar a portapapeles
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);Final estado del reproductor será PAUSADO (2), a menos que ya haya TERMINADO (0).
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
Sección titulada “seekTo”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 “cueVideoById”Cue 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 “loadVideoByUrl”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 “cueVideoByUrl”Cue un video por URL sin reproducirlo.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
Sección titulada “cuePlaylist”Crea una lista de reproducción sin reproducirla.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
Sección titulada “cargarLista”Carga y reproduce una lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
Sección titulada “siguienteVideo”Reproduce el siguiente video en la lista de reproducción.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
Sección titulada “videoAnterior”Reproduce 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 “reproducirVideoEn”Reproducir un video específico en la lista 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 silencio del reproductor.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);Verificar si el reproductor está actualmente silenciado.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);Establecer el nivel de volumen del jugador.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
Sección titulada “getVolume”Obtener el nivel de volumen actual del jugador. Devuelve el volumen incluso si el jugador está silenciado.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);setSize
Sección titulada “setSize”Establecer las dimensiones del jugador en píxeles.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
Sección titulada “getPlaybackRate”Obtener 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.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
Copiar a portapapelesSección titulada “setShuffle”
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
Copiar a portapapelesObtenga la fracción del video que se ha cargado. Más confiable que getVideoBytesLoaded/getVideoBytesTotal, que ya no se recomienda.
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 los 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 de pantalla completa.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
Sección titulada “obtener calidad de reproducción”Obtener la calidad de reproducción actual.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
Sección titulada “establecer calidad de reproducción”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 “obtener niveles de calidad disponibles”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 “obtener duración”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 embeber HTML iframe 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 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 “removeEventListener”Quitar 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 VideoById”export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
Sección titulada “Opciones del método VideoByUrl”export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
Sección titulada “Opciones del método Playlist”export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
Sección titulada “Opciones de reproducir video en”export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
Sección titulada “Opciones de volumen”export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
Sección titulada “Opciones de tamaño”export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
Sección titulada “Opciones de velocidad de reproducción”export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
Sección titulada “Opciones de repetición”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 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 desde el plugin’s src/definitions.tsRe-ejecutar la sincronización cuando el público API cambie en la fuente.