El reproductor no es una caja negra.Es código que tú controlas.
Un iframe reproduce el video y se queda ahí. El SDK del reproductor abre la caja: tu código manda reproducir, pausar y saltar, escucha cada evento de lo que hace el espectador y lee el estado en cualquier momento. Web en JavaScript, nativo en Expo / React Native, el mismo reproductor volviéndose pieza de tu producto en ambos.
El iframe entrega el video.La experiencia alrededor, no te deja tocarla.
En la app, el reproductor es parte del producto, y el usuario lo cobra caro. Ante una mala experiencia de app, el 34% se cambia a la competencia (Compuware, 3.534 consumidores). Cuando tu reproductor es una caja cerrada, es tu experiencia la que queda rehén de ella.
Sin el SDK, te quedas con los controles que vinieron en el iframe y la posición que él decidió. ¿Quieres un botón tuyo, una barra tuya, un siguiente paso al final de la clase? No hay por dónde. La experiencia alrededor del video es de la caja, no de tu producto.
Cómo lo resuelve el SDKEl espectador dio play, saltó, llegó al final. Todo eso ocurre dentro del iframe y no llega a tu código. Sin los eventos, no sincronizas tu interfaz, no disparas el siguiente paso y te quedas adivinando qué pasó en la pantalla.
Cómo lo resuelve el SDKEnvolver un iframe en una webview y llamarlo app nativa, el usuario lo nota en el primer scroll. En la app la vara es otra, y el castigo es inmediato: la experiencia se traba, y la persona se va a la siguiente.
Cómo lo resuelve el SDKEl reproductor se vuelve tuyo.En los dos lados.
El SDK del reproductor le da a tu código tres cosas: comandar la reproducción, escuchar cada evento y leer el estado cuando lo necesites. En web es window.Moviie; en nativo es @moviie/player-expo. Los nombres cambian, el contrato es el mismo, y el reproductor pasa a obedecer a tu producto.
Tu código dirige el reproductor. Play, pause, seek.
Toma el reproductor y mándalo reproducir, pausar, saltar a un punto, cambiar la velocidad, entrar en pantalla completa. En el sitio, por window.Moviie; en la app, por el reproductor de useMoviiePlayer. Tu botón queda al mando, no el que vino en el control por defecto.
- play, pause y seek desde tu código
- Saltar a cualquier segundo
- Velocidad, volumen y pantalla completa
- La misma intención en web y en nativo
El reproductor avisa a tu UI. En tiempo real.
Suscríbete a ready, play, pause, timeupdate, ended y mantén tu interfaz en sincronía con lo que hace el espectador. Pinta la barra en timeupdate, abre el siguiente paso en ended, registra lo que quieras. getState() te da la foto completa del reproductor en cualquier momento.
- on / once / off para suscribir eventos
- ready, play, pause, timeupdate, ended
- getState() para el estado completo
- Sincroniza tu UI con el reproductor
En la app, es componente nativo. No webview.
@moviie/player-expo corre sobre expo-video, con reproductor nativo de verdad en Expo y React Native, no un iframe envuelto. MoviieProvider arriba, useMoviiePlayer en la pantalla, MoviieVideo renderizando. Funciones nativas como Picture-in-Picture y Cast entran por la misma puerta.
- Reproductor nativo sobre expo-video
- MoviieProvider + useMoviiePlayer + MoviieVideo
- Picture-in-Picture y Cast
- Clave publicable mvi_pub_, la secreta se queda en el servidor
El iframe solo,o el iframe con el SDK.
El mismo reproductor. La diferencia es quién manda en él y cuánto ve tu código.
| Solo el iframe | Con el SDK | |
|---|---|---|
| Controlar play, pause y seek | por el control por defecto | por tu código |
| Eventos en tu UI | no llegan | ready, play, timeupdate, ended |
| Leer el estado del reproductor | no se puede | getState() a cualquier hora |
| En la app nativa | webview | componente sobre expo-video |
| Sincronizar tu interfaz | adivinando | en tiempo real |
| Picture-in-Picture y Cast | fuera de tu alcance | por el mismo SDK |
El video, los dos lo reproducen igual. El control, solo uno te lo da.
Un SDK.La plataforma entera por detrás.
Documentación de verdad
Cada método, evento y propiedad en la doc, con ejemplos que corren. No es un PDF de 2019: es docs.moviie.ai/player-api y player-expo.
El par en el servidor
El SDK se encarga del cliente; la REST api.moviie.ai/v1 y los webhooks se encargan de los datos. Los dos lados conversan, cada uno en su lugar.
Video privado, bajo tu control
Enlace firmado por un JWT corto, embed bloqueado por dominio. El SDK reproduce donde lo permitiste, y tu backend es quien firma.
Subtítulos y doblaje
Las pistas de subtítulo y de audio llegan en el playback. Tu app las lee y las ofrece, sin que tú armes un reproductor de subtítulos desde cero.
Contrato estable
La API del reproductor está versionada: un cambio que rompe solo entra en un cambio de versión mayor. Tu código no amanece roto.
Arranca rápido
El primer frame aparece casi en el clic, entregado desde la red global. Tu código entra en un reproductor que ya es veloz.
Lo que se puede hacery lo que todavía no.
El nativo hoy es por @moviie/player-expo, para Expo y React Native, corriendo sobre expo-video con reproductor nativo de verdad. Un SDK Swift puro para iOS está en desarrollo, y Kotlin para Android viene en la secuencia. El web en JavaScript ya corre en cualquier página.
El embed expone window.Moviie en la página. Tomas el reproductor con Moviie.getPlayer(iframe) y llamas play(), pause(), seek() y los demás métodos. Espera el evento ready antes de comandarlo, y a partir de ahí el reproductor obedece tu código.
El ciclo de reproducción entero: ready, play, pause, timeupdate, ended, entre otros. Te suscribes con on, once y off, y usas getState() para leer la foto completa del reproductor en cualquier momento. Es con eso que tu UI queda en sincronía con el espectador.
No, y es a propósito. El SDK del reproductor corre en el cliente, controla la reproducción y escucha eventos. La REST api.moviie.ai/v1 y los webhooks corren en el servidor, con tu clave secreta, y se encargan de los datos y de los eventos de backend. Quien construye una app seria usa los dos, cada uno en su lado.
Toma una clave.Monta el reproductor en tu app hoy.
14 días de prueba para poner el reproductor dentro de tu producto: control por código, eventos en tu UI, web y nativo. La doc está en docs.moviie.ai, con ejemplos que corren.