HTML5:タグだけで簡単に映像/音声コンテンツを埋め込む (サンプルあり)
この記事について HTML5 から追加された動画/音声フォーマット埋め込み用のタグ、video/audio タグについて実際のコードサンプルを見ながら覚えていこうというエントリーです。 2011/11/10 時点で指定できる各属性についても説明しています。 このエントリーには H.264 コーデックと Ogg/Theora コーデックのサンプル動画を使用しています。 なお、HTML5 は未だ各ブラウザで対応中の技術です。 お使いのブラウザで正しく表示されない可能性がございます。 推奨ブラウザは Google Chrome 15.0.874.120 です。 HTML5 とは? 11年ぶりのバージョンアップとなる HTML(HyperText Markup Language) の最新バージョンです。 HTML5 では各タグの意味強化や再定義がなされています。 これにより今までよりも文書構造を意識した HTML ソースがマークアップできるようになりました。 このように要素ごとの意味を考えて文書構造を構築することをセマンティック化といいます。 セマンティック化には、人間は元より検索エンジン等のロボットにも HTML ソースを理解しやすくなるというメリットがあります。 video/audio タグとは? HTML5 で新たに実装された動画/映像コンテンツを埋め込むためのタグです。 これにより、HTML ソースを見た時に「ここは動画/音声コンテンツについて記述している部分だ」ということが一目で分かるようになりました。 もう一つの恩恵として flash 動画プレイヤーを埋め込むよりも記述が圧倒的に簡単になるということも挙げられます。 video 要素も audio 要素もメディア要素に含まれ、共通のメディア要素属性を指定することができます。 video タグで指定できる属性の紹介と使用例 最もシンプルな記述 <video src=”sample.mp4″></video> とりあえず表示できればいいという最低限の記述です。 src [...]



