MP4動画プレイヤー「Videojs HTML5 Player」

YoutubeやVimeo以外の動画をウェブサイトに埋め込みたいシチュエーションがありますよね。ワードプレスであれば作成済みのMP4を手軽に差し込むことができるのでプラグインをご紹介させていただきます。

MP4動画プレイヤー「Videojs HTML5 Player」

導入の前に少しだけVideo.jsをご紹介。カンタンに言えば無料動画プレイヤーですね。とはいえhtml5を使えばMP4動画の差し込みはできるので「Video.jsってどういう意味があるの？」と思った人は上級者です。

Video.jsの特徴

素のhtml5ではMP4を埋め込んでもブラウザ毎で異なって見えたり挙動も違ってきますよね。しかしVideo.jsであれば見た目に統一感を持たせることや動作も各ブラウザで共通化できたり仕組みもかなり柔軟。

MP4以外にWEBMとOGVファイルの表示にも対応しています。本題とはズレますがカスタムすればYoutube動画の差し込みも可能です。ただ、そもそもVideojs HTML5 Player自体が「MP4をYoutubeプレイヤーのように自社サイトへ埋め込むための手軽なスクリプト」なのでわざわざYoutubeを差し込む必要はありません。

本プラグインはVideojs HTML5 Playerのベーシックな機能をワードプレス専用でプラグイン化しています。

インストールする手順

管理画面の「プラグイン > 新規追加」からVideojs HTML5 Playerと検索すればOK。

有効化するだけで設定は必要ありません。

MP4動画をアップロード

メディアにMP4ファイルをアップロード。ファイルを押すと詳細画面に入ります。

そして「URLをクリップボードにコピー」でMP4動画までのパスをメモ帳等に保存しておきましょう。

動画をショートコードで設定

下記のフォーマットで差し込みましょう。

[videojs_video url="MP4動画ファイルまでのURLを貼り付ける"]

実際に差し込んだ例も貼っておきますね。

ページ側ではテーマのレイアウトに準じて表示されます。下記は同時にポスター画像を指定した状態です。

ショートコードのオプション

下記がショートコードのオプションとしてサポートされています。

１. WebMとOgvを指定する

閲覧環境に応じて最適な動画を表示するなら各動画をアップロードしてそれぞれ拡張子を設定。片方でもOK。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" webm="http://example.com/wp-content/uploads/sample.webm" ogv="http://example.com/wp-content/uploads/sample.ogv"]

２. 動画の横幅を指定する

表示させる動画の横幅値を指定する場合は「width」を設定。元々は100%表示です。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" width="480"]

３. 動画の初期読込みを指定する

ページを開いたタイミングで動画データのメタデータだけ読み込む場合は「preload」で設定。元々は何も設定しなくても自動で読み込まれます。あえて動画を読み込ませない場合は「none」も指定できます。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" preload="metadata"]

４. コントロールバーを指定する

再生バーを消す場合は「controls」を指定。元々は指定なしでtrueが設定。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" controls="false"]

５. 動画の自動再生を指定する

ページを開くと同時に再生されます。元々はボタンを押さなければ再生されません。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" autoplay="true"]

６. ポスター画像を指定する

初期状態のサムネイルを指定可能。元々は動画の開始映像が自動で設定。もしポスター画像を指定しなかった場合はスマートフォンでは再生ボタンと黒背景が表示。動画の1コマ目が自動設定されるのはPCのみ。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" poster="http://example.com/wp-content/uploads/sample.jpg"]

７. 動画の繰り返し再生を指定する

再生完了後にもう一度自動で動画が始まります。元々は指定なしでfalseが設定。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" loop="true"]

８. 動画を消音モードに指定する

再生時のボリュームが自動でミュートになります。元々は指定なしでfalseが設定。

[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" muted="true"]

まとめ

本日は「MP4の動画プレイヤー」を解説させていただきました。

カスタマイズ性も高くさまざまなウェブサイトで採用されているプレイヤーなので要注目です。対応ブラウザもかなり広め。サポートが終了した「IE8」に対応させることもできます。YoutubeでもVimeoでもない独自のプレイヤーが使われているウェブサイトは本記事で解説したような最新テクノロジーで支えられています。

オープンソースとして公開されているという点が嬉しいですよね。無料で商用利用も可能ということもあり有志によってワードプレス用プラグインとして使用することができるようになっています。感謝ですね。

補足

参考までにマーケティング視点の活用方法もご紹介させていただきます。たとえばランディングページ用にMP4動画を作成して本プラグインを使ってページ内に設置。再生バーを非表示化した状態で自動再生を有効化。こうすることでLP内に訪れたユーザーに対して限定性の高い動画を届けることも可能です。使い方次第ですよね。

・自動再生しない場合はポスター画像を設定して来訪者が視聴したくなる工夫をする
・再生バーをコントロール不可にする場合は動画の希少性を高める見せ方にする
・もしピクチャインピクチャでの表示に対応するなら再生バー表示の設定を忘れない

動画再生が指定時間を過ぎたら特定ボタンを表示させるといった改造をすればエバーグリーンローンチシステム的に活用することもできますよね。アイデア次第で可能性も広がります。ぜひご活用くださいませ。