[追記]2010/07/27
すでに販売されているiPhone4（iOS4）でサンプルを検証したところ、埋め込みで再生はできなくなっていました。iOS4のリリース以前の3GS+iOS4では可能であったことを確認していますので、仕様の変更があった可能性があります。あらためて方法が分かれば記事におこしたいとおもいます。
iPhoneのMobile SafariではHTML5が使えるというのは以前に書いた記事でも紹介したことがあるのですが、HTML5の各要素がすべて完全に使えるというわけではありません。
その中の一つであるvideo要素はマークアップ上使うことは可能ですが、いざ動画を見ようとするとQuicktimeが起動するのでvideo要素を使うメリットがほとんどありませんでした。
しかしvideo要素はOS4.0からページに埋め込まれる形で再生できるようになります。
iAdの衝撃
皆さんiAdのデモは観たことがありますか？
iAdとはAppleが発表した新しいモバイル広告プラットフォームです。
iAdのデモ
このインタラクティブな広告はHTML5で作られているそうです。
それを聞いた上でこのデモを見ていると「あれ？なぜ動画がQuicktimeじゃない形で流れているんだろう」ということに気づました。
もしかしたらvideo要素の扱いが違うのかも？ということで、これを検証してみました。
HTML5 video要素のおさらい
HTML5 video要素のおさらいをします。
video 要素 - html5doctor - HTML5.JP
-
<video src="abc.mp4"></video>
例えばこのような形でシンプルにソースファイルを指定するだけで最低限OKです。
ここに自動再生や自動バッファ、動画の再生・停止などのコントロールバーの表示などをコントロールする属性を追加することができます。
もう一つ、video要素で注意すべきは動画のコーデックおよびファイル形式によって、ブラウザで再生できるものとそうでないものがあることです。
HTML5 のビデオ・コーデック
ただ今回のお話はiPhoneでのお話なので、iPhoneで再生させたい動画があればH.264で大丈夫です。
ファイルの形式いうと、.m4v、.mp4、.movが該当します。
というわけで検証画面
OS 3.x
OS 4.0
上記の画像を見てもらうと分かるかと思いますが、このように後者のOS4.0ではSafariの中で動画を再生できる形になっています。もちろん音声も流れます。
※一応デモページを置いておきますが、もちろんそれぞれの環境がないと再現されませんのでご注意ください。
http://dl.dropbox.com/u/468280/iphonedev/media/video.html
ちなみに冒頭でも少し書きましたが、OS3.xであってもQuicktimeが起動する形での再生は可能なので、HTMLをそれぞれのバージョン用に書き換えたりといったことは不要です。
そしてiPadではどうなの？
iPadではさすがに解像度も大きいこともあり、普通にobject要素で書いてもSafari上で再生できるようになっています。
まとめ
PC向けのサイトでは動画コンテンツを扱うサイトも多く、うまく使えば製品・サービスの魅力を伝える良いコンテンツになります。
現状でも動画をページ内に置くことは可能ですが、video要素には今回解説したような埋込ができる・できないという話だけではなく、CSS3、Javascript、APIを利用して色々なカスタマイズができます。
残念ながら見送られたFlash for iPhone（iPad）の代替と成り得るかどうかはわかりませんが、すくなくともiAdのNikeの広告のような面白いコンテンツをつくることができるうのは開発者としては楽しみに感じています。
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
ページの先頭に戻る
すみません、画面のOS 4.0のvideoElementsではムービーHTML上で再生されていますよね。ですが、デモをiPhoneで見ると別プレーヤーでビデオが立ち上がり、HTMLが後ろに行ってしまいます。 どうすればOS 4.0のvideoElementsの画像の様にHTML内でビデオを再生できるのでしょうか？ ご教授よろしくお願いいたします。
＞NJさん
記事に追記しましたが、どうやら埋め込みでの再生は普通にはできないようですね。このあたりの今の仕様を探っていないのでわからないのですが、また何かわかれば記事にしたいとおもいます。
そうですか、残念です。 海外のサイトでも埋め込みビデオの画像を見つけたので、過去どこかのバージョンではそうだったのかと思いました。
そのうちそのバージョンになるよう（汗)
期待して待ちたいと思います。 定期的にブログもチェックさせていただきます。
ご親切にありがとうございました。 m(_ _)m