video 要素
<video> 要素は、HTML5 で導入されたばかりの新要素だ。この要素を使って、自分のウェブサイトに動画を入れたり再生することができるようになるんだ！この要素のデータはビデオを想定しているが、それに関連するオーディオやイメージも入れることができるんだ。
もちろん、これが動くブラウザーはまだ少ししかない：Safari 3.1+, Firefox 3.5+, Opera の最新ビルド（そうだ、Chrome の次期リリースも動くかもしれない）。
‘時代遅れ’ の方法
うっ、このおぞましいコードを見てくれ：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>オエッ！ ご存じの通り、このコードには Flash が必要だ。よく Javascript を通して配信することもあるが、完全ではない。
HTML 5 のやり方
ナイスで、クリーンで、小さなコードだ：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
<p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>
Autoplay
video タグには、ページがロードされるときにビデオを再生することができる属性がある。
<video src="abc.mov" autoplay>
</video>でも、自動再生は良くないんだ、いいかい？ Youtube などはビデオを自動再生している。しかし、あなたが自分の HTML5 サイトに向けて発射ボタンを押す前に、ビデオを自動再生すべきかどうかを良く検討してほしい。
ダウンロード
もし、ブラウザーが video タグで何をすべきか分かっていない、または、表示エラーがあったら、あなたは、代わりに、そのビデオのダウンロードを用意することができる：
Autobuffer
autobuffer 属性は、autoplay を使わないけれども、ページやサイトの運営者がそのビデオがある時点で見られるだろうと考える場合に使うのだ。ビデオはバックグラウンドでダウンロードされる。だから、ユーザーがビデオの再生を開始したとき、少なくとも、コンテンツのいくらかは再生することができるだろう。もし、autoplay と autobuffer の両方が使われたら、autobuffer は無視される。
ここで言っておかなければいけないことがある。ブラウザーは、autobuffer があろうがなかろうが、とにかく自動的にビデオをダウンロードする。あなたは、それに関して、何もすることはできない。これは、帯域幅とローディング時間の問題を抱えている。特に、あなたがページ上に数多くのビデオを入れた場合だ。
Poster
ビデオのフレーム（.jpg, .png, など）を表示するには、poster 属性を使う。これは、ビデオが何かしらの理由でロードされなかった場合を想定したものだ。それは、ローカルのイメージでも良いし、ウェブ上のどこかにあるものでも良い。
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>あなたは poster 属性を使うべきだ。何も見ることができないユーザーがかわいそうだろ。
Controls
この属性を加えるということは、あなたのビデオ用の再生/一時停止などのボタンを使うことができることを意味する。Safari はかっこいいデフォルトのコントロールを持っているが、自分で作ることもできる。
字幕
字幕向けの属性はまだないが（HTML 5 グループのみなさん、よろしく）、ちょっと言いたいことがある。個人的に、私は JW FLV プレーヤーがそれを扱う方法が好きだ。しかし、これはとても興味深い読み物だ：http://blog.gingertech.net/2008/12/12/attaching-subtitles-to-html5-video/
しかし、理想的には、Javascript を使わなくても、字幕や説明用オーディオを配信することができるのが良いだろう。
現在の問題
コーデック
私は、video/audio コーデックのエキスパートになれと主張するつもりはない。しかし、この領域には、少々やっかいな問題がある。その説明には、この記事がいいだろう。
Internet Explorer
IE は分からないが、マーケット・リーダーとして、これに対処する必要があるだろう。私たちは、IE に関してちょっとしたヒントとチップスを持っており、おかげさまで、ここ HTML 5 Doctor で、それを近々公開することになりそうだ。
物理的なファイル
今のところ、video タグは、物理的なファイルにリンクする必要がある（トップにある例を見てほしい）。私たちがここで必要とするものは、そう、YouTube のビデオを、video タグを使って、インポートする方法だ。これまで私たちが embed タグでしていたように。
私がこの記事を書きはじめたとき、私がしたかったことは、2008 年にさかのぼって始まっていた。多くのみなさんご存じの Rickroll だ。しかし、今のところ、私は、video タグでそれを実現する方法を見つけていない。
これが、あなたが video タグを使ってすることができるはずと私が思うことだ：
<video src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" autoplay>
</video>もしできたらすごいだろ？
結論
私は、このタグが本領を発揮するまで、まだまだ長い道のりとなると思う。コーデックの問題はどんどん解決していくだろう。しかし、あなたは、そのコードに、ダウンロードリンクのような、フォールバックを入れることができる。あなたは、video, object, embed 要素の組み合わせを使うことができるが、そのマークアップはかなりゾッとする：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>当面の間は
もし、まだ video タグを使いたくないなら、ビデオを表示する妥当な XHTML コードがある：
<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>