HTML5のプレビュー

2007/11/13

HTML5のプレビューがA List Apartで紹介されていました。その他、videoタグとaudioタグとスクリプタビリティーについてなど、HTML5について紹介したいと思います。

HTML5からマークアップのやり方が大きく変わります。新しいタグが多く使えるようになります。文章構造は以前のXHTMLであれば以下のとおり。

<body>
  <div id="header">...</div>
  <div id="nav">...</div>
  <div class="article">
    <div="section">
      ...
    </div>
  </div>
  <div id="aside">...</div>
  <div="footer">...</div>
</body>

HTML5ではこのような文章構造を以下のようにマークアップすることができます。

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

よりXMLっぽくなってきた感がありますね。またその他のタグとしてHTML5ではFlashでembedタグなどを使用しなくても動画ファイルが読み込めます。その時使うのがvideoタグです。

<video src="sample.mov" autoplay></video>

videoタグで読み込んだ動画を制御するjavascriptもサポートされていたります。

<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
</script>
<input type=button onclick="playPause()" value="Play/Pause"/>

動画をリピートさせる場合は下記のようなスクリプトでリピートできます。

myVideo.addEventListener('ended', function () {
  alert('video playback finished')
} );

また下記のようなjavascriptでmp3を再生できちゃったりします。

new Audio("song.mp3").play();

Firefox3でもゆくゆくはこういったvideoタグやaudioタグがサポートされるみたいですね。 
Firefox 3 to feature native audio video support

参考元記事:HTML5 Media Support: video and audio tags and scriptability

この記事について