動画ファイルの埋め込み [HTML5] [js] [jQuery]

html

<video src="動画ファイルのパス" controls></video>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

これだけで、動画ファイルを貼り付けられます。

• controlsオプションがないとコントローラーが表示されません。コントローラーの見た目はOS・ブラウザそれらのバージョンの組み合わせによって異なります。・・・困ります。
• その他自動再生、ループといった属性があります。また、poster属性でその動画のヒントとなる画像を表示させることもできます。ユーザー環境で利用できる動画が無い場合に表示させる画像なので（利用できる動画があっても再生前にあらかじめ表示されたりしますが）、動画の内容を表す画像がふさわしいです。
• 先にも書きましたように、コントローラーの見た目が環境によってまちまちなので、独自デザインをあてたいときはjsを駆使することになります。詳しくは以下を参考にしてみてください。
  ＜参考＞video要素、audio要素をJavaScriptから操作する － HTMLクイックリファレンス
  google先生に訊いてみても良いと思います。

css

video{max-width: 100%;height: auto;}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

videoタグにこのようにcssをあてておくと、スマートフォンなどで、動画の横サイズより画面が狭いときに画面に合わせて可変します。
また、サンプルのように親タグ内で動画を中央表示にさせたいときは親タグにalign:centerを設定しておくか、videoタグをdisplay:blockなどにしておいて、左右マージンをautoにするとよいです。

html

<video src="m/grahamekelaher.mp4" controls>
    <source src="ogv動画ファイルのパス" type="video/ogg">
    <source src="mp4動画ファイルのパス" type="video/mp4">
    <p>※ご利用のブラウザでは動画を見ることができません。</p>
</video>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

videoタグの中にタイプを指定して複数の形式の動画ファイルを指定できます。videoタグに対応していないブラウザに対してメッセージを表示させることもできます。

html

<video id="video" src="m/grahamekelaher.mp4">
    <source src="ogv動画ファイルのパス" type="video/ogg">
    <source src="mp4動画ファイルのパス" type="video/mp4">

    <embed src="mp4動画ファイルのパス" type="video/mp4" autostart="false">
</video>

<ul>
    <li><button onclick="videoPlay()">再生</button></li>
    <li><button onclick="videoPause()">一時停止</button></li>
</ul>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上記の複数のファイル形式でvideoタグ未対応のブラウザの場合、メッセージを表示させましたが、そのpタグの代わりにembedを記述します。

このサンプルではvideoタグに対応しているブラウザで独自の再生ボタンを設置したいので、buttonタグも記述しました。
buttonタグ（再生ボタン）をクリックしたら（onclick）、後述するvideoPlay関数を実行します（このサンプルでは一時停止ボタンも設置してみます）。
なお、どのvideoを再生させたいのかわかるようにvideoタグにidをつけます。id名は任意ですが、ここではvideoとしました。

css

button{
/*ボタンのデザイン*/
}
button.playing{
/*再生中の表示*/
}
button.pause{
/*一時停止中の表示*/
}
embed{height: 360px;width: 540px;} /*embedの表示サイズ*/

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

再生ボタン用のデザインをcssで設定します。
embedタグのサイズ指定は、cssではなく、タグのwidth属性・height属性で行っても構いません。

js

if (Modernizr.video) { //videoタグに対応している場合
    function videoPlay(){
        document.getElementById('video').play();
        $('li:first-child button').addClass('playing');
        $('li:last-child button').removeClass('pause');
        document.getElementById('video').addEventListener('ended', function(){
            $('li:first-child button').removeClass('playing');
            $('li:last-child button').removeClass('pause');
        }, false);
    }
    function videoPause(){
        if(document.getElementById('video').currentTime > 0 && !document.getElementById('video').ended){
            document.getElementById('video').pause();
            $('li:last-child button').addClass('pause');
            $('li:first-child button').removeClass('playing');
        }
    }
} else { //videoタグ未対応の場合
    $(function(){
        $('ul').remove();
    });
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

jsのみで記述することも可能ですが、今回はjqueryを使うので、jqueryライブラリを読み込んでいることが前提です。
また、ブラウザの判定をModernizrで行っているので、Modernizrのvideo要素で判定するjsを読み込んでいることも前提です。

1. if (Modernizr.audio) 〜 else 〜でvideoタグに対応しているかどうかを判定。未対応の場合の処理はelseの方に書く。
2. 2～10行目：buttonタグ（再生ボタン）がクリックされたときに実行したい処理をvideoPlay関数に記述（関数名は任意）。
3. 3行目：id[video]を再生。
4. 4行目：再生中なのがわかるようにボタンの表示を変えたいので、その設定をしているclass[playing]をbuttonタグに追加。
5. 6〜9行目：再生が終わったときの処理。ここではbuttonタグに追加しておいたclass[playing]を削除。
6. 11～17行目：buttonタグ（一時停止ボタン）がクリックされたときに実行したい処理をvideoPause関数に記述（関数名は任意）。
   再生中である（現在の再生位置が0秒を過ぎている）：document.getElementById('video').currentTime > 0　かつ
   再生が終わっていない：!document.getElementById('video').ended
   という状態であれば一時停止が機能するように判定。
7. 13〜15行目：条件を満たしていれば、id[video]の一時停止を実行。
   再生の時のように、ボタンのclassを追加したり削除したりして、状態を見た目に分かりやすい処理を加える。
8. 18～22行目：videoタグ未対応の場合の処理。ここでは不要なbuttonタグを削除（リストタグごと削除）。

document.getElementById('video')を変数に格納して、変数を使い回すことで、もう少しコードをスッキリさせたかったのですが、なぜか変数に格納するとjsが動作しなくなったのでやむなくこうなりました（原因不明）。通常は、変数に格納しても問題ないと思います。

プラグイン（サイト内リンク）を用いる方法もあります。