Встраивание Owncast в ваш сайт

Встраивание видео

Owncast поддерживает встраивание вашего видеопотока прямо на любой другой веб-сайт или источник, не требуя настройки плеера.

URL для вашего видеопотока выглядит как: http://owncast.example.com/embed/video.

Вот пример HTML, который вы можете использовать.

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

Это будет выглядеть примерно так:

Автовоспроизведение

То, будет ли встроенное видео воспроизводиться автоматически, зависит от настройки автовоспроизведения вашего сервера. Вы можете переопределить это для одной встраивания, добавив ?autoplay= к URL с одним из вариантов off, always или sound-only. Неподдерживаемое значение будет принимать значение настройки сервера.

Большинство браузеров блокируют автовоспроизведение внутри iframe на другом сайте, если встраиваемая страница не предоставляет разрешение с помощью атрибута allow:

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

Без звука

Если вы хотите, чтобы плеер был беззвук сразу после начала воспроизведения, добавьте ?initiallyMuted=true к URL. Зрители все равно могут вручную включить звук. Объединяйте параметры с помощю &, например ?autoplay=always&initiallyMuted=true.

Одно важное взаимодействие: sound-only никогда не начинает воспроизводиться без звука, поэтому комбинация его с initiallyMuted=true означает, что плеер вообще не будет воспроизводиться автоматически.

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.

Настройка внешнего вида встроенного потока

Вы можете легко настроить внешний вид встроенного потока Owncast, чтобы он соответствовал дизайну вашего сайта, применив стили CSS. Вот как вы можете это сделать:

Создать CSS файл: Сначала создайте CSS файл (например, stream-styles.css), где вы определите ваши пользовательские стили.
Ссылка на CSS файл: В разделе <head> вашего HTML-документа, где вы встраиваете поток Owncast, добавьте тег <link>, чтобы включить ваш CSS файл. Не забудьте добавить эту строку перед закрывающим тегом </head>:
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
Замените "path/to/stream-styles.css" на фактический путь к вашему CSS файлу.

Примените стили: Настройте стили в вашем файле stream-styles.css в соответствии с вашими предпочтениями. Вы можете стилизовать элемент \<iframe> с помощью селекторов CSS, как показано в примере ниже:

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

Настройте под свои нужды: Отрегулируйте значения выше, чтобы они соответствовали дизайну и компоновке вашего сайта.

Встроенный поток - это отдельная страница, загружаемая с вашего сервера Owncast, поэтому CSS вашего сайта может стилизовать только сам блок \<iframe>, а не содержимое внутри него. Чтобы изменить цвета, шрифты и компоновку внутри плеера, используйте настройки внешнего вида на вашем сервере Owncast.

Следуя этим шагам, вы можете без проблем интегрировать поток Owncast в ваш сайт, сохраняя контроль над его визуальным оформлением.

Использование HLS потока

Пока плеер поддерживает это, рекомендуется напрямую открывать домашнюю страницу вашего инстанса Owncast. Плеер автоматически найдет правильный плейлист и начнет воспроизводить. Это гарантирует обратную совместимость, если когда-либо изменится способ, которым Owncast публикует HLS.

Тем не менее, если вам нужен HLS поток (например, для передачи вашего потока стороннему плееру), вы можете получить доступ к HLS потоку напрямую по этому URL: http://your.host/hls/stream.m3u8.

Встраивание чата

Owncast поддерживает встраивание вашего чата прямо на любой другой веб-сайт или источник.

Существует два типа встроенных чатов: чат только для чтения, который лишь отображает сообщения, и автономный чат, который имеет такую же функциональность, как и в основном веб-интерфейсе Owncast.

Встраивание автономного чата

URL автономного чата находится по адресу: 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>

Это будет выглядеть примерно так:

Встраивание Owncast

Встраивание чата только для чтения

URL чата только для чтения находится по адресу: 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>

Одним из распространенных способов использования чата только для чтения является добавление сообщений чата в ваше программное обеспечение для трансляции, такое как веб-слой в OBS.

Использование OBS

Нажмите + или правую кнопку мыши, чтобы добавить новый источник. Выберите Браузер из списка.
Для нового источника вам нужно будет ввести имя. Введите "Чат".
В настройках источника браузера вам нужно будет изменить URL на URL вашего экземпляра Owncast /embed/chat/readonly.
Вы можете использовать Пользовательский CSS, чтобы настроить, как браузер показывает ваше видео. Следующий пример добавит немного пространства вокруг блока, придаст ему полупрозрачный темный фон и увеличит общий размер шрифта до базового значения 24px. Вы можете изменить любые из этих параметров, чтобы соответствовать вашему макету презентации. Обратите внимание, что общий цвет текста сообщений белый.
```
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);
}
```
Нажмите «ОК», чтобы сохранить настройки вашего чата и переместите новый источник чата в вашей сцене.

Требования SSL

Встроенный контент Owncast, который не подается через HTTPS на странице, использующей SSL/TLS, блокируется браузерами. Узнайте, как использовать SSL-прокси для выполнения этого требования браузера и защиты вашего сайта Owncast.