2011-07-22の投稿の「HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js」その後です。

2011-07-22の投稿から2年が経ちました。
2年はネットの世界では大昔な感もあります。
VideoJS, MediaElement.js双方ともアップデートされ再生環境（OS, Browser共々）進化しています。

久しぶりにHTML5 Videoの実装する機会がありそれぞれのライブラリを使用した感想を記録しておきます。

HTML5 Video実装方法。

1. リンクをクリック
2. モーダルウインドウを開
3. モーダル内でVideo再生

試行錯誤を重ねた結果モーダル内コンテンツは外部ファイル(HTML)としiframe内に読み込む方式が一番安定していました。

動画: mp4
対応環境: IE 6 ~ 11, Safari 5 ~ 6, Firefox 最新版
スマホ: mp4へ直リンク
テストサーバー: Basic認証あり

VideoJS

VideoJS
Flash Fallback PlayerがFlowplayerからオリジナルのものに変更されていました。
Flowplayerのライセンスなどで同梱できなくなったための処置かなぁ？

試したところ今回の条件では使えないと判断しました。

以下、理由です。
コントローラー表示設定CSSがIE6, IE 7には対応していない。
＊CSSをoverrideして表示させることは可能です。
＊いくつかのパーツを画像で作成する必要があります。

＊VideoJSはIE 8からサポートなのかも。

IE 9, IE 10で動画再生できない環境が発生しました。
– すべてのマシンでは無く再生可能なマシンもあり原因は不明でした。
– Basic認証を解除しても再生できないマシンでは再生できないままでした。
IE 9, IE 10はVideoJSを走らせずネイティブ・プレイヤーで再生させました。

Flash Fallback Playerが再生終了をライブラリ内で検出できない？
– 動画終端に達するとローディングが表示される。
– この状態で再生ボタンをクリックしても反応せず、再再生ができない。
イベントハンドラを設置し再生終了イベント”ended”を取得し先頭に巻き戻す処理を追加し対応しました。
IE 6, 7, 8はこれで対応できましたが、Firefoxでは再生不能になるケースが残ったままになりました。
– Firefoxは1回目の”ended”は取得可能ですが、2回目の”ended”が発生せず2回目の再生終了後は取得不可能なためローディングが表示されたまま操作不能になります。

Firefoxの2回目問題が解決できず使用には至りませんでした。

古いAPI Documentがサイト内に残っており少々混乱しました。
githubのDocumentが最新版に対応しています。

MediaElement.js

MediaElement.js
最終的にMediaElement.jsを使い納品しました。

まず最新版のMediaElement.js(2.13.1)はIE 6でエラーが出て使用できませんでした。
少し前のバージョン(2.12.0)を使いました。
ただこのバージョンのminifyされたファイルにconsole.logが残ったままでした。
再生 / 一時停止　時にlogが出るようになっていて古いIEでエラーが出てしまいます。
console.logを上書きし対処しました。

Safari 5 + Basic認証で再生できないマシンがあった。
同条件で再生出来るマシンもあり原因は不明です。

再生不可能なマシンはBasic認証を解除しても再生出来ません。
Safari 5はMediaElement.jsを使わずネイティブ・プレイヤーで表示させることにしました。

おまけ、やっぱりFlashで再生

IE 9以上は AddType video/mp4 .mp4 が設定されていないと再生出来ないようです。
運用サーバーには設定されておらず再生できません。

またコントローラーは .svg ファイルが使われています。
非対応サーバーだと表示されません。
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
AddType を追加する必要があります。

残念ながら運用サーバーは .htaccess の設置が許されておらず conf ファイルの変更も不可能だそうです。

Flash(ActionScript)でPlayerを作るのが良さそうです。
というか作り直してます。

【教訓】
サーバー設定を触れない、古いサーバーでのHTML5 Video運用は危険！