mp4 動画(ビデオ)を素の HTML ファイルを作っていろいろなブラウザ(古い IE とか)で再生できるようにするやり方(MediaElement.js)

背景

自分の Web サイト(ホームページ)などで動画(ビデオ)を再生できるようにしたいと言う要望は良く聞きます。
WordPress などの CMS を使っていれば、プラグインで対応するなど簡単な方法があるのですが、素の HTML で作られたサイトだと、なかなかいろいろなブラウザに対応させるのは大変です。

解決方法

いろいろなやり方はあるのですが、自分の中で簡単だと思った MediaElement.js を利用した方法を今回はご紹介します。

MediaElement.js はのサイトこちらから。

サイトにもやり方は載っていますが、自分の中での最低限のステップを載せておきます。

1. FTP サーバへ MediaElement のファイルをアップロードする
最低限必要なのは、ダウンロードした中にある「build」ディレクトリ。
Web サーバーがアクセスできる場所にアップロードします。

2. head タグ内の記述
下記を head タグ内に記述します。

[code lang=’html’]
[/code]

最低限で言えば jquery の読み込みは必要ないのですが、後のステップで書く JavaScript の記述が楽になるので、読み込んでおきます。

mediaelement-and-player.min.js は、圧縮済みのメインスクリプトです。

mediaelementplayer.min.css はプレイヤーのデザイン用 CSS なので、読み込んでおいた方が無難でしょう。

3. video タグの記述
下記を body タグ内に記述します。

[code lang=’html’]
[/code]

上記が全てではないですが、幅(width)、高さ(height)、mp4 動画のパスを指定(src)、ぐらい揃えればとりあえず OK。

id は複数の動画を同じ HTML 内に記述するのであれば、別の名前を指定してください(HTML の id 指定と同じです)。

poster には動画プレイヤーに表示する画像を指定してください。

preload は none にしておいた方が、HTML の読み込み時に勝手に動画が読み込まれなくなるので、サーバーの付加が減るのでおすすめです。

4. script タグの記述
下記のコードを、/body タグの直前など、video タグの記述よりも後に記述してください。

[code lang=’js’]
[/code]

以上です。

まとめ

たったこれだけ?で、mp4 動画一つ用意すればクロスブラウザで動画が再生できるようになるのは楽で良いですね。

また、mp4 へのエンコードなので、iPhone などスマホへの対応も簡単です。

こういったライブラリを無償で配布されている方には、本当に頭が下がります。

え?Webサイトのバックアップ、してないの!?

いざという時には復旧までしてくれる
『ワードプレス外部バックアップサービス』

■3つの特長
・自分でやらなくて良い
・いざという時の復旧付き
・外部サーバーにバックアップ

mp4 動画(ビデオ)を素の HTML ファイルを作っていろいろなブラウザ(古い IE とか)で再生できるようにするやり方(MediaElement.js)” に対して1件のコメントがあります。

  1. Toshiro Hata より:

    へぇー!

    こりゃ便利ですね!
    さっそく試してみます。

  2. Kryu^2 より:

    >Toshiro Hata さん
    コメントありがとうございます。

    是非試してみてください!

コメントを残す