こんにちは、田口です、今回からvideo-js の機能をいろいろ見てみようと思います。前回はデモを動かしてみましたが、それだけでもさまざまなボタンや機能があったと思います。

まずは、ということでクローズドキャプションとサブタイトルについて見てみましょう。この機能は、動画内の設定したシーク位置に字幕を表示することができます。デモでは２種類の色違いの文字が表示されていたと思います。これが、クローズドキャプションとサブタイトルになります。



ざっくり違いを書いてみると

クローズドキャプション
聴覚障害を持つ方にも考慮された字幕

サブタイトル
映画などの字幕（英語→日本語）や音声の内容を文字にしたもの

私の理解では、話し手のことばの言語を、そのまま文字にして起こしたもの、そのなかで状態の伝達に必要な（効果）音の文字表現は、クローズドキャプションに相当して、海外の映画などの日本語字幕は、サブタイトルに相当すると思います。例えば、ガラスが割れる音「ガシャーン！」という音の表現は、クローズドキャプションでは入り、一方、サブタイトルでは入らないケースもあるのかもしれません。

調べてみたら意外と難しかったというオチですが、ではテロップはどちらに入れるの？といえば、サブタイトルになると思います。また、動画教材で音声を切った状態で、学習できるように文字を起こす場合、その文字をクローズドキャプションに設定するといった使い方もできるでしょう。

※ ちなみに、デモの動画では、そこまで深く区別されておらず、クローズドキャプションとサブタイトルの内容は同じものです。

こんにちは、田口です、今回はオープンソースのHTML5 ビデオプレイヤーの videojs を試してみようと思います。このプレイヤーの開発元は 動画配信プラットフォームのBrightcove（ブライトコーブ社）のため、結構 本格的な作りです。今回は、まずということでデモを動かしてみましょう。



サイト上のDOWNLOADリンクから、ファイルをダウンロードします。ファイルを解凍して中をみてみると、video-js フォルダが入っています。


とりあえずデモを動かす程度ならば、このフォルダをそのまま、FTPでサーバー上にアップロードするだけで十分です。この video-js フォルダの中には、demo.htmlファイルが入っています。このファイルをブラウザからアクセスしてみると、プレイヤーとデモ映像を確認することができます。


このように表示されればOKです。


実際の動画
https://bizvalley.co.jp/asset/01/video-js/demo.html

利用する場合は、demo.htmlやCSSなどをカスタマイズするとプレイヤーの色を自由に設定できたり、1.5倍速など早送り再生機能を付けることもできます。特にFlashのプレイヤーでは、早送り再生はできないので、特に教育系の動画では重宝する機能ではないでしょうか。いろいろ機能がついていますので、Youtubeではなく自前で動画を配信したい場合、プレイヤーの候補として有力な一つになると思います。

※ Flashでどうしても早送り再生したい場合は、動画自体をエンコード時に早送り状態、例えば1.5倍速で標準再生されるようにエンコードします。そして、1倍速から1.5倍速に切り替えるとき、再生位置を記憶して動画ファイルをすり替えます。つまり、ｘ倍速分の動画ファイルが必要になり、サーバー上のディスク容量も消費しますが、動画の本数が少ない場合は、有用な方法です。

-

【正社員募集のお知らせ】
当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。
詳しくは【人材募集】のページをご覧ください。※モバイルページでご覧の方はPC版のTOPにリンクがございます。

こんにちは、田口です。今回は、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に切り替わっていることから、トレンドは変わりつつあるようです。

-

【正社員募集のお知らせ】
当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。
詳しくは【人材募集】のページをご覧ください。※モバイルページでご覧の方はPC版のTOPにリンクがございます。

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

前回、プログレッシブダウンロードの動画のキャッシュ状況について調べてみましたが、OS・ブラウザにより違いがあることが分かりました。今回は、Webサーバー（Apache）の設定により、クライアントのハードディスクにキャッシュを残さないようにしてみましょう。

まず、Apache モジュールとしてmod_headersを利用します。これが今回の肝で、HTTPのリクエストヘッダを制御してキャッシュを残さないよう設定を行います。

OSはDebian7 Linuxで話を進めます。
mod_headers が既に有効に動作しているか確認をしてみます。
sudo apachectl -M で動作しているモジュールの一覧を表示します。

※（static）静的モジュール　(shared)動的モジュール

動いてませんね、モジュール自体が入っているかどうか /etc/apache2/mods-available/ の中を確認してみます。そうすると、 headers.load がありますので、存在はしていることが分かります。これを有効にします。ちなみに、モジュールの本体は、/usr/lib/apache2/modules/ にあります。

Debian のApacheの場合、mods-available のディレクトリにモジュールが定義され、それを動作させる・させないといったのオン・オフのスイッチが mods-enabled ディレクトリになります。

headers を有効にして、Apacheを再起動します。
sudo a2enmod headers

sudo apachectl -M でモジュールが入ったかどうか確認してみてください。つぎに、
/etc/apache2/sites-available ファイルの<VirtualHost *:80>の中に、下記コードを追加します。今回はf4vファイルを対象にします。複数書くときは.(f4v|flv)のようにします。拡張子で判別しているので、txtファイルなどもいけますね。


Apacheを再起動して、期待通りに動作するか確認をしてみましょう。

通常のキャッシュありのプログレッシブダウンロード


ヘッダー操作によるキャッシュなしのプログレッシブダウンロード


このように、キャッシュファイルを無効化することで、ファイルコピーを防ぐことができます。