7.動画を表示する


HTML5の最大の成果は、動画を静止画のように埋め込める<video>タグの登場です。webでの動画は、これまで大変でした。パラパラ漫画のように静止画を組み込んだ動画gifや、ブラウザにflashのプラグインを使い、flv形式の動画を埋め込むか、ダウンロードして、メディアプレーヤーで再生していました。動画は、windows系のaviやwmv、mac系のmovなど種類が多かったのですが、mp4に統一され、HTML5で埋め込むことが出来るようになったのです。それにともない、flashは殆どのブラウザで使えなくなりました。
<VIDEO SRC="ファイルアドレス"></VIDEO>
IMGタグに似ていますが、終了タグが必要です。この間に文字を入れると、対応していないブラウザで開いたときメッセージが出ます。実際には、もうそんな古いブラウザを使っている人(Xp時代のパソコン)はいないはずです。
タグのオプションがいろいろありますが、サイズ指定はIMGと同じです。
<video src="http://www.winboys.net/flv/sample.mp4" width=320 height=240></video>
これを書いて、html拡張子で保存して開くと、写真のように見えます。このままでは動きませんが、右クリックでメニューを表示し、コントロールを表示し、スタートをクリックすると動きます。

オプションに、 controls を入れると、最初からコントロールメニューが表示され、autoplay  を追加すれば、ページが開かれると自動で動画がスタートします。しかし、セキュリティのため autoplayが効かないブラウザもあります。(chromeなど)また、停止している時の画像を、poster="画像アドレス"で指定できます。
<video controls autoplay src="http://www.winboys.net/flv/sample.mp4" width=320 height=240 poster="http://www.winboys.net/flv/sample.jpg">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>
これをコピーして、メモ帳に張り付け、html拡張子で保存し、Wクリックで開きます。
<p>以降は、古いブラウザ用のメッセージです。無論、対応しているブラウザでは表示されません。
posterで静止画を指定しなくても、自動でコマ画像が選ばれるようです。

VIDEOタグは、今のところすべてのブラウザで対応しているのは、mp4しかありません。

●音楽ファイルMP3は埋め込めない
 音楽ファイルやビデオファイルは、オーディオビデオ業界の著作権管理が厳しく、インターネット上で自動で音楽を流すことは未だに出来ません。昔は、ページを開くと音楽がバックで流れるという機能がありましたが、そのために支払わなければならない使用料が高いので、音楽の公開は出来ません。しかし、動画の中の音楽は自動で再生されてしまうので、動画の自動スタートはグレーなのです。スライドショーで、音楽を背景に流す動画も、基本的には禁止です。youtubeには、複数の静止画をアップして音楽付きのスライドショーを作る機能がありましたが、著作権侵害になる動画が増えたので、今はスライドショー動画はアップできないようになっています。facebookも動画に含まれる音楽には厳しくて、花火大会の動画も音楽付きの花火の動画はアップできなくなっています。カーナビ動画も、ラジオがなっているものは要注意です。BGM用の、著作権フリーの音楽が配布されているので、ネットに公開するページに動画を使う際は注意してください。