Lleva el reproductor a tu aplicación

Orilla ofrece reproducción HLS adaptativa mediante un reproductor compartido entre el panel, React, el elemento HTML y el iframe alojado. El acceso al contenido depende de la política pública o firmada del playback ID.

Iframe: empieza desde el panel

Para una web que no necesita controlar el reproductor desde código, abre Compartir e insertar en un asset listo y copia el iframe. El panel permite ajustar reproducción automática, silencio, bucle y punto de inicio.

Ejemplo de estructura; sustituye el dominio y el playback ID por los de tu instalación:

<iframe
  src="https://video.example/embed/PLAYBACK_ID"
  title="Título del video"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
  style="width:100%;aspect-ratio:16/9;border:0"
></iframe>

Este ejemplo presupone un playback ID público. Para uno firmado, utiliza la URL autorizada que genere tu backend o el panel, con sus credenciales temporales. El iframe no convierte contenido privado en público.

El mismo cuadro permite compartir un fragmento con bordes por segmento. Un temporal puede limitar el acceso a la ventana; la query de un enlace público no impide recuperar el video completo.

React

El paquete también se distribuye localmente. Desde el repositorio:

pnpm build:player
pnpm check:player

Desde la aplicación consumidora, instala /ruta/al/repositorio/dist/player. React 19 es una dependencia peer de la variante React.

import { OrillaPlayer } from "@orilla/player";
import "@orilla/player/style.css";

export function Video() {
  return (
    <OrillaPlayer
      descriptor={{
        playbackId: "PLAYBACK_ID",
        url: "https://video.example/stream/PLAYBACK_ID.m3u8",
        posterUrl: "https://video.example/image/PLAYBACK_ID/thumbnail.jpg",
      }}
    />
  );
}

El ejemplo usa reproducción pública. Para URLs temporales, el descriptor admite expiresAt y el componente admite renew, una función estable que obtiene nuevos enlaces desde tu backend y actualiza el descriptor. Conserva el playback ID mientras renuevas el mismo contenido.

HTML e idiomas

La variante <orilla-player> aísla sus estilos en Shadow DOM. El paquete generado incluye la entrada del elemento, estilos y declaraciones; consulta packages/player/README.md para cargarla y configurar sus propiedades.

La plataforma admite subtítulos SRT/WebVTT, capítulos WebVTT y pistas de audio en varios idiomas. La disponibilidad de cada opción depende de los recursos listos del asset. Para fuentes de solo audio, no se añade una pista de video artificial.

Añade archivos SRT/WebVTT o audio con las subidas de pistas. Una pista se procesa independientemente; espera a que esté lista para verla en el menú.

Comportamiento y compatibilidad

• La calidad automática se adapta a las versiones disponibles. La selección manual depende del adaptador y del navegador.
• La reproducción automática suele requerir silencio y depende de las políticas del navegador.
• Los enlaces temporales de un iframe pegado en otra página no se renuevan automáticamente.
• La verificación del proyecto cubre Chromium; Safari, Firefox y dispositivos físicos requieren validación adicional.
• No se incluyen DRM ni video en directo.