Incrustar Owncast en tu sitio web

Incrustando video

Owncast admite incrustar tu transmisión de video directamente en cualquier otro sitio web o fuente sin necesidad de configurar un reproductor.

La URL solo de video para tu contenido de transmisión está en: http://owncast.example.com/embed/video.

Aquí hay un ejemplo de HTML que puedes usar.

<iframe
  src="https://owncast.example.com/embed/video"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allowfullscreen
>
</iframe>

Se verá algo así:

Autoplay

Si deseas que un video incrustado comience a reproducirse por sí solo, sigue la configuración de autoplay de tu servidor. Puedes anular esto para una única incrustación agregando ?autoplay= a la URL con uno de off, always, o sound-only. Un valor no reconocido se retrocede a la configuración del servidor.

La mayoría de los navegadores bloquean el autoplay dentro de un iframe en otro sitio a menos que la página de incrustación otorgue permiso con el atributo allow:

<iframe
  src="https://owncast.example.com/embed/video?autoplay=always"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allow="autoplay"
  allowfullscreen
>
</iframe>

Silenciar

Si deseas que el reproductor esté en silencio una vez que comience a reproducirse, agrega ?initiallyMuted=true a la URL. Los espectadores aún pueden desactivar el silencio manualmente. Combina parámetros con &, por ejemplo ?autoplay=always&initiallyMuted=true.

Una interacción que debes conocer: sound-only nunca comienza en silencio, así que combinarlo con initiallyMuted=true significa que el reproductor no se reproducirá automáticamente en absoluto.

Hiding the follow button

If your server has social features enabled, the embedded player offers a follow button. Hide it for a single embed by appending ?supportsSocialFollow=false to the URL. Any other value keeps the button.

Personalizando el estilo del flujo integrado

Puedes personalizar fácilmente el estilo del flujo de Owncast incrustado para que coincida con el diseño de tu sitio web aplicando estilos CSS. Así es como puedes hacerlo:

Crea un archivo CSS: Primero, crea un archivo CSS (por ejemplo, stream-styles.css) donde definirás tus estilos personalizados.
Vincula el archivo CSS: En la sección <head> de tu documento HTML donde incrustas el flujo de Owncast, añade una etiqueta <link> para incluir tu archivo CSS. Asegúrate de agregar esta línea antes de la etiqueta de cierre </head>:
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
Reemplaza "path/to/stream-styles.css" con la ruta real a tu archivo CSS.

Aplica estilos: Personaliza los estilos en tu archivo stream-styles.css de acuerdo a tus preferencias. Puedes apuntar al elemento \<iframe> usando selectores CSS, como se muestra en el siguiente ejemplo:

/* Style the embedded stream's iframe box */
iframe[title="Owncast"] {
  border: none; /* Remove the iframe border */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
  border-radius: 10px; /* Rounded corners for a modern look */
  overflow: hidden;
  margin: 0 auto; /* Center the iframe horizontally */
}

Personaliza a tus necesidades: Ajusta los valores anteriores para que coincidan con el diseño y la disposición de tu sitio web.

El flujo incrustado es una página separada cargada desde tu servidor Owncast, por lo que el CSS de tu sitio solo puede estilizar la caja \<iframe> en sí, no el contenido dentro de ella. Para cambiar los colores, fuentes y diseño dentro del reproductor, usa los ajustes de apariencia en tu servidor Owncast en su lugar.

Siguiendo estos pasos, puedes integrar sin problemas tu flujo de Owncast en tu sitio web mientras mantienes control sobre su apariencia visual.

Usando el feed HLS

Mientras el reproductor lo admita, se recomienda abrir la página de inicio de tu instancia de Owncast directamente. El reproductor encontrará automáticamente la lista de reproducción correcta y comenzará a reproducir. Esto garantizará la compatibilidad futura si la forma en que Owncast publica HLS cambia alguna vez.

Sin embargo, si necesitas el feed HLS (es decir, para compartir tu transmisión a un reproductor de terceros), puedes acceder al feed HLS directamente a través de esta URL: http://your.host/hls/stream.m3u8.

Incorporando chat

Owncast admite incrustar tu chat directamente en cualquier otro sitio web o fuente.

Hay dos tipos de chats incrustados: un chat de solo lectura que solo muestra los mensajes y un chat independiente que tiene la misma funcionalidad que el que hay en la interfaz web principal de Owncast.

Incorporando chat independiente

La URL del chat independiente está en: http://owncast.example.com/embed/chat/readwrite. It is the full chat: viewers get a name and can send messages, subject to the same chat rules as your main page.

<iframe
  src="https://owncast.example.com/embed/chat/readwrite"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

Se verá algo así:

Incrustar Owncast

Incorporando chat de solo lectura

La URL del chat de solo lectura está en: http://owncast.example.com/embed/chat/readonly. It shows messages only, with no input for sending them.

<iframe
  src="https://owncast.example.com/embed/chat/readonly"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

Un uso común del chat de solo lectura es agregar los mensajes de chat a tu software de transmisión, como una capa web en OBS.

Usando OBS

Haz clic en + o haz clic con el botón derecho para agregar una nueva fuente. Elige Navegador de la lista.
Para una nueva fuente, deberás agregar el nombre. Escribe "Chat".
En la configuración de la fuente del navegador, deberás cambiar la URL a la URL /embed/chat/readonly de tu instancia de Owncast.
Puedes usar el CSS personalizado para ajustar cómo el navegador muestra tu video. El siguiente ejemplo añadirá un espacio alrededor de la caja, le dará un fondo oscuro semi-transparente y aumentará el tamaño de fuente general a una unidad base de 24px. Puedes cambiar cualquiera de estos ajustes para adaptarlos a la disposición de tu presentación. Ten en cuenta que el color del texto del mensaje en general es blanco.
```
html {
  margin: 0px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 24px;
}

#chat-container {
  background-color: rgba(0, 0, 0, 0.5);
}
```
Haz clic en 'OK' para guardar tu configuración de chat y reposicionar la nueva fuente de chat en tu escena.

Requisitos SSL

El contenido de Owncast incrustado que no se sirve a través de HTTPS dentro de una página que usa SSL/TLS se bloquea por los navegadores. Aprende cómo puedes usar un proxy SSL para cumplir con este requisito del navegador y asegurar tu sitio de Owncast.