M3U8 ストリームを埋め込む方法
- 1
M3U8 URL を貼り付けます
上のフィールドに埋め込みたい .m3u8 ストリーム URL を入力します。
- 2
オプションを選択してください
自動再生 (ミュート)、ミュート開始、および応答性の高い 16:9 または固定サイズを選択します。
- 3
埋め込みコードをコピーする
生成された <iframe> スニペットをコピーします。
- 4
あなたのサイトに貼り付けてください
生の HTML を許可する HTML ページ、ブログ投稿、または CMS にスニペットをドロップします。
埋め込みプレーヤーの仕組み
埋め込みコードは、hls.js をロードしてストリームを再生する専用の最小限のプレーヤー ページを <iframe> で指します。メイン サイトから独立しているため、軽量であり、ナビゲーションや追加の UI はありません。プレーヤーは視聴者のデバイス上で実行され、ストリームはブラウザーによって直接取得されるため、何もプロキシしたり再ホストしたりすることはありません。
デフォルトでレスポンシブ対応
応答性の高いオプションは、親の幅に合わせてスケールする 16:9 コンテナーで iframe をラップします。これは、ほとんどの記事やページで必要なものです。固定サイズは、サイドバー内や固定幅レイアウトなど、正確なサイズが必要な場合にのみ選択してください。
ストリームが埋め込まれない場合
埋め込みプレーヤーは、ビューアのブラウザがロードを許可されているストリームのみを表示できます。ストリームがクロスオリジン (CORS) アクセスをブロックするか、カスタム Referer を必要とする場合、プロキシが有効になっているメイン プレーヤーで動作しても、iframe 内で失敗する可能性があります。これらのストリームについては、最初に完全なプレーヤーでテストしてください。
よくある質問
M3U8 の埋め込みは無料ですか?
はい。埋め込みコードの生成と使用はサインアップなしで完全に無料で、プレーヤーには広告が表示されません。
自分のサイトにスクリプトを追加する必要がありますか?
いいえ。<iframe> を貼り付けるだけです。プレーヤーと hls.js は埋め込みページから iframe 内に読み込まれるため、サイトには他に何も必要ありません。
埋め込みストリームを自動再生できますか?
はい、ただしブラウザではビデオがミュートされている場合にのみ自動再生が許可されるため、自動再生オプションを使用するとプレーヤーはミュート状態で開始されます。
私のストリームはメイン プレーヤーでは再生されるが、埋め込みプレーヤーでは再生されないのはなぜですか?
埋め込みは、ビューアのブラウザでストリームを直接再生します。ストリームが CORS プロキシまたはカスタム Referer を必要とする場合、プレーン iframe では失敗する可能性があります。まずはフルプレーヤーでテストしてください。