MediaElement.jsとは
HTML5埋め込み動画プレーヤーとは、いわゆるウェブサイトやブログの中で任意の位置で動画を再生できるプレーヤーです。こういったプレーヤーはいろいろあるのですが「MediaElement.js」はWordPressに標準搭載されているほど優秀なプレイヤーです。もちろん無料で使えます。
もちろん全ての動画形式を再生できるわけではありませんが、これさえ使い方を抑えておけばMP4は再生できますし、HLS（HTTP Live Streaming）にも対応しています。またYouTube、DailyMotion、Vimeo、Facebookの再生にも対応しているようです。アイデア次第でいろいろな使い方ができます。
MediaElement.jsの利点
表示した環境に合わせてファイル形式を選択できる
<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="myvideo.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="myvideo.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="myvideo.ogv" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvideo.mp4" />
<!-- Image as a last resort -->
<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
このような一つの埋め込みタグで、表示した環境によってファイル形式を選んで再生するという便利機能を備えています。もちろん各ファイル形式の動画を用意しておく必要はあります。
基本的にHTML5videoですが、HTML5には対応していない旧ブラウザでは、Flashプレーヤーで再生されるという、至れり尽くせりの仕様です。
WordPress標準搭載でコードが簡単
そしてなんと言ってもWordPressに標準搭載されていますので、ショートコードで「MediaElement.js」を使うことができます。
[video width="600" height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm"]
[video width="600" height="480" src="https://○○○○.com/○○○○.mp4"]
このように簡単に埋め込みタグを書くことができ、特にWordPressならお手軽に動画を導入することができます。
ネット上にある動画ファイルにも設定できるので便利です。でも直リンクはマナーが悪いのでやめましょう。
まとめ
大抵動画を表示すると言えば、一度Youtubeにアップしてから埋め込むとかしがちです。でもあの評判の良くない広告が表示されたりしますので、あまり好ましくありません。そんなとき「MediaElement.js」を使ってサラッと設定してしまえばお手軽に動画を再生できますので、場合によってはこちらほうが使いやすいです。
