目前在瀏覽器中播放音頻和視頻這些多媒體文件需要通過使用Adobe Flash這樣的插件實現，而插件的使用會增加瀏覽器的啟動時間、增加內存消耗、甚至會導致瀏覽器崩潰，而插件本身的穩定性也存在一定問題，特別是Flash，這個插件導致的諸多問題已經讓它聲名狼藉。Flash的普遍性是很有價值的，但軟件的質量還有很多不盡如人意的地方。
HTML5支持直接在瀏覽器中播放音頻和視頻文件，而不再需要使用插件，降低了多媒體網站開發難度的同時，又避免了因插件導致瀏覽器崩潰的問題。HTML5中的視頻功能是通過
<video width="500" height="380" controls autoplay>
<source src="video.webm"></source>
<source src="video.ogv"></source>
<source src="video.mp4"></source>
Video cannot be displayed
</video>
瀏覽器重點支持的視頻格式
HTML5還提供了豐富的DOM操作，來實現對視頻文件的控制。Video元素由HTMLVideoElement對象所代表，通過類似于document.getElementById("html5-video")的代碼即可獲得HTMLVideoElement對象，該對象繼承HTMLMediaElement，因此具有HTMLMediaElement對象的所有功能。可以通過HTMLVideoElement獲取視頻文件的基本信息，如autoplay(是否自動播放)、currentSrc(當前文件來源)、controls(是否加載媒體控件)、loop(是否循環播放)等等。當然，使用HTMLVideoElement對象也可以對媒體播放進行控制，主要有currentTIme(設置或返回媒體文件播放點)、duration(返回媒體文件總時長)、ended(判斷媒體文件是否已播放完)、pause()(暫停)、pause(判斷是否暫停)、play()(播放)等。通過靈活的使用HTMLVideoElement對象，將video標簽的媒體控件隱藏，用戶可以實現自己的定制化控件，包括暫停、播放、重播、快進/退后(一段時間)、分級快進/退后、截圖、視頻定位(按時間、按幀數定位)等等許多定制化功能。這里需要注意的有兩點。一是視頻截圖，video標簽本身并不支持視頻截圖功能，必須通過HTML5的canvas標簽實現，類似代碼如下：
<video id="html5-video" width="500" height="380" controls autoplay>
<source src="video.mp4" type='video/mp4'></source>
</video>
<canvas id="canvas" width="500" height="380"></canvas>
<script type="text/javascript">
var video = document.getElementById("html5-video");
var ctx = document.getElementById("canvas").getContext("2d");
function getPicture(){
video.pause();
ctx.drawImage(video, 0, 50, 500, 280);
}
</script>
當調用getPicture()方法時，當前視頻幀會被drawImage方法用來描繪畫布，完成截圖功能。二是幀的控制，video中并沒有基于幀的控制，所有的控制都是基于時間(秒)的，因此想要完成如抽幀、按幀定位、查看上一幀/下一幀等功能就需要用戶自己完成幀/秒間的換算。幀秒間換算用FPS(每秒傳輸幀數，Frames Per Second)實現，普通視頻的fps為25，即每秒有25幀，普通手機拍攝的視頻為30fps，高速攝像機拍攝的視頻可能達到120fps，可以看出對于不同的視頻源其fps是不同的，這也給基于幀的操作帶來的不便性，更加遺憾的是HTML5中并沒有提供能獲取視頻源FPS的屬性或方法。完整實例代碼如：
<html>
<head>
<meta charset="UTF-8">
<title>html5——video</title>
</head>
<div >
<input type="button" value="播放" onclick="doPlay()">
<input type="button" value="停止?" onclick="doStop()">
<input type="button" value="獲取時碼" onclick="doTimeCode()">
<input type="button" value="截圖" onclick="getPicture()">
<input type="text" id="time">
<input type="button" value="按時間定位" onclick="doLocation()">
<input type="text" id="zhen">
<input type="button" value="按幀定位" onclick="doLocation1()">
</div>
<div style="float:left;margin-right:20px">
<video id="html5-video" width="500" height="380" controls autoplay>
<source src="video.mp4" type='video/mp4'></source>
</video>
</div>
<canvas id="canvas" width="500" height="380"></canvas>
<div id="info"></div>
<script type="text/javascript">
var video = document.getElementById("html5-video");
var info = document.getElementById("info");
var ctx = document.getElementById("canvas").getContext("2d");
video.addEventListener("loadedmetadata", function() {
info.innerHTML += "<div>視屏分辨率："+video.videoWidth+"*"+video.videoHeight+"</div>";
}
);
function doPlay() {
video.play();
}
function doStop(){
video.pause();
}
function doTimeCode(){
video.pause();
info.innerHTML += "<div>當前時間："+video["currentTime"]+"</div>"
}
function getPicture(){
video.pause();
ctx.drawImage(video, 0, 50, 500, 280);
}
//按時間定位
function doLocation(){
doStop();
var value = document.getElementById("time").value;
video.currentTime=value;
//alert(video.currentTime);
setTimeout(function(){},1000);
ctx.drawImage(video, 0, 110, 500, 280);
}
//按幀定位，一秒25幀
function doLocation1(){
doStop();
var value = document.getElementById("zhen").value;
video.currentTime=value/25.0;
ctx.drawImage(video, 0, 110, 500, 280);
}
</script>
</body>
</html>
HTML5由于video、audio(音頻，操作類似沒有圖像的video，可以看成是video的子集)元素的引入確實給多媒體的應用帶來的很大的便利性，但其仍處在發展的初期階段，因此存在著瀏覽器適配、功能不完善(基于幀的控制)等功能。相信在HTML5不斷發展完善后，這些問題都會一一解決，HTML對原生音視頻的支持潛力是巨大的。
