Incorpora Owncast nel tuo sito web

Incorporazione video

Owncast supporta l'incorporamento del tuo flusso video direttamente in qualsiasi altro sito web o fonte senza dover configurare un lettore.

L'URL video-only per il tuo contenuto del flusso è: http://owncast.example.com/embed/video.

Ecco un esempio di HTML che puoi utilizzare.

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

Sarà simile a:

Riproduzione automatica

Se l'incorporamento di un video inizia a riprodursi automaticamente dipende dalle impostazioni di autoplay del tuo server. Puoi sovrascriverlo per un singolo incorporamento aggiungendo ?autoplay= all'URL con uno di off, always o sound-only. Un valore non riconosciuto torna all'impostazione del server.

La maggior parte dei browser blocca l'autoplay all'interno di un iframe su un altro sito a meno che la pagina di incorporamento non conceda il permesso con l'attributo allow:

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

Disattivazione dell'audio

Se desideri che il lettore sia disattivato all'inizio della riproduzione, aggiungi ?initiallyMuted=true all'URL. Gli spettatori possono comunque riattivare manualmente l'audio. Combina i parametri con &, ad esempio ?autoplay=always&initiallyMuted=true.

Un'interazione di cui tenere conto: sound-only non inizia mai in silenzio, quindi combinandolo con initiallyMuted=true significa che il lettore non riprodurrà affatto.

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.

Personalizzazione dello stile del flusso incorporato

Puoi facilmente personalizzare lo stile del flusso incorporato di Owncast per adattarlo al design del tuo sito web applicando stili CSS. Ecco come puoi farlo:

Crea un file CSS: Per prima cosa, crea un file CSS (ad es., stream-styles.css) in cui definirai i tuoi stili personalizzati.
Collega il file CSS: Nella sezione <head> del tuo documento HTML, dove incorpori il flusso Owncast, aggiungi un tag <link> per includere il tuo file CSS. Assicurati di aggiungere questa riga prima del tag di chiusura </head>:
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
Sostituisci "path/to/stream-styles.css" con il percorso reale del tuo file CSS.

Applica stili: Personalizza gli stili nel tuo file stream-styles.css secondo le tue preferenze. Puoi indirizzare l'elemento \<iframe> utilizzando i selettori CSS, come mostrato nell'esempio qui sotto:

/* 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 */
}

Personalizza secondo le tue necessità: Regola i valori sopra per adattarli al design e al layout del tuo sito web.

Il flusso incorporato è una pagina separata caricata dal tuo server Owncast, quindi il CSS del tuo sito può solo stilizzare il box \<iframe>, non il contenuto al suo interno. Per cambiare i colori, i font e il layout all'interno del lettore, utilizza le impostazioni di aspetto sul tuo server Owncast.

Seguendo questi passaggi, puoi integrare senza problemi il tuo flusso Owncast nel tuo sito web mantenendo il controllo sull'aspetto visivo.

Utilizzare il feed HLS

Finché il lettore lo supporta, è consigliabile aprire la homepage della tua istanza Owncast direttamente. Il lettore troverà automaticamente la playlist corretta e inizierà a riprodurre. Questo garantirà la compatibilità futura se il modo in cui Owncast pubblica HLS viene mai modificato.

Tuttavia, se hai bisogno del feed HLS (ad es. per condividere il tuo flusso con un lettore di terze parti), puoi accedere al feed HLS direttamente tramite questo URL: http://your.host/hls/stream.m3u8.

Incorporamento chat

Owncast supporta l'incorporamento della tua chat direttamente in qualsiasi altro sito web o fonte.

Ci sono due tipi di chat incorporate: una chat in sola lettura che mostra solo i messaggi e una chat autonoma che ha la stessa funzionalità di quella all'interno dell'interfaccia web principale di Owncast.

Incorporamento chat autonoma

L'URL della chat autonoma si trova su: 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>

Sarà simile a:

Incorpora Owncast

Incorporamento chat in sola lettura

L'URL della chat in sola lettura si trova su: 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 comune della chat in sola lettura è aggiungere i messaggi della chat al tuo software di streaming, come un livello web in OBS.

Usare OBS

Fai clic sul + o fai clic con il tasto destro per aggiungere una nuova fonte. Scegli Browser dall'elenco.
Per una nuova fonte, dovrai aggiungere il nome. Digita "Chat".
Nelle impostazioni della fonte del Browser, dovrai cambiare l'URL al tuo URL /embed/chat/readonly della tua istanza Owncast.
Puoi utilizzare il Custom CSS per modificare come il browser visualizza il tuo video. Il seguente esempio aggiungerà un po' di spazio attorno al box, darà uno sfondo scuro semitrasparente e aumenta la dimensione del font complessiva a un'unità base di 24px. Puoi cambiare tutte queste impostazioni per adattarle al layout della tua presentazione. Nota che il colore del testo complessivo dei messaggi è bianco.
```
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);
}
```
Fai clic su 'OK' per salvare le impostazioni della chat e riposizionare la nuova fonte di chat nella tua scena.

Requisiti SSL

I contenuti Owncast incorporati che non vengono serviti tramite HTTPS all'interno di una pagina che utilizza SSL/TLS vengono bloccati dai browser. Scopri come puoi utilizzare un proxy SSL per soddisfare questo requisito del browser e proteggere il tuo sito Owncast.