FRESH!で再生が止まってしまったときに、Chrome DevToolsのNetworkタブを見ていたところ、.m3u8というファイルの取得に失敗していることが分かりました。そこから、.m3u8ファイルと.tsファイルを用いて実現されるライブ動画配信の仕組みHTTP Live Streaming (HLS)の挙動について調べ、実際の通信内容と比較して、クライアント側の動作や、ファイルの内容などの仕組みが見えてきました。 その基本的なところについての理解を図解してみたので、ここにメモ＆紹介しておきます。 実際の挙動については、サイバーエージェントの動画配信サービス「FRESH!」および、「AbemaTV」の挙動を参考にしました。 目次 1. HTTP Live Streaming (HLS)2. ２種類のファイルを用意して動画配信する2.1. .tsファイル（動画）2.2. .m3u8（プ
みなさんこんにちは、サイバーエージェントのFRESH!というサービスでフロントエンドの開発しています鈴木です。 FRESH!は生放送に特化した「映像配信プラットフォーム」で生放送というサービスの特性上、HTTP Live Streaming (HLS) というストリーミングプロトコルを用いて映像を配信しています。 そのFRESH!では、2016年8月頃から動画プレイヤーをFlashを用いない新しいプレイヤーにリプレイスしました。(Google Chrome, Firefox, Safari10, Edge, Opera, Vivaldi) このエントリーでは、その移行とその後の得られた結果について紹介いたします。 経緯 2016.01 サービス開始当初 Video.js v4.x(videojs-contrib-hls v0.16.x Flashベース)でプレイヤーを提供していました。 2
知ってることを自分の中で整理するためのメモです。 知ってることしか知らないしそこまで使い込んでないので、間違ってる可能性は多いにありです。 動画配信とライブ配信 Webで動画を配信するには2つのパターンがある 完成した動画ファイルをまるっと取得して再生するか 動画ファイルの一部を「逐次」取得して再生する（ストリーミング）か クライアントサイドとしては、サーバーにあるメディアを逐次取得するだけなので、そういう意味での違いはない 今回の記事は後者の方法について Web = HTTPベースのストリーミング用にいくつかプロトコルがある HDS(= HTTP Dynamic Streaming) HLS SS(= Smooth Streaming) MPEG-DASH このうち、HLS / MPEG-DASHが最近の主流の2つ だいたい似たような仕組みになってて、ざっくりAdaptive Strea
2016/10/15 AbemaTV Developer Conference 2016
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
Did you know our video player guarantees playback quality on any screen through our modular architecture, including low-latency, configurable ABR and Stream Lab, the world’s first stream QoE testing service? Check out the Bitmovin Player to learn more. All existing adaptive HTTP streaming technologies, such as the proprietary Adobe HTTP Dynamic Streaming (HDS), Apple HTTP Live Streaming (HLS), Mic
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
