MediaElement.jsのキー操作でCMスキップ

ここしばらく、録画されたビデオを視聴するってことに取り組んでいる。前回記事ではMediaElement.jsを組み込んで動くところまでは確認した。

今回は、やりたかったことの一つ、CMスキップについて

その前に、その他のビデオプレーヤーフレームワークはどんなもんだろうか？と思って HTML5 Video Player Comparison を参考にいろいろ試してみた。
JWPlayer、LeanBackPlayer を入れて動かしてみたけれど、MediaElement.jsみたいにFirefoxで簡単に見れるようにしてくれなかった。その時点でパスって感じ。メンドクサイのはいやなのです。
でも、LeanBackPlayerは普通の使い方としてはインプリメントも簡単で悪くない感じだった。

キーアクションにコマンドを割り振る

よくカスタムコントローラを作るっていう記事やサンプルがあるけれど、HTMLページに操作ボタンを付けたところで、フルスクリーンで視聴すると操作できないじゃん。
カスタムコントローラにカスタムボタンを追加することが出来ればいいんだけどね。これはこれで可能なのか？も含めて調べ中。
今はとにかく一番簡単確実な組み込み方法として、キーボードに機能を割り振ることでやってみる。

で、どうやるの？
MediaElement.jsのサイトでもサンプルでもキーアクションについての記述がどこにもない。
Player Options で、keyActions: [] って書いてあるだけ。仕方がないので（っていうかそうすべきなんだろうけど）JavaScriptソースを読んで、理解する。

標準キー操作

• [SPC]　　プレイ・ポーズ切り替え
• [UP]　　　サウンドボリュームアップ
• [DOWN]　サウンドボリュームダウン
• [LEFT]　　５％先送り
• [RIGHT]　５％後送り
• [’F’]　　　フルスクリーン切り替え

こんな操作ができるようになっていた。おおっ。既にシークが自分がアサインしたいキーに振られているじゃないですか。一瞬困ったけど、素晴らしいことにプレイヤーオプションの方で、どのくらいシークさせるかを定義する関数が独立しておりました。
デフォルト設定は、

                // default amount to move back when back key is pressed
                defaultSeekBackwardInterval: function(media) {
                        return (media.duration * 0.05);
                },
                // default amount to move forward when forward key is pressed
                defaultSeekForwardInterval: function(media) {
                        return (media.duration * 0.05);
                },

となっている。media.duration(全体の長さ）の５％っていう簡単な関数。これを上書きしてあげれば良さそう。

ビューの最後を以下のように変更

前回記事で
<%= javascript_tag "$('video').mediaelementplayer()" %>
としていたところを、
<%= javascript_include_tag "mediaelement_conf.js", :plugin => 'redmine_video' %>
に変更。HTMLにJavaScriptコードを長々と書きたくないから。

assets/javascripts/mediaelement_conf.js

$('video').mediaelementplayer({

    iPadUseNativeControls: true,

    defaultSeekBackwardInterval: function(media) {
        return 15;
    },
    defaultSeekForwardInterval: function(media) {
        return 15;
    },
});

プレイヤーオプションの中にその関数を書いてオーバーライドする。これでLEFT、RIGHTキーで１５秒スキップが出来るようになった。もちろんフルスクリーン状態でも大丈夫。
ただし、HTML5ビデオネイティブの時だけ。すなわちFirefoxでSilverlightプラグインで視聴しているときは効かないようだ。しょうがないけどちょっと残念。

GoogleTVコントローラもいけそう

ソースを読む限りだと、これらのキー操作がGoogleTVコントローラコードからも機能するように書かれている。ということは、Android端末でGoogleTVコントローラ使って自分の録画ビデオの再生制御が出来そうってことか。

カスタムキーアクション追加

keyActions:
[
 { keys: [キーコード,キーコード,・・・], action: function(player, media) {処理色々・・} },
 { keys: [キーコード,キーコード,・・・], action: function(player, media) {処理色々・・} }
]

って感じでmediaplayer()オプションのkeyActionsへ追加して行けば、どんどん自分のカスタム処理をキーに割り振っていける。

ブラウザのコントローラカスタマイズに拘らずにキーボードアクションの方が使い勝手がいいかもね。


今の悩みどころ

MediaElement.jsは使い勝手が良くてとってもいいんだけれど、jquery.jsを必要とする。他のフレームワークもほとんどがjquery依存のものが多い。
だけれど、redmine2.0.3はまだjqueryベースじゃないのだ。
幸いなことにprotptype.jsと混在していてもこのフレームワークの動作には問題ないらしい。

一番困るのがajaxだ。従来通りの記述で表現してみても、jqueryな書き方してみても、どちらもajaxによる非同期処理が機能しなくなってしまうのだ。

本来、rails3 + jqueryでもajaxは問題ないはず。だけれどもredmine2.0.3はrails3だけれどjqueryベースじゃないためか動作がわけわからない感じになる。

試しにjquery-railsをgemインストールして、プラグインのGemfileに'jquery-rails'を追加してみたけれど、希望通りに動いてはくれなかった。jquery.jsをインクルードしなければ昔通りのremote_functionとかはちゃんと動く。インクルードしなければね。MediaElement.jsは動かないけどね。本末転倒。

ここら辺でやりたいことは、再生イベントからフォームコミットをしてリモート（ajax）でサーバーへ送信したいのだ。出来ればページ更新は一切せずに非同期で行ったきりにさせたい。

自分はビデオ操作情報をサーバーへ送りたいだけなんだけど。なぜにそんな簡単そうなことがこんなに難しい・・・素人にはお手上げ気分。

この辺の実装をするには、最近リリースされたredmine2.1.2なら大丈夫なのだろうか？
話によると、redmine2.1.xはやっとjqueryベースになったということらしいけど。
もうしばらく今の状態を楽しんだら、やってしまおうかな。