HTML5 媒体支持

来自 HTML5 草案规范的另一个不错的功能现已在适用于 Mac OS X 的 WebKit 每夜构建版中提供。新的 HTML5 <video> 和 <audio> 元素 增加了在网页中嵌入视频和音频内容的原生支持。 它们还提供了丰富的脚本 API 来控制播放。将视频添加到网页几乎就像添加图片一样简单

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

要创建一个为用户提供基本播放控制的按钮，您可以这样做： 

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

该规范还定义了一组事件，可用于响应媒体播放和加载状态的变化。例如

myVideo.addEventListener('ended', function () {
  alert('视频播放结束')
} );

要从 JavaScript 播放音频，您可以简单地这样做

var audio = new Audio("song.mp3");
audio.play();

该实现仍在进行中，规范的所有功能（包括提供原生播放控制的“controls”属性）尚未全部实现。当前实现支持 QuickTime 支持的所有格式，包括已安装的第三方编解码器。

下面的示例使用了 <video> 元素的“poster”属性来在视频加载前显示初始图像，使用进度事件来跟踪加载，并使用播放/暂停/结束事件来使叠加按钮反映视频的状态。