タグ

2019年11月15日のブックマーク (2件)

  • ライブ動画配信プロトコル(HTTP Live Streaming, HLS)の概要図解メモ(AbemaTV/FRESH!)

    FRESH!で再生が止まってしまったときに、Chrome DevToolsのNetworkタブを見ていたところ、.m3u8というファイルの取得に失敗していることが分かりました。そこから、.m3u8ファイルと.tsファイルを用いて実現されるライブ動画配信の仕組みHTTP Live Streaming (HLS)の挙動について調べ、実際の通信内容と比較して、クライアント側の動作や、ファイルの内容などの仕組みが見えてきました。 その基的なところについての理解を図解してみたので、ここにメモ&紹介しておきます。 実際の挙動については、サイバーエージェントの動画配信サービス「FRESH!」および、「AbemaTV」の挙動を参考にしました。 目次 1. HTTP Live Streaming (HLS)2. 2種類のファイルを用意して動画配信する2.1. .tsファイル(動画)2.2. .m3u8(プ

    ライブ動画配信プロトコル(HTTP Live Streaming, HLS)の概要図解メモ(AbemaTV/FRESH!)
  • フロントエンドエンジニアのための動画ストリーミング技術基礎

    動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています(よくパラパラマンガに例えられますが、そんな感じです)。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間(s)の間(p)に 24 フレーム(f)を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま

    フロントエンドエンジニアのための動画ストリーミング技術基礎