2012年4月19日木曜日

Video.jsの簡単なつかいかた

授業でビデオを観る課題などをよく出すのだけれど、Flashには死んでほしいので、授業のMoodleではmplayerモジュールは緊急避難的に使って、普通のHTMLリソースのなかにvideo要素を手で書いて対応していました。

ところがなんだか、いったんMoodle 2.2+にして大はまりしたあげく1.9に戻ってきたら、なぜだかいままでのビデオが全く表示されなくなり、一念発起してVideo.jsを使えるように無理やりlib/weblib.phpを書き換えたりなどしました。ほんとはちゃんとモジュール開発すべきなんですが、時間がなかったもので。

というわけで、Video.jsです。

なかみはとても単純で、CSSとJavaScriptで書かれたHTML5ビデオプレーヤーに、念のためFlashにfallbackするためのswfがついているという構成。設定は、CSSをheader要素間にlink要素で入れて、あとbodyにscript要素としてJavaScript本体を読むように書くだけ。

と、これだけならオリジナルサイトに書いてあるだけのことなんだけれど、ちと大きくはまったのが字幕なので、そのことについてだけ記すことにします。

まず、字幕(ここではsubtitlesということにします)は、WebVTTを使います。まぁ、一応W3C的には標準。だけど、従来の字幕とはやや趣が違うフォーマットなので、直接これを編集できるアプリケーションは、なんかMSが出しているとかいう話ぐらいしか見当たりませんでした。

でもまぁ、なんとかなるという話を以下に。

まず、ここはやはりオープンソースなAegiSubを使うことにします。これの素晴らしいところは、音声波形ビューアで、適当に音声の切れ目らしいところを単位にして、自動的に次の字幕項目を入れられること。必ずしもきれいにいくわけではないので、多少マウス操作で調整したりはしますが、時間の数値をいじることを全くしないで字幕トラックを作れるというのがたいへんありがたいと思いました。出力形式は、SRTにしときます。なぜかというと、WebVTTとかなり近いから。

とはいえ、WebVTTのほうが表現力は高く、縦書きの字幕を表示できたり(bidiも考慮されてる)、表示位置の指定ができたりといったようなことはあります。そのへんはASSから変換できたりするといいのかもしれないのですが、まぁそれはそれ。

SRTからWebVTTを作る手順は以下のとおり。

  1. SRTに入っている通し番号を削除する
  2. 1行目に先頭から「WEBVTT」と書き、2行目を空白行にする
  3. 表示タイムスタンプの時間表記を、ミリ秒の前の「,」を「.」に置き換える
仕様書に従えば、たったこれだけのことでOKということになります。vi使ってれば一瞬ですね。

%s/^[0-9][0-9]*$//
%s/,/./g

ところがよくわからんのですが、いまのVideo.jsは、仕様書ではオプションとして定義されているタイムスタンプの「hour」の項目があるとダメっぽいのです。hourなしでどうやって59分以上の長さの字幕を作るんだというと、60以上の数字にするんだとか。桁数については「59を超えたら60の剰余とし、商を上の位に上げる」的なことしか書いてないので99分超えても大丈夫なのかもしれないけどやってないので不明。

というわけで、残念ながらタイムスタンプから時間を消す編集が必要。こんな感じでしょうか。

%s/^00://
%s/> 00:/> /

で、まぁ、1時間以後は毎分ごとに60を足してやるみたいな感じでしょうか。もうこうなってくると、スクリプト書きたくなる感じですが、とりあえずこんなところで。

あと、オリジナル設定だと字幕は10ptベースの1.4emなので、日本語の表示にはちょっと小さすぎる感じです。2emにしたらいい感じになりました。あと、text-shadowとかお好みでタイプフェースをいじる等はやってくださいという感じです。font-familyもarial, sans-serifぐらいしか書いてないので、僕は日本語フォントを追加しておきました。ヒラギノとか。