YouTube ストリーミング
寺子屋
資料ダウンロード
お問い合わせ

ストリーミング寺子屋

音声・動画のストリーミング機能を
開発するエンジニアのための
実践的なナレッジベース

ストリーミング寺子屋 TOPに戻る

【Streaming-9】Webブラウザでストリーミングを再生する手法を教えて下さい。

HTMLの<video>タグを利用する方法が代表的

Webブラウザでストリーミングを再生するには、配信サーバからWebブラウザで再生可能な方式で配信することで実現可能です。代表的な手法としてHTMLの<video>タグを利用する方法があります。
<video>タグに動画ファイル(ts / mp4)を指定することで、比較的容易にWebブラウザ上で動画再生が可能です。

<video>タグを利用する主な方法は２つ

<video>タグを利用するHTTPベースのストリーミングの代表的な方法には、以下の2つがあります。

  1. HLSを使う
    HLSは数十秒程度にセグメント化した動画データ(tsファイル)群と、そのセグメント動画ファイルの場所と再生順序などを記述したプレイリストファイル(m3u8)を用意することで、HTTPベースのストリーミングを行います。
    イメージを下図に示します。
    オンデマンド(VOD)で利用されるケースが多いですが、ライブ配信で利用することは可能です。ただし、セグメント動画ファイルは、細かく分割したとしても数十秒のデータセグメントで あり、再生に数十秒の遅延が発生します。
  1. MPEG-DASHを使う
    MPEG-DASHもHLSと同様で 動画のセグメントファイルとプレイリストを用意します。
    違いとしてはMPEG-DASH ではセグメントファイルをfragmented mp4 もしくは ts 形式で、プレイリストを MPD（Media Presentation Description）と呼ばれる XML で記述します。
    MPEG-DASHを使用する場合においても、HLSと同様にライブ配信で利用する場合、数十秒単位での遅延が発生します。その他のHLSとMPEG-DASHの主な違いは下表の通りです

そのほかのHLSとMPEG-DASHの主な違いは下表の通りです。

HLSMPEG-DASH
エンコードフォーマットH.264/H.265任意
Apple製品への対応〇×

<video>タグを使わないで再生する方法

<video>タグを利用せずにHTTPベースでのWebブラウザーによるストリーミング再生を行う場合でも、リアルタイム性(低遅延)を重要視しRTSPストリーミングを行うことが一般的ですが、WEBサーバーとRTSPサーバーの他、Webブラウザー側にRTSP/RTPを受信して動画再生させる仕組みが必要となります。
その一手法として、WebsocketプロトコルとMedia Source Extension(MSE)を利用する方法があります。この方法では、Webscoket 上にRTSP/RTPストリームをカプセル化して乗せて、受信側となるWebブラウザー側で受信データを再構築し、MSEを使用して再生するという高度な処理の実装が必要です。

ストリーミング寺子屋 TOPに戻る

Q&A

キーワード検索

製品情報