在html5规范之前，如果希望在网页上播放视频、音频，通常都需要借助于第三方插件，比如FLASH，除此之外，开发者也可以自主开发多媒体播放插件，但是无论哪种方式，都需要在浏览器上安卓插件，HTML5新增了<audio../><video.../>两个元素，开发者可以通过两个元素在html页面上播放音频视频。

<audio src="" controls></audio>
<video src="" controls></video>

audio video支持的属性

属性名
说明
src
指定播放视频音频的URL地址

autoplay

音频视频加载完成后会自动播放
controls
显示播放控制条
loop
 重复播放
preload
预先加载
poster
播放之前，该元素将会显示该属性所指定的图片
width
视频播放器的宽度
height
视频播放器的宽度

HTMLAudioElement 与HTMLAudioElement的属性

属性名
说明
currentTime
返回播放器当前所处的时间点
paused
true表示暂停
played
播放状态
startTime
返回播放器播放音频视频的开始时间，通常返回0

audio、video元素所持有的事件

事件
说明
onpause
暂停触发该事件
onplaying
正在播放触发该事件
onerror
加载数据出错是触发该事件
onplay
开始播放时触发该事件
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 视频播放 </title>
</head>
<body>
<h2> 视频播放 </h2>
<video id="mv" src="movie.webm" loop>
您的浏览器不支持video元素
</video><br/>
<input id="bn" type="button" value="播放"/><span id="detail"></span>秒
<script type="text/javascript">
    var bn = document.getElementById("bn");
    var mv = document.getElementById("mv");
    var detail = document.getElementById("detail");
    // 为video元素的ontimeupdate事件绑定监听器
    mv.ontimeupdate = function()
    {
        detail.innerHTML = mv.currentTime + "/" 
            + mv.duration;
    };
    bn.onclick = function()
    {
        if(mv.paused)
        {
            mv.play();
            bn.value = "暂停";
        }
        else
        {
            mv.pause();
            bn.value = "播放";
        }
    }
</script>
</body>
</html>