videoタグを利用したストリーミング配信について
2020 年 2 月 10 日 月曜日 by egamit■ストリーミング配信の特徴
PCやスマホなどの端末に動画ファイルを保存することなく、動画を見ることができる
⇒逆に動画ファイルを保存して動画を見るのがダウンロード方式
■Http Live Streaming(HLS)
HTTPプロトコルで動画のストリーミング配信ができる技術。Apple社が提唱
・Flashなどのプラグイン不要でHTML5 Videoタグで再生できる
・PC、スマホなど多くのデバイスで対応
■HLSの構成と仕組み
構成
・一定時間ごとに分割した動画ファイル(tsファイル (Appleは10秒ごとに分割することを推奨))
・上記tsファイルをリスト化したインデックスファイル(m3u8ファイル)
仕組み
(1)PCのブラウザ(HTML5 video)やスマホの動画プレーヤはm3u8ファイルをHTTP経由で取得する。
-> 例えば、HTML5 Videoタグのsrc属性にはm3u8ファイルのURLが設定されている
(2)m3u8ファイルの中身にはtsファイルが順番に記載されているため、HTTP経由で記載されている順番で取得する
(3)取得したtsファイルを動画として再生する
(4)次のtsファイルを取得する
■配信の様子を見てみよう
PCブラウザのGoogle Chromeを使うことを前提にして話を進めます。
まず、以下のURLにアクセスします。
https://flowplayer.com/developers/tools/stream-tester?stream=0
そして、キーボードのF12を押して開発ツールを開きます。
そこからNetworkタブをクリックし、XHRでフィルタをします。この時点でm3u8が取得されていると思います。
次に、ページ中ほどにある動画の再生ボタンをクリックします。すると、tsファイルがリストに表示されます。
このようにしてHLSの配信ではtsファイルを順次取得して映像を再生しています。
ここでお気づきの方もいるかと思いますが、開発ツールのリストにはm3u8が2つあります。これはいったいどういうことでしょうか？
まず、playlist.m3u8の中身を見てみましょう。リストをクリックします。
いろいろ書かれていると思いますが、m3u8ファイルが複数記載されていると思います。
これはHLSの特徴であるアダプティブビットレート配信という仕組みなのですが、
視聴する端末のネットワーク帯域に合わせて適切なビットレート(BANDWIDTH)と解像度(RESOLUTION)の動画を選択して再生します。
筆者の環境ではビットレート4Mbps,解像度1920×1080のplaylist_1080.m3u8を選択しました。
そして、playlist_1080.m3u8の中身を見てみると、tsファイルのリストが記載されています。このtsファイルは開発ツールのほうにも表示されています。
ということで、今回はストリーミング配信のHttp Live Streaming(HLS)について簡単ではありますが解説しました。
最後まで閲覧していただきありがとうございました。
