将 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>

它看起来像这样：

自动播放

嵌入的视频是否自动播放取决于您的服务器的自动播放设置。您可以通过在 URL 后附加 ?autoplay= 来为单个嵌入进行覆盖，使用 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>

静音

如果您希望播放器在开始播放后静音，请在 URL 后附加 ?initiallyMuted=true。观众仍然可以手动取消静音。使用 & 组合参数，例如 ?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 文件： 在您嵌入 Owncast 流的 HTML 文档中的 <head> 部分，添加一个 <link> 标签以包含您的 CSS 文件。确保在结束 </head> 标签之前添加这一行：
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
将 "path/to/stream-styles.css" 替换为您的 CSS 文件的实际路径。

应用样式： 根据您的喜好自定义 stream-styles.css 文件中的样式。您可以使用 CSS 选择器来定位 \<iframe> 元素，如下例所示：

/* 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 源（即为了将您的流共享到第三方播放器），您可以通过此 URL 直接访问 HLS 源： 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

单击 + 或右键单击以添加新源。从列表中选择 浏览器。
对于新源，您需要添加名称。输入 "Chat"。
在浏览器源设置中，您需要将 URL 更改为您 Owncast 实例的 /embed/chat/readonly URL。
您可以使用 自定义 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);
}
```
单击‘确定’以保存您的聊天设置，并在场景中重新定位新的聊天源。