Saltar al contenido principal
@capgo/capacitor-youtube-player Multimedia Código abierto

Reproductor de YouTube plugin Capacitor

Incrusta videos de YouTube con control total del reproductor API y gestión de eventos

Instalar

bun add @capgo/capacitor-youtube-player bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-youtube-player
  • pnpm add @capgo/capacitor-youtube-player
  • yarn add @capgo/capacitor-youtube-player

Guía

Cómo usar YouTube Player en Capacitor

Probar en el dispositivo

Descarga la app Capgo y escanea el QR code.

Vista previa QR del plugin YouTube Player code

Usando @capgo/capacitor-youtube-player

Plugin de YouTube Player para Capacitor. Ofrece métodos para controlar la reproducción de videos de YouTube en tu app.

Instalar

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

Lo que expone este plugin

  • initialize - Inicializa una nueva instancia del reproductor de YouTube.
  • destroy - Destruye una instancia del reproductor y libera recursos.
  • stopVideo - Detiene la reproducción y cancela la carga. Úsalo con moderación; suele ser mejor usar pauseVideo().
  • playVideo - Reproduce el video en cola o cargado. El estado final del reproductor será PLAYING (1).

Parche del Referer en la WebView principal

Activar patchRefererHeader cuando el contenido de YouTube funciona en el plugin pero falla desde la WebView principal de Capacitor porque YouTube espera un Referer header.

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

El parche solo se aplica a youtube.com, youtube-nocookie.com, y youtu.be peticiones. Los headers existentes a Referer nivel de petición se preservan, y refererHeader por defecto es https://www.youtube.com cuando se omiten.

Ejemplo de uso

initialize

Inicializa 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

Destruye una instancia del reproductor y libera recursos.

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

const result = await YoutubePlayer.destroy({ playerId: 'player-id-123' });
console.log(result);

stopVideo

Detiene la reproducción y cancela la carga. Úsalo con moderación; normalmente es mejor pauseVideo().

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

const result = await YoutubePlayer.stopVideo({ playerId: 'player-id-123' });
console.log(result);

playVideo

Reproduce el video actualmente en cola o cargado. El estado final del reproductor será PLAYING (1).

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

const result = await YoutubePlayer.playVideo({ playerId: 'player-id-123' });
console.log(result);

Referencia completa

Continuar desde Usando @capgo/capacitor-youtube-player

Si estás usando Usando @capgo/capacitor-youtube-player para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con @capgo/capacitor-youtube-player para los detalles de implementación en @capgo/capacitor-youtube-player, Primeros pasos para los detalles de implementación en Primeros pasos, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities, y Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player.

FAQ

FAQ del plugin YouTube Player

¿Cómo instalo el plugin YouTube Player en una app Capacitor?

Ejecuta "bun add @capgo/capacitor-youtube-player" (o "npm install @capgo/capacitor-youtube-player"), luego ejecuta "bunx cap sync" para que los proyectos de iOS y Android reconozcan el code nativo. Impórtalo desde "@capgo/capacitor-youtube-player" en tu code.

¿Funciona @capgo/capacitor-youtube-player con React, Vue y Angular?

Sí. YouTube Player es un paquete Capacitor, por lo que funciona con cualquier framework web que se ejecute en Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor es compatible con @capgo/capacitor-youtube-player?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-youtube-player gratuito y de código abierto?

Sí. El código fuente de code es público en GitHub en https://github.com/Cap-go/capacitor-youtube-player/ y el paquete se puede instalar gratis desde npm. Los reportes de bugs y pull requests son bienvenidos.

¿Puedo actualizar code que usa YouTube Player sin pasar por la revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios de JavaScript, HTML y CSS que llamen al plugin se pueden publicar al instante con las live updates de Capgo.

Lanza cambios en YouTube Player sin esperar la revisión de la app

Una vez que el plugin esté en tu store build, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo