2015年4月17日金曜日

HTML5 video で字幕付きビデオを表示する

以前、vlcj を使ってビデオプレーヤーを作成しましたが、今回は HTML5 の video 要素を使ってビデオを(字幕付きで)表示するWEBアプリを作成したいと思います。

開発環境

  • OS: OS X Yosemite 10.10.3
  • IDE: Eclipse Luna SR2(4.4.2) Java EE パッケージ
  • サーバー:Tomcat 7.0.61
  • ブラウザ:Safari 8.0.5

 注意:現在 video 要素のサポート状況はブラウザによって異なります。このデモアプリは開発環境および iOS の Safari と android の Chrome でのみ動作を確認しています。主要なブラウザの最新バージョンでは、基本機能の大部分をサポートしているようです。字幕を表示するための track 要素のサポート状況もかなり良いと思います。

新規プロジェクトの作成
WEBアプリ作成のフレームワークとして、Spring MVC + Thymeleaf を使用します。新規プロジェクトの作成方法は「Spring MVC + Thymeleaf による WEB アプリケーション開発(1)プロジェクト作成」や「(1)SpringMVC+Thymelef+Bootstrap で実用アプリの開発: eclipselink を使用するDB設定」を参照してください。

  • プロジェクト名:myviewer
  • groupId:com.itrane
  • artifactId:myviewer


事前準備:動画情報ファイルの作成
このアプリで表示するビデオの情報(ビデオファイルのパス、タイトル、字幕ファイルのパスなど)を JSON形式で事前に作成します(指定フォルダ以下をスキャンして必要な情報を抽出するツールを作成して行いました)。
作成された動画情報ファイル (videodef.json):
  • videoPath:/contents/video に対するビデオファイルの相対パス
  • imgPath:サムネール表示用の画像ファイルの相対パス
  • trackPath:日本語字幕ファイル(WebVTTフォーマット:xxx.vtt)の相対パス。英語字幕は xxxe.vtt 。vtt ファイルは srt ファイルがあれば簡単に作成できます。

このファイルから動画情報を読み込むクラスは以下のようなものです:

Tomcat の aliases を設定する
現在のマシン環境(動画ファイルの保存場所)を変更したくなかったので、Tomcat の context.xml で、aliases を指定しました。例えば、実際のビデオコンテンツのルートフォルダが "/Users/foge/_contents" で、これをアプリから "contents" で参照したい場合は次のようにします:
コントローラの作成
com.itrane.myviewer.controller.VideoController: メソッドの説明
  • videoList():
    リクエストURL "/" または "/videoList" に応答して実行します。type パラメータに応じて決定されるビデオ情報ファイル(例」type が  "smallville" の場合 /Users/foge/_contents/video/smallville/videodef.json")から、 getVideoGroups() メソッドによりビデオ情報を取得して、ビデオ一覧ビュー(videoList.html)を表示します。  
  • videoPlayer():
    ビデオ一覧ビューでビデオを選択するとこのメソッドを実行します。ModelAndView オブジェクトにタイトル(title)、ビデオパス(vpath)、字幕パス(track)などをセットして、ビデオ再生ビュー(videoPlayer.html)を表示します。

ビューの作成
 ビデオ一覧ビュー:WEB-INF/views/video/videoList.html: 上のコードで一番目の th:each 属性の ${videoCmd.videoGroups} は指定フォルダ下の全グループの情報を表し、grp は1グループの情報を表します。二番目の th:each 属性の ${grp.videoDefList} はグループ内の全ビデオ情報ファイル、vdef は1つのビデオの情報(videoDef インスタンス)に対応します。これらの各ビデオ情報は "a" タグの th:href 属性で、タイトル、ビデオパス、字幕パスなどのパラメータとして、コントローラの videoPlayer() メソッドに送られ、対応するビデオが再生されます。
以下にビデオ再生ビューの内容を示します。
ビデオプレーヤービュー: WEB-INF/views/video/videoPlayer.html:
実行結果
(画面1)ビデオ一覧を表示
(画面2)デフォルトの日本語字幕を表示
(画面2)メニューで英語字幕に変更

(画面3)iPad でビデオ一覧を表示


ソースコード
ソースコードを GitHub からダウンロードしてください:myviewer



0 件のコメント: