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