VideoJS – HTML5 Video Player for WordPress

WordPressでフラッシュビデオを再生できるプラグイン「VideoJS – HTML5 Video Player for WordPress」のインストールと実装までをテストしてみました。

HTML5 Video Player | Video.js
http://www.videojs.com/

まずはプラグインをWordPressにインストール。
これはプラグインの検索からインストールできるので簡単です。インストールしたら有効化します。

ビデオファイルの用意

とりあえず再生する素材がないと話にならないので、適当なビデオファイルを用意・・・。
作成したファイルをサーバーにアップロードします。

アップしたmp4ファイルをプラグインプレイヤーで再生できるようにするわけですが、公式の埋め込み方法を下記デモページのソースを参考に設置していきます。

Video.js | HTML5 Video Player (Demo)
http://www.videojs.com/video-js/demo.html

デモページをよく見たらmp4形式以外にも、webmという形式とogvという形式の動画ファイルも必要みたいです・・・。
端折っても問題ないかも知れないけど、一応用意してみます。
webmとogv形式のコンバータはこちらを使用してみました。

Miro Video Converter FREE – Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
http://www.mirovideoconverter.com/

コンバートしたmp4とwebmとogvファイルをアップロード。
ビジュアルエディタからプラグインの埋め込み用アイコンをクリックして、各フォーマットのファイルURLを設定してページに埋め込んだ状態がこちらになります。

HTML5 video player 設置デモページ
http://demo.weblabyrinth.net/html5-video-player-demo/

むむ！？動かない・・・？IE8未満で閲覧したときはswf経由で再生するのは確認できますが、HTML5でうまく動作していないみたいですね。
只今何が悪いのか原因調査中です・・・。

原因というか仕様だったのですが、動作確認したブラウザがFirefox4で、mp4に対応していないとのこと・・・。しかし公式のサイトではwebm形式に切り替わってうまく再生されているので、まだ変なところはありそうですね・・・。調べてみると参考になりそうなサイトに巡り合えたため、こちらを見ながら紐を解いていくのが良さそうです。（このページはgoogle clomeで見たところ、普通に再生されました。）

HTML5で実現できるマルチメディア系機能　ここが違う！サンプルで見るHTML5
http://codezine.jp/article/detail/5615?p=2

HTML5リファレンス　<video>タグで動画を埋め込む
http://www.htmq.com/html5/004.shtml

2011-06-21追記
その後の調べで判ったのですが、当サイトがロリポップサーバを使用していて、デフォルトのサーバー設定でContent-typeにmp4とogvとwebmが登録されていないことがわかりました。
そのため、.htaccessでContent-typeの追記を行ったところ、無事再生の不具合が解決しました。

AddType "video/ogg" ogv
AddType "video/webm" webm
AddType "video/mp4" mp4

これでOKです！