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のいずれかで、単一の埋め込みのためにオーバーライドできます。認識されない値はサーバーの設定に戻ります。

ほとんどのブラウザは、埋め込まれたページがallow属性で許可しない限り、他のサイトのiframe内での自動再生をブロックします：

<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>セクションに、CSSファイルを含めるための<link>タグを追加します。この行を</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を介して直接アクセスできます： http://your.host/hls/stream.m3u8。

チャットの埋め込み

Owncastは、チャットを他のウェブサイトやソースに直接埋め込むことをサポートしています。

埋め込みチャットには2種類あります：メッセージのみを表示する読み取り専用チャットと、メインの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 Embed

読み取り専用チャットの埋め込み

読み取り専用チャットの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"と入力します。
ブラウザソースの設定では、あなたの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);
}
```
チャット設定を保存し、新しいチャットソースをシーンに再配置するには、「OK」をクリックしてください。