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なんかを教えて頂けたらと思います。これでほぼ問題ないかなという状況であれば、近日中にPodcastを復活させるべく動きますので。
是非ともご協力いただければ幸いです。
Comments