こんにちは、田口です。今回は、HTTP Live Streaming（以下HLS）をなんとかFlashで再生する方法を見てみようと思います。

HLSの基本は「HTTP Live Streaming 動画配信のやり方 （概要）」の記事をご覧いただくとして、HLSの弱点の１つは、マルチプラットホームに欠ける点が大きなデメリットでした。最近のAdobeは、Adobe Primetimeという、動画配信プラットホームの提供を始めています。そこでは、HLS、MPEG-DASHもサポートしているようで、FlashでHLSの再生ができることが分かります。

しかしながら、動画プレーヤー用 SDKは一般に公開されておらず、簡単に試すことはできません。そして、動画プレイヤーを提供する、flowplayerやJW PlayerもFlashプレイヤーとしてHLS再生をサポートしていますが、残念ながら有償です。

今回は、flowplayerのHLSサイトを見ると、１つサンプルを見ることができます。



この動画が実際に、HLSで再生されているかブラウザのデベロッパーツールで見てみましょう。そうすると、m3u8ファイル、動画のセグメントファイルである、.tsファイルを読み込んでいることが分かります。Flashですので、プラグインが入っていれば、どのブラウザでも動作しますので、ブラウザ依存は起きにくいでしょう。



flowplayerのデモバーションでは、localhost上（自身のPC上）で、サンプルを動かすことができます。なにぶんlocalhostでしか動きませんので、レンタルサーバーなどで動きませんのでご注意ください。

このようにHLSをFlashで再生できるメリットは、Flashのプラグインが入っていればHLSを再生できること、複数の動画フォーマットを作る必要がないことです。sdkは有償ですが、複数フォーマット、ディスク容量を考慮するならば、おそらく元は取れるでしょう。

将来的には、動画の配信方式は、HLSとMPEG-DASHが主流になると言われ、DRMもプラグインを使わずにブラウザ内で処理できるようになるそうです。YoutubeやMicrosoft OneDriveでの動画再生は、（いつの間にかに）MPEG-DASHに切り替わっていることから、トレンドは変わりつつあるようです。

Webサーバーの Apache にワンタイムURLを設定して、動画へのアクセスを制限してみようと思います。

ワンタイムURLには、イベントベースのものと時間ベースのものがあるようです。イベントベースは、アクセス回数で制限を加え、時間ベースは、アドレスの生成から何秒間 そのURLが有効というもので、有効時間を過ぎると、そのURLでアクセスすることはできなくなります。

今回のものは、時間ベースのもので、mod_auth_token を利用します。通常、Apache にはインストールされていないため、ソースコードからコンパイルします。今回も、OSは、Debian Linux で話を進めます。

mod-auth-token のサイト
https://code.google.com/p/mod-auth-token/

下準備
Mod-Auth-Tokenは、automake、apxs を必要とするため動作するよう準備します、あとコンパイルに make を使うのでそれも入れておきます。

automakeのインストール

/usr/bin/ に automake-1.11 がインストールされます。

apxsが、入っているパッケージ apache2-prefork-dev をインストールします。今回、動作させている Apache のマルチプロセッシングモジュール（MPM）は、Prefork のため、apache2-dev では動きませんので注意してください。Prefork や Worker といったものは、apache2 -V で調べることができます。


apache2-prefork-dev 、make のインストール

Mod-Auth-Token をインストールする
wget でファイルをダウンロードして解凍します。

mod_auth_token-1.0.5 フォルダの中身

リンクされている automake のバージョンが1.10と違うため、削除して張り直します。

コンパイルしてインストールします。そしてApacheを再起動。

つぎに、/etc/apache2/sites-available/default ファイルの、<VirtualHost *:80> の中に、下記コードを追加します。これはURLに、video の文字が含まれ AuthTokenSecret は、要求元からの合言葉となり、AuthTokenTimeout は、試しに10秒として、URLの生成後10秒でURLが無効になります。

サーバー側の設定は、これで完了です。次にWebページ側は、今回はPHPを使い下記コードにして、bunny.mp4 にアクセスした場合の設定です。実際は、動的にファイルが指定される実装になるでしょう。IPアドレス部分 ***.***.***.*** は、適宜設定してください。

ファイル名はonetime.php としてFTP上 videoフォルダの上に配置します。videoフォルダの中には、bunny.mp4を入れておきます。



では、すべて準備が整ったのでブラウザでアクセスしてみましょう。そうすると、自動生成されたリアドレスが表示されます。



このアドレスは、リロードするたびにコロコロと変わり、サーバー側で設定した時間、10秒間有効です。


リンクをクリックするとbunny.mp4ファイルに接続され動画が再生されます。


10秒経過後、リロードを掛けるとこのように410エラーとなり接続できなくなります。


試しに、直接 bunny.mp4にアクセスしてみると、認証エラーとなり接続することはできません。


動画で確認してみましょう。


このようにして、動画にアクセス有効時間を設定することで第三者からのアクセスをしずらくすることができます。ウィークポイントを言えば、動画再生の権限を持ち再生したとき、そのユーザーに対して有効時間内はその動画へのアドレスはノーガードとなるため、URLを突き止められるとダウンロードされる可能性は捨て切れません。そのあたりは工夫や、妥協が必要になるかもしれません。

（参考）
動画配信 CDNでワンタイムURLを設定してみよう
https://bizvalley.co.jp/blog/4470.html

今回は、Flashで古典的なプログレッシブダウンロードストリーミングについて見てみようと思います。

Webサーバーに動画を置いて、再生する場合、通常プログレッシブダウンロードの形式になります。これは、ブラウザのキャッシュ内に動画データをダウンロードしながら再生を行います。それ以前の方式では、全部ダウンロードしきってから再生をしていたため、なかなか再生されないということがありました。

プログレッシブダウンロードで肝となるのが、通信ダウンロードの速度ですが、遅い場合、映像再生がダウンロードに追いついてしまい、止まりがちになります。また、ダウンロードされていない映像位置にシーク移動することはできないため、長尺の映像はどちらかというと不向きです。

ここではまず、FLV動画を再生して、どのくらいの通信速度でデータをダウンロードしているか見てみましょう。映像のビットレートは、1Mでエンコードしてあります。



試した環境では、平均して3.5Mbpsの速度がでており、瞬間的に10Mbpsを超えていることもあります。別のところでは、平均40Mbpsも速度がでました。

今度はMP4の動画を見てみましょう。



再生ボタンを押しても、動画はスタートしませんでした。ただ、ネットワーク上の通信はFLVのときと同様に、ダウンロードが進んでいることがわかります。これはなぜでしょうか？

原因は、FAST STARTが機能していないため起きた現象です。
FAST STARTとは、すべての動画データをダウンロードしなくても、動画を再生することができる機能のことで、MP4のエンコードは、エンコーダーによって、FAST STARTの設定があり、オンオフの設定ができます。この場合は、オフでエンコードしたため、すぐにスタートしませんでした。


これをオンにして、もう一度エンコードすると、ダウンロードしながら再生をすることができます。Adobe Media Encoderなど、エンコーダーの種類によって、元からFAST STARTはオンで設定自体ないものもあります。



今回の要点は、

• 古典的なプログレッシブダウンロードストリーミングは、ブラウザのキャッシュ内（メモリorHDD）に動画データをダウンロードします。
• ダウンロードされていない映像位置にシーク移動することはできません。
• クライアント、サーバー側の通信帯域を、全力に使い映像をダウンロードします。エンコードビットレートを1Mbpsにしたからといって、1Mbpsを上限に通信するわけではありません。
• ダウンロードが進んでいても、映像が始まらない場合、FAST STARTの設定を確認する。

今回は、AdobeのストリーミングサーバーであるAdobe Media Server5のインストールを試してみようと思います。このサーバーは、元々Flash Media Serverと、Flashの名が付いたサーバーでしたがバージョン5からはFlashがとれ、そしてHLSなどをサポートしたことで、Flashだけじゃないという意思が感じられるようになりました。この製品と競合する商用サーバーには、Wowza Media Server というものがありますが、Wowzaは、互換サーバーの色合いがやや強いかもしれません。

それでは、Adobe Media Serverをインストールしてみようと思います。今回サーバーは、Windows Server2008 メモリ2Gで、NTTコミュニケーションズのCloudⁿ（クラウド・エヌ）を利用しました。Amazonと違って、ネットワークの転送量が無料のため、ストリーミングのテストをするにはちょうどいい感じです。

サーバーアプリケーションは、アドビのサイトから、試用版であるAdobe Media Server 5 Starterをダウンロードいたします。
https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=adobemediaserver

Adobe Media Serverには、いくつかエディションが分かれていますが、違いは、下記をご参考ください。



ダウンロードを終えてインストーラーを起動すると下記ショットから始ります。スライドを参考に進めてください。



インストールが完了するとブラウザが起動して、いくつかデモ映像を再生することができます。


次回は、映像配信のやり方について見てみようと思います。

前回、Strobe Media Playbackのサンプルについている、setupを利用して、埋め込みコードを取得しましたが、objectタグを利用した方法でした。

YouTubeの埋め込みコードは、iframeをデフォルトにしているので、長いものに巻かれる感じで、今回は、iframeのケースを試してみようと思います。

やり方は、まず前回同様、Strobe Media Playbackをダウンロードして、「for Flash Player 10.1」を「StrobeMediaPlayback」にリネーム。そのままFTPでアップロードします。StrobeMediaPlaybackフォルダの１つ上に、動画を表示するHTMLファイルを置くようにします。

サンプルとして、埋め込みコードは、このような感じになります。

<iframe width="640" height="360" src="StrobeMediaPlayback/embed.html?src=https://bizvalley.co.jp/asset/01/bizvalley_pv.flv" class="strobemediaplayback-video-player" frameborder="0" allowfullscreen"></iframe>

ポイントは、embed.htmlにアクセスして、?src= で動画ファイルを指定している所です。動画形式は、flv、mp4どちらでもいけます。

src="StrobeMediaPlayback/embed.html?src=＜動画ファイルURL＞"

ブログに埋め込むと、このような感じになります。下の埋め込みは、相対パスでは繋がらないので、embed.htmlを絶対パスで指定しています。


Strobe Media Playbackでiframeを利用した埋め込み

サンプルデモ

いろいろなやり方があるので、必要なケースに応じて使い分けてみるといいでしょう。