MediaElement.jsを使ってHTML5ビデオを流せるようにした
YouTubeやVimeoなどを使わずに、HTML5とCSS3だけでプレーヤーを実装できる「MediaElement.js」。
WordPressではプラグイン化されており、導入も利用も結構ラクにできるということもあって、だいぶ前から導入を済ませてあったんですが、ちと忙しくて試すまでいかず、放置気味だったのを、漸く流せるように準備を整えてみました。
HTML5 Videoというのは、HTML5で新しく導入された新要素<video>を使って、FLASHを使わずに、動画ファイルを文章中に埋め込み再生させることができるもので、すでにYouTubeやVimeoなどが対応したことで知られています。
<img>要素を使って、画像を文章中に挿入するのとなんら変わらずに利用できるってのが利点でしょうかね。
ただ、ブラウザによって再生できるコーデックが異なることもあり、HTML5対応ブラウザの全てで観られるようにしようという場合、H.264、WebM、Oggの3つのファイルを用意しないといけないというデメリットもあったりします。
まぁ、この辺は今後HTML5が策定されていく中で一本化されるか、ブラウザ側がどれでも対応するかどちらかだとは思うんですがね･･･。
しかし、MediaElement.jsを利用することで、そんなめんどくさい対応が格段にラクになります。
上の表はMediaElement.jsのブラウザ及びデバイスの対応状況についてです。
とは言え、だったらYouTubeなりVimeoなりで、Embedすりゃいいんじゃね? っていうのもその通りで、実際僕自身あんまり映像を流す目的で使うことはあんまりないだろうな、と思っていたりするんですが、移行前のブログでPodcastをやっていたので、それをそろそろきちっと復活させようかなぁというのが最大の目的だったりします。オーディオファイルも再生できるので。
というわけで、取り敢えず今回は、近所をぶらっと回ってテストの素材を撮影、編集したものを流してみようと思います。映像は以下。
割とうちの近辺はどこの田舎だろうっていうくらい田園風景だったりするんですよね。
って、どうでしょ? 皆さんのブラウザで再生できてますかね?
一応、H.264、WebM、Oggの3ファイルをぶっ込んでありますけど。
もし、再生できない! という方がいましたら、是非コメントなりツイートなりで、お使いのブラウザとOSなんかを教えて頂けたらと思います。
基本的な使い方はmediaelement.jsのものと変わりません。
ちなみに上の動画プレーヤーはWordPressデフォルトのものになっています。