MediaElement.jsでビデオ視聴

MediaElement.jsをredmine上のビデオ視聴プラグインに組み込んでみた

初めに思ったのは、まだ見てないやつとか見たやつとか分かるように出来ないかな？ってことでした。ビデオの再生ボタンを押したことを検出して、データベースに視聴済みと記録できないかな？って。
更には、どこまで観たかを記録できれば途中再生もできるよねとか、ビデオコントローラをカスタマイズして１５秒スキップとかできればCMスキップも楽だよねとか、視聴する部分の拡張をしてみたいと。

上記のようなことは、まだまだ出来そうにないんですが、まずはそういったことがやりやすそうなフレームワークを探してみたところ、有名どころで Video.jsとMediaElement.js がありました。
どちらもコントローラのカスタマイズとかイベントAPIとかを持っていて色々出来そう。

これらのドキュメントを読んでみると、どんなブラウザでも再生できるようにすることが目的になっているようです。そういえば自分のシステムでは素のHTML5のvideoタグでソースはH264だけなのでFirefoxとかでは観れない。
このフレームワークを使用するとH264だけでもFirefoxで見れるようになると。
うーん素晴らしい。
どうして見れるんだ？ってことですがH264を再生できないブラウザでは自動的にプレーヤープラグインを通して再生するってことらしい。そのためのプラグインが内包されています。

Video.js

簡単そうだったので、初めはこっちを使ってみましたが、ドキュメント通りにやってみて、CDNホストバージョンだろうがセルフホストだろうが、Firefoxで視聴できるように出来ませんでした。
セルフホスト用をダウンロードすると、video-js.swfというのが入ってるんで、勝手に使ってくれるんだよね？って思っていましたが、甘かったようです。よくよく読んでみるとH264だけで大丈夫とは書いてない・・・
ということで、さようならです。

MediaElement.js

結果から言うと、特に色々やることなくFirefoxでは勝手にブラウザプラグインが使われて、ソースがH264だけでも再生してくれました。更にビデオイベント取得やビデオオブジェクト操作APIや、何やらカスタムコントローラにボタン追加したり出来てしまうらしい。冒頭に書いたようなことが出来そうな可能性を感じます。

ダウンロード

こちらは、フリーCDNホストはないので、パッケージをダウンロードして使用します。
$ wget http://github.com/johndyer/mediaelement/zipball/master
ってやるとダウンロードされますが、ファイル名が'master'になっちゃいます。でも気にせず
$ unzip master
で解凍して'master'はポイです。

中身を覗いてみると、/buildにフレームワーク一式。デモサンプルのHTMLとメディアファイル、Silverlight用とFlash用のプラグインのビルドファイルとソースコード一式がどっさり入っておりました。


視聴システムへの組み込み

視聴部分はredmineプラグインで構築しているので、言うなればRailsアプリへの組み込みってことになります。ビデオ視聴プラグインの一部として組み込みたいので、必要なファイルをそっちへ移動させます。
ここでは、ビデオ視聴プラグインのフォルダを、/redmine_videoとして記述しておきます。

JavaScriptとプラグインをassets/javascriptsへコピー
MediaElement/build/*.js => /redmine_video/assets/javascripts
MediaElement/build/flashmediaelement.swf => /redmine_video/assets/javascripts
MediaElement/build/silverlightmediaelement.xap => /redmine_video/assets/javascripts

cssとイメージファイルをassets/stylesheetsへコピー
MediaElement/build/*.css => /redmine_video/assets/stylesheets
MediaElement/build/*.png => /redmine_video/assets/stylesheets
MediaElement/build/*.gif => /redmine_video/assets/stylesheets

Railsではassetsフォルダの中をjavascripts/stylesheets/imagesに分けることになってますが、MediaElementはフラットなので、このような分け方にしました。全部assets/javascriptsに入れてしまっても動くでしょうけどrailsでシンプルに書きたいんで。

redmineを再起動すると、redmine_video/assetsが、redmine/public/plugin_assets/redmine_video/へ自動コピーされて使用できる状態になります。

最初なぜかredmine/public/plugin_assets/redmine_video/がルートパーミッションになってしまっていてコピーでエラーになってしまい、ちょっと悩みました。なんで？誰がやった？自分？？原因不明。

ビュー作成

視聴ビューとしていた以前のplay.html.erbは以下のようなものでした。

<h2><%= @issue.subject %></h2>

<% video = @issue.attachments.detect {|a| a.content_type == "video/mp4"} %>
<% thumb = @issue.attachments.detect {|a| a.content_type == "image/jpg"} %>

<%= video_tag video.disk_filename, :id => "video",
    :poster => image_path("/videos/"+thumb.disk_filename),
:autoplay => true, :autobuffer => true, :controls => true, :size => "960x540" %&gt\
;

これを、MediaElement.jsのデモサンプルやらサイトやら色々物色して、不要なものをすべてそぎ落として、Railsで書き直したら以下のようになりました。

<% content_for :header_tags do %>
  <%= javascript_include_tag "jquery.js", :plugin => 'redmine_video' %>
  <%= javascript_include_tag "mediaelement-and-player.min.js", :plugin => 'redmine_video\
' %>
  <%= stylesheet_link_tag "mediaelementplayer.min.css", :plugin => 'redmine_video' %>
  <%= stylesheet_link_tag "mejs-skins.css", :plugin => 'redmine_video' %>
<% end %>

<% video = @issue.attachments.detect {|a| a.content_type == "video/mp4"} %>
<% thumb = @issue.attachments.detect {|a| a.content_type == "image/jpg"} %>

<%= video_tag video.disk_filename, :poster => image_path("/videos/"+thumb.disk_filename)\
,
:type => "video/mp4", :size => "960x540" %>

<%= javascript_tag "$('video').mediaelementplayer()" %>

最後のmediaelementplayer()が全て色々よろしくやってくれるようです。
この関数はイベントリスナーやら数あるオプション設定やらいろいろカスタマイズできます。

ここまで到達するのに悩んだことがいくつかありました。

• content_for :head　じゃなくて、content_for :header_tagsだった。
  railsのドキュメントには:headって書いてあるんだけどなぁ。かなり悩んだ。
• javascript_include_tagやstylesheet_link_tagに、:pluginオプションが必要だった。
  railsドキュメントではなく、redmineプラグインドキュメントを読むべきだった。
  これにより、プラグインのassets以下を指定したことになるらしい。
• video_tagには、:type => "video/mp4"が必要だった。
  これがないとMediaElement.jsが全く機能しなかった。
  MediaElement.jsのセットアップで、サイトにAddTypeでMIMEを追加せよと書いてあったけど、やっていない。もしかしたらそのため？　でもこれで動いたんで大丈夫。

これで、やりたかったことの一つ、Firefoxで視聴できるようになりました。
実際にやってみると、付属のSilverlightプラグインを通して再生されているようです。

次回は、もう少し突っ込んだ使い方を書いてみたいと思ってますが、実はなかなかうまくいっていません。よくわからない状態継続中です。また暫く間が開くかもです・・・