でじたるのもり

PCやスマホでできることをあれこれ見つけて書いてます

スマホでもPCでも、どのブラウザーでも再生できる動画の埋め込み方はこれだ！

埋め込み

動画を貼り付けるためのツールはYoutubeが最もポピュラーだけれど、何でもかんでもYoutubeにアップするっていうのもどうなの？という感じがしなくもない。ちょっとした映像を気軽に貼っておきたい時などは、動画データを直接サーバーにアップして自サイト内で再生できると便利。

どのブラウザーでも再生できるコンテンツなら安心

誰でも気軽に使えるFlashプレーヤーのスクリプトはいろいろなものが公開されているけれど、その中でも「MediaElement.js」は動きが軽い上に動作が安定している。HTML5に対応しており、mp4、webm、ogvなどに対応。mediaelementsを利用すれば、PCからもスマホからも環境に応じて再生可能なコンテンツを提供することが可能になる。

モジュールは公式サイトでダウンロード。johndyer-mediaelement-*****.zipのような名称のファイルをダウンロード・解凍して、その中のbuildフォルダをelementsか何かに名称変更してサーバーにアップしておく。HEAD部分のソースにこんな感じで書いて参照させればOK。

<script src="自URL/mediaelement/jquery.js"></script>
<script src="自URL/mediaelement/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="自URL/mediaelement/mediaelementplayer.css" />

HTML部分のソースはこんな感じ。

<video width="290px" height="210px"  poster="kumanomi.jpg" onclick=”this.play();” preload="none" controls loop>
  <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
　<source src='kumanomi.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <!-- Ogg/Vorbis for older Firefox and Opera versions -->
　<source src='kumanomi.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
　<source src=''kumanomi.webm' type='video/webm; codecs="vp8, vorbis"'>
  <p>このブラウザはHTML5 Videoに未対応です。代替でswfを再生します。</p>
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
  <object width="290" height="210" type="application/x-shockwave-flash" data="kumanomi.swf">
        <param name="movie" value="kumanomi.swf" />
        <param name="flashvars" value="controls=true&file=kumanomi.mp4" />
        <!-- Image as a last resort -->
      <img src="kumanomi.jpg" width="290" height="210" title="No video playback capabilities" />
  </object>
</video>
<script>
// jQuery method
$('video').mediaelementplayer();
// normal JavaScript
var player = new MediaElementPlayer('#player');
</script>

このソース内の動画ファイル名(kumanomi.mp4など)と表示サイズ(width="290" height="210")を自分のサイト環境に合わせれば出来上がり。

埋め込んでみると下のような感じになる。ブラウザーによって異なるファイルが再生されるのがわかるように、動画にWaterMarkをつけてある。

手間のかかる準備をフリーソフトで

何といっても手間がかかるのは、数種類の形式の動画データを用意しなくちゃいけないこと。フリーソフトのAny Video Converterを使ってカンタンに済ませれば最小限の時間で済む。有料のプロ版にアップすればさらに高機能。一度使うと手放せない感じ。

スマホ用のブラウザーも、ひと昔前のPC用ブラウザー戦国時代に似て、ありとあらゆるブラウザーが乱立している。Flash対応を謳ったものもあるけれど、どれもまだまだ一長一短で、ユーザー側も絞れないでいる。何で見ても崩れず、コンテンツも正常に表示できるサイトってのはなかなか難しいけれど、それができているサイトってのはそれだけで一味違う気がする。