mp4 動画(ビデオ)を素の HTML ファイルを作っていろいろなブラウザ(古い IE とか)で再生できるようにするやり方(MediaElement.js)
目次
背景
自分の Web サイト(ホームページ)などで動画(ビデオ)を再生できるようにしたいと言う要望は良く聞きます。
WordPress などの CMS を使っていれば、プラグインで対応するなど簡単な方法があるのですが、素の HTML で作られたサイトだと、なかなかいろいろなブラウザに対応させるのは大変です。
解決方法
いろいろなやり方はあるのですが、自分の中で簡単だと思った MediaElement.js を利用した方法を今回はご紹介します。
サイトにもやり方は載っていますが、自分の中での最低限のステップを載せておきます。
1. FTP サーバへ MediaElement のファイルをアップロードする
最低限必要なのは、ダウンロードした中にある「build」ディレクトリ。
Web サーバーがアクセスできる場所にアップロードします。
2. head タグ内の記述
下記を head タグ内に記述します。
[/code]
最低限で言えば jquery の読み込みは必要ないのですが、後のステップで書く JavaScript の記述が楽になるので、読み込んでおきます。
mediaelement-and-player.min.js は、圧縮済みのメインスクリプトです。
mediaelementplayer.min.css はプレイヤーのデザイン用 CSS なので、読み込んでおいた方が無難でしょう。
3. video タグの記述
下記を body タグ内に記述します。
[/code]
上記が全てではないですが、幅(width)、高さ(height)、mp4 動画のパスを指定(src)、ぐらい揃えればとりあえず OK。
id は複数の動画を同じ HTML 内に記述するのであれば、別の名前を指定してください(HTML の id 指定と同じです)。
poster には動画プレイヤーに表示する画像を指定してください。
preload は none にしておいた方が、HTML の読み込み時に勝手に動画が読み込まれなくなるので、サーバーの付加が減るのでおすすめです。
4. script タグの記述
下記のコードを、/body タグの直前など、video タグの記述よりも後に記述してください。
[/code]
以上です。
まとめ
たったこれだけ？で、mp4 動画一つ用意すればクロスブラウザで動画が再生できるようになるのは楽で良いですね。
また、mp4 へのエンコードなので、iPhone などスマホへの対応も簡単です。
こういったライブラリを無償で配布されている方には、本当に頭が下がります。
10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント
あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい！と思ったことはありませんか？
私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。
それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。
しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。
そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。
・ワードプレスを使いこなせるコツを知りたい！
・自分にピッタリのサーバーを撰びたい！
・無料ブログとの違いを知りたい！
・あとで悔しくならない初期設定をしておきたい！
・プラグイン選びの方法を知っておきたい！
・SEO対策をワードプレスで行うポイントを知りたい！
・自分でデザインできる方法を知りたい！
という方は今すぐ無料でダウンロードしてください。
期間限定で、無料公開しています。
※登録後に表示される利用条件に沿ってご利用ください
へぇー!
こりゃ便利ですね!
さっそく試してみます｡
>Toshiro Hata さん
コメントありがとうございます。
是非試してみてください！