ほんっとにはじめてのHTML5とCSS3
<video>サンプル

<video>で動画ファイルを組み込む

この動画は NHKクリエイティブ・ライブラリー素材サイトからダウンロードして使用しています。

video要素だけで、動画ファイルを組み込む

<video>要素だけで動画ファイル(MP4ファイル(.mp4)約1.2MB)を組み込んでいます。
poster属性によりトップ画面(静止画面)が表示されます。

<video src="uchiage.mp4" width="640" height="360" controls poster="img/vid_img.jpg" preload="auto">
  <p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->

source要素で、複数のファイルを組み込む

<video>要素内に<source>要素で各ブラウザが対応する形式の動画ファイルを複数指定しています。
ブラウザは上から順に試み、サポートする形式をロードするとそれ以降は無視します。
<source>要素で指定する場合、<video>要素にsrc属性は不可です。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->

embed要素を代替コンテンツとして入れておく

<video>要素内に<embed>要素を代替コンテンツとして入れています。
これで<video>要素に対応していない古いバージョンのブラウザでも、プラグインによる再生ができます。
(IE8などで見ると、上の2つのサンプルは無理でも、ここだけ動画が再生できます。)
<video>要素に対応したブラウザでは、<embed>は無視されます。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <embed src="uchiage.mp4" width="640" height="380" type="video/mp4" autoplay="false" 
   controller="true" pluginspage="https://support.apple.com/ja_JP/downloads/quicktime">
</video>