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を利用することで、そんなめんどくさい対応が格段にラクになります。

Browser and Device support

上の表はMediaElement.jsのブラウザ及びデバイスの対応状況についてです。

とは言え、だったらYouTubeなりVimeoなりで、Embedすりゃいいんじゃね? っていうのもその通りで、実際僕自身あんまり映像を流す目的で使うことはあんまりないだろうな、と思っていたりするんですが、移行前のブログでPodcastをやっていたので、それをそろそろきちっと復活させようかなぁというのが最大の目的だったりします。オーディオファイルも再生できるので。

というわけで、取り敢えず今回は、近所をぶらっと回ってテストの素材を撮影、編集したものを流してみようと思います。映像は以下。

割とうちの近辺はどこの田舎だろうっていうくらい田園風景だったりするんですよね。

って、どうでしょ? 皆さんのブラウザで再生できてますかね?
一応、H.264、WebM、Oggの3ファイルをぶっ込んでありますけど。

もし、再生できない! という方がいましたら、是非コメントなりツイートなりで、お使いのブラウザとOSなんかを教えて頂けたらと思います。

現在、WordPressは独自のwp-mediaelement.jsを内蔵しています。
基本的な使い方はmediaelement.jsのものと変わりません。
ちなみに上の動画プレーヤーはWordPressデフォルトのものになっています。

「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

Avatar for ホシナ カズキ

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

Avatar for ホシナ カズキ

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

Avatar for ホシナ カズキ

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく