動画配信 | ビズバレースタッフブログ

プログレッシブダウンロードの動画は、すべてキャッシュされるか検証
2019年12月6日　k.taguchi

今回は、プログレッシブダウンロードのキャッシュについて考えてみようと思います。

プログレッシブダウンロードは、1つの動画ファイルをダウンロードしながら再生を行いますが、PC内に一時的にファイルを保存する（キャッシュファイル）としてファイルを残すことがあります。配信する立場からすると、キャッシュに溜まることでサーバー側の配信負荷を下げられるメリットがありますが、一方でそこからコピーされるのではないか？という不安も残ります。

ビデオカメラでパソコンモニタ画面を直接撮影されてしまえば、そもそも防ぎようがありませんが、再生可能なオリジナル動画をコピーされること、そして第三者から容易にWeb上の動画にアクセスされることは、未然に防ぎたいところです。

そこで今回は、まずブラウザキャッシュについて調べてみます。
調べたいことは２つ。
・ブラウザキャッシュされるファイル形式
・キャッシュされるファイルサイズに差があるのかどうか
※ 全体のキャッシュサイズでなく、ファイル単位の上限

20140125-0
Flash Media Playback Setup のサイトで検証してみました。

まず、３種類のファイル形式（MP4、FLV、F4V）をターゲットにして検証したところ、意外なことにキャッシュされないファイル形式があり、MP4形式はSafari以外はキャッシュされず、FLV、F4V形式はファイルサイズの違いによりキャッシュされました。

○　キャッシュされる
×　キャッシュされない

Windows7
ファイル形式	Internet Explorer 10	Chrome 32	Firefox 26
MP4	×	×	×
F4V	○	○	○
FLV	○	○	○

OS X 10.8.5
ファイル形式	Safari 6.1.1	Chrome 32	Firefox 26
MP4	○	×	×
F4V	○	○	○
FLV	○	○	○

つぎに、キャッシュ化される上限のファイルサイズを調べました。

キャッシュ化される上限
ファイル形式	Internet Explorer 10	Chrome 32	Firefox 26	Safari 6.1.1
Windows7	制限なし	約26M	約43M	-
OS X 10.8.5	-	約39M	約50M	約9M

なかなか中途半端なサイズになりました。もしかしたらOSやブラウザのバージョンなど環境により変わってくるかもしれませんので「違いがある」という程度に留めたほうが良いかも知れません。IEは450MB程度のサイズがキャッシュされたことで制限なしと判断しました。ただしインターネット一時ファイルの指定が最大1024MBのため、完全に無制限という訳ではありません。

次回は、このことを踏まえて、キャッシュさせないように制御をしてみようと思います。

関連記事
FLV、MP4をFlash使いプログレッシブで再生するときの要点

-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

HTTP Live Streaming でアダプティブストリーミングのやり方
2019年12月4日　k.taguchi

HTTP Live Streaming（HLS）の特徴に、アダプティブストリーミングができることを、概要で少し触ましたが、今回は、実際にアダプティブストリーミングを試してみようと思います。

まず、アダプティブストリーミングについて説明します。アダプティブという言葉は、日本語に訳すと「適応」とか「順応」という意味になります。何に適応するのかと言うと、再生端末の「通信速度」です。いまどきの映像視聴は、固定回線だけでなく、LTE、wifiなど無線回線で見ることも多くなってきました。そこで問題となるのが、通信速度が遅かったり安定しない場合、映像が途中で止まりがちになることです。

アダプティブストリーミングは、多少画質を下げてでも、なるべく再生を止めないようにする技術で、ビットレートの異なる動画を複数用意すると、通信速度に応じて、適切な動画に切り替えながら再生を行います。

また、HTTP Live Streaming のほか、同様の機能を持つストリーミング技術に、Adobe Dynamic Streaming、Microsoft Smooth Streaming があります。

アダプティブストリーミングで配信する1つ1つの動画は、特別な設定はなく単独でも再生できるHLS動画です。必要なのは、それらをまとめるファイルで、マスタインデックスファイルと呼ばれ、それぞれのプレイリストファイル（m3u8）を束ねるファイル（m3u8）になります。拡張子は同じですが、中身の記述がちょっと異なります。

マスタインデックスファイルには、それぞれのプレイリストファイルへのURL指定と、BANDWIDTHを指定します。ここでは、240k、640k、1840kの３つを指定しています。設定はこれだけです。

index.m3u8ファイルの記述例

動作確認をするには、通信速度を自由に変えられることと、通信量も確認したいので、「Entonnoir」と「Little Snitch」という接続監視アプリケーションをMacにインストールしました。

あと、動画の切り替わりが分かり易いように、
各動画にビットレート240kbps（赤色）、640kbps（黄色）、1840kbps（白色）の文字を付けておきます。

用意した動画　 (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

では、実際に動作させてみましょう。

検証デモ

動画解説
（開始時）
ビットレートは、240kbpsからスタートします。ここから、データを一気に受信して10秒程度で、1840kbpsの動画に切り替わります。

（1分50秒）
ある程度まで再生を続けると、規則正しく通信・非通信状態と切り替わりながら再生していることが分かります。

（1分55秒）
ここで、回線速度を 50kbyte/sに制限をかけます。ここから、受信速度がガクンと下がり、1840kの動画で溜めておいたバッファが尽きた 2分34秒に 240kbpsの動画に切り替わります。帯域が変化しても、すぐに切り替わるわけでなく、バッファがなくなるまでは耐えて、なくなるまでに回復できれば事なきを得る感じでしょうか。

1840kから240kに切り替わる

帯域制限を解除すると、再び 1840kbpsの動画に切り替わります。

240kから1840kに切り替わる

再び、50kByte/sの制限をかけ、250kbpsの動画に切り替えます。

再び240kにする

つぎに、少し制限を緩和させ200kByte/sにすると、中間の640kbpsの動画に切り替わります。

240kから640kに切り替わる

最後に、制限を解除させて1840kbpsにして終了。

640kから1840kbpsに。

このように、アダプティブストリーミングは、通信速度に応じて動画が切り替わります。
また回線速度を640kbpsにぴったり合わせれば、640kの動画に切り替わるかと言うと、そうでもなく、ある程度のマージンが必要です。

アダプティブストリーミングは、なるべく再生を止めないというメリットがありますが、デメリットは、複数の動画を用意する必要があるため、その作業量と、動画をアップロードするサーバーのディスク容量を消耗します。その兼ね合いを、考慮したうえで利用するかどうか、決めると良いかもしれません。

次回は、HTTP Live Streaming 代替ストリームについて説明いたします。https://bizvalley.co.jp/blog/1362.html

-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

HTTP Live Streaming 動画配信のやり方（実践）
2019年11月26日　k.taguchi

前回は、HTTP Live Streamingの概要について、書きましたので今回は、実際に作ってみましょう。

動画を用意する

HLSで配信する動画として、「Big Buck Bunny」を素材にします。この動画は、Creative Commonsのライセンスでクレジットを表示すれば、商用、二次的著作物でも利用できる使い勝手の良い動画です。たまに見かける動画ですね。

(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

ダウンロード
http://www.bigbuckbunny.org/index.php/download/

1280x720のMP4ファイルをダウンロードします。

エンコードする

今回は、WiFiをターゲットとして下記のようにしました。

コンテナフォーマット　MPEG-2 TS
映像　H.264
音声　ACC
サイズ　640 x 360
オーディオサンプルレート　22.05 kHz
オーディオビットレート　40 kbps
ビデオビットレート　1200 kbps
キーフレーム　90
フレームレート　24（元映像のフレームレート）

エンコーダーは、コマンドラインのffmpegなど何でも良いですが、Xmedia Recodeを利用しました。

エンコードすると、tsファイルができあがります。

セグメンターで映像を分割する

動画を分割するには、セグメンターを利用します。ここでは「httpsegmenter」を利用します。

Windowsで作業しているため、ready binary for Windows の「segmenter-r6.7z」をダウンロードします。ただ、7zで圧縮されているので、7-Zipなどのファイルアーカイバで解凍して、C:\segmenter-r6 （Cドライブ直下）に配置します。

tsファイルは、Cドライブにmvフォルダを作りコピーします。

コマンドプロンプトで、mvフォルダに移動して、次のパラメータを付けて、segmenter.exeを実行します。

（例）
C:\segmenter-r6\segmenter.exe big_buck_bunny_720p_surround.ts 10 bunny bunny.m3u8 http://localhost/

（意味）
segmenter.exe [指定するMPEG-TSファイル] [セグメント間隔（秒数）] [出力するMPEG-TSファイルのプレフィックス] [出力するm3u8ファイル] [httpプレフィックス]

httpプレフィックスは、動画 .tsファイルへのパスを記載します。ここでは、例として、localhostを指定しています。適宜、書き換えてください。

20130119-12

実行すると、動画がバラバラと分割されます。
20130119-10

m3u8のプレイリストファイルの中身を見ると、一連の動画がリスト化され、httpプレフィックスで指定したパスに、tsファイルが付いていることがわかります。※ 相対パスでも動作します。

作成した、bunny.m3u8と、分割されたtsファイルを、Webサーバーにアップロードします。

Webサーバー MIME タイプの設定

.htaccessファイルを作り下記２行を追加します。

AddType application/x-mpegURL .m3u8
AddType video/MP2T .ts

※ VPSなど、直接Apacheに設定を加える場合は、httpd.conf などのファイルを編集してください。

iPadで確認

すべて整いましたので、動作確認をとります。アップロードしたbunny.m3u8ファイルにアクセスします。この場合は、http://localhost/bunny.m3u8　になります。Windowsで確認したい場合は、VLC media playerや、SMPlayerでm3u8にアクセスすると表示されます。（ただしタイムコード、シークバーの位置は正確に表示されませんでした。）

20130119-11

iPadで、再生されましたね。ただMacのSafariでは、直接bunny.m3u8にアクセスしても再生されません。HTML5 Videoにすると再生できるようになります。

（参考）
<html>
<head>
<title>HTTP Live Streaming サンプル</title>
</head>
<body>
<video controls>
<source src="bunny.m3u8">
</video>
</body>
</html>

いかがでしたでしょうか？。
少し長くなりましたが、作業自体は、簡単なものです。さらにパラメータのチューニングをすることで、もっと良くなると思いますので、試してみてください。

次回は、「HTTP Live Streaming でアダプティブストリーミングのやり方」について説明いたします。https://bizvalley.co.jp/blog/1215.html

-

【求人情報】
映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいたる方はPCページのトップにリンクがございますのでそちらからお願い致します。

HTTP Live Streaming 動画配信のやり方（概要）
　k.taguchi

HTTP Live Streaming（以下 HLS）とは、Appleが開発した、動画配信のテクノロジーで、iPhoneなどで動画をストリーム再生したい場合、利用される形式です。

HSLは、特別なストリーミングサーバーを必要とせず、通常のWebサーバーから配信できるため、レンタルサーバーでも、その気になれば、少しの設定で配信することは可能です。

HLSの動作デバイスは

MacOS X10.6以降のSafariブラウザ
iOS3.0以降
Android3.0以降

Windowsでは、VLC media playerで（一応）動作しますが、IE、Chrome、Firefox、そしてMacOSでもChrome、Firefoxといったメジャーなブラウザでは、動作しません。

※追記 2014/7/25 FlashでHLSを再生できるようにしたベンダーがでてきています。（有償です）

HLSの特徴として、通信速度に応じて映像画質を変えるアダプティブストリーミングで再生することができます。これは、ビットレート・画面サイズの異なる同一の動画を複数作り、クライアント側の通信速度に応じて、再生しながら切り替えるストリーミングのことを言います。

同じWebサーバーからの配信で、HLSとの比較に、プログレッシブダウンロードの動画ストリームがあります。この場合、別のビットレートの動画に切り替えることができないため、柔軟性の面で、HLSのほうが優れています。逆に、HLSのネックは、再生環境が限られるといった所でしょうか。

HLS動画の仕組み
HLSの動画フォーマットは、MPEG TS（映像コーデックH.264）、AAC（音声）です。そして、１つの動画は、10秒ごとに分割された、細切れのファイル（.ts）になり（※ これをメディアセグメントファイルと言います。）、目次に相当するプレイリストファイル（.m3u8）の２つから構成されます。

ファイルが分割されているので、プレイリストの再生指示により、どのファイルからも読み込むことができ、プレイリストの指定順に、次々とファイルが読み込まれます。見た目には、ファイルが分割されていても、スムーズに一体として再生されます。

１つ１つのファイルは、プログレッシブダウンロードのように読み込まれるため、10秒を超えてあまり長い分割だと、再生に時間がかかったり、細かすぎるとサーバーに負担がかかるため、推奨は10秒になっています。

またベンダー製品のAdobe Media Server、Wowza Media Serverでは、HLSをサポートしています。通常のWebサーバーで配信できるなら、ストリーミングサーバーは、必要なさそうですが、ファイルをあらかじめ分割せず配信できたり、Flashなど別の配信フォーマットにも１つの動画ファイルで対応できるといった、特徴があります。

Appleのサイトでは、HSLについてのドキュメントが公開されているので、気になる方は、一読しておくといいでしょう。また、サンプル動画のURLも記載されているので、参考になると思います。
HTTP Live Streamingの概要 (PDFファイル)

次回は、実際に作ってみようと思います。
HTTP Live Streaming 動画配信のやり方（実践）

参考
「FlashでHLS（HTTP Live Streaming）を再生するには・・・ただし有償」
https://bizvalley.co.jp/blog/7055.html

-

【求人情報】
映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいたる方はPCページのトップにリンクがございますのでそちらからお願い致します。

Windows IISを使ってHTTP Live Streaming を配信する方法
2019年11月25日　k.taguchi

HTTP Live Streaming は、特別なサーバーアプリケーションを必要とせず、MIME設定を行えば簡単に配信できることを、HTTP Live Streaming 動画配信のやり方（実践）で、説明しましたが、そのとき、Webサーバーは、Apacheをベースにしていたので、今回は、Windows ServerのIISから配信を試してみようと思います。

とはいっても、MIME設定するだけです。

サーバーを用意する
Windows Serverは、AmazonEC2のクラウドを利用しました。数時間程度の利用なら数百円程度で高スペックなサーバーを利用できるので、とても便利です。

20130210-05