HTML5のvideoタグ。
ビデオCODECとの関係もあり、かなり難題。

そもそもIE 8以下はvideoタグに対応していません。
FirefoxはビデオCODECがh.264 .mp4だとvideoタグでの動画再生ができません。
＊最新版Firefoxだとh.264 .mp4でも再生できるらしい。（未確認）
Firefox 21 auto plays MP4 files
こんな投稿もあるようなのでFirefox 21以降は再生できるのかも。

Chromeがmp4に対応し梯子を外された感じのFirefoxも対応しよっかなーって言ってましたね。

そんなこんなでHTML5 videoタグで動画再生させる時はFlash fallback playerを用意しvideoタグ非対応ブラウザはFlashの力をかり何事も無いように再生させる必要があります。

Video for Everybody! のように動画を複数CODEC用意し非対応ブラウザはダウンロードしてもらうって手もあります。

ありますが、お客さんからOKが出ることはあまりありません。

また、ブラウザごとにデザインが違うコントローラーも曲者です。
なぜかブラウザごとにコントローラー・デザインが違うのは極端に嫌われます。
これもどうにかしなければ…

で、このブログでも何度か登場したライブラリの登場です。
MediaElement.jsはFlash fallback playerもオリジナルなものが添付されている優れものです。
ほぼ希望通りの機能を実装可能です。

今回いくつかちょっとモゴモゴしてしまった対応があったのでメモっておきます。

ビデオコントローラー無し

コントローラーを消したい。

videoタグならcontrolsを書かなければ良いのですが、MediaElement.jsにはコントローラー無しの設定が無さそうです。

mediaelementplayer実行時の引数(Object)の設定で再生ボタンなどは消すことはできます。

mediaelementplayer({ features:[], alwaysShowControls: false } );

しかし半透明の黒い帯がHTML5 player上に残ってしまいます。

CSSで無理矢理消しました。

.mejs-container .mejs-controls { display: none !important; }

動画の上に丸い「再生ボタン」がまだ残ってます。
これもCSSでで無理矢理消しました。

.mejs-overlay-button { display: none !important; }

自動再生

再生をユーザーのクリックを待たずに行いたい。

var player = new MediaElement( "#video", {} );
player.play()

再生はMediaElement.jsが上手に行ってくれます。

iOSは自動再生できない

iOSはセキュリティ上の問題なのかユーザー操作を伴わない動画再生ができません。
iOS-Specific Considerations

preload and autoplay are disabled

と書かれています。
またiOSの動画再生はブラウザ内では行われません。

Androidは自動再生が可能です。
それぞれのOS設計思想によるものなのでしょうがiOSの振る舞いの方がユーザーとしては好感が持てます。
開発側としては困った問題です。
どうしようもありませんが…

動画再生後最終フレームで止めたい

videoタグだと動画再生後は最終フレームで止まります。
MediaElement.jsは先頭フレームに巻き戻すようです。
Option設定を見逃してるかもですが…

最終フレームをpngに書き出し動画再生後に動画の上に被せました。

var option = {
    success: function(player, node) {
        player.addEventListener( 'ended', function(e){
            $( "#endedImage" ).show();
        } );
    }
}

う〜ん、美しく無い。