Nov13
HTML5のプレビュー
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
▲TOP