HTML5的一個新特性就是内置對多媒體的支援，<video> 元素很好用，也支援了不錯的API接口，下面用了一個案例來說明怎麼對<video> 元素的控制。
<!DOCTYPE >
<html>
<head>
<title></title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function() {
$(":button").click(
function() {
var h;
switch ($(":button").index($(this))) {
case 0:
if ($("video")[0].paused) {
$("video")[0].play();
$(this).val("暫停");
}
else {
$("video")[0].pause();
$(this).val("播放");
break;
case 1:
h = document.getElementsByTagName("video")[0].height == 0 ?
document.getElementsByTagName("video")[0].videoHeight - 10 :
document.getElementsByTagName("video")[0].height - 10; ;
document.getElementsByTagName("video")[0].height = h;
document.getElementsByTagName("video")[0].videoHeight = h;
case 2:
document.getElementsByTagName("video")[0].videoHeight + 10 :
document.getElementsByTagName("video")[0].height + 10; ;
}
}
);
}
);
$("#video1").on(
"canplay",
function(e) {
$(":button").removeAttr("disabled");
console.log(e);
"canplaythrough",
$("ol>li:eq(0)").html("全部加載完畢，你可以斷網看電影了！");
$("#video1").bind(
"playing waiting ended play pause",
var vObj = document.getElementById("video1");
$("ol>li:eq(1)").html(vObj.duration + ":" + vObj.startTime + ":" + vObj.currentTime);
"stalled",
$("ol>li:eq(2)").html("你的網絡不給力啊，正在等資料呢");
"error",
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
$("ol>li:eq(3)").html("媒體資源擷取異常");
case e.target.error.MEDIA_ERR_NETWORK:
$("ol>li:eq(3)").html("網絡錯誤");
case e.target.error.MEDIA_ERR_DECODE:
$("ol>li:eq(3)").html("媒體解碼錯誤");
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
$("ol>li:eq(3)").html("視訊格式被不支援");
default:
$("ol>li:eq(3)").html("這個是神馬錯誤啊");
"suspend abort progress",
"progress error abort",
switch (e.target.readyState) {
$("ol>li:eq(3)").html("目前播放位置無有效媒介資源");
$("ol>li:eq(3)").html("加載中，媒介資源确認存在，但目前位置沒有能夠加載到有效媒介資料進行播放");
$("ol>li:eq(3)").html("已擷取到目前播放資料，但沒有足夠的資料進行播放");
case 3:
$("ol>li:eq(3)").html("已擷取到後續播放資料，可以進行播放");
case 4:
$("ol>li:eq(3)").html("可以進行播放，且浏覽器确認媒體資料以某一種速度進行加載，可以保證有足夠的後續資料進行播放，而不會使浏覽器的播放進度趕上加載資料的末端");
</script>
</head>
<body>
<video id="video1" autobuffer>
<source src="video-test.mp4" type="video/mp4" />
對不起你的浏覽器不支援HTML5的新特性，要不你下載下傳一個
<a href="http://info.msn.com.cn/ie9/">IE9</a>？
</video>
<input type="button" value="播放" disabled />
<input type="button" value="縮小" disabled />
<input type="button" value="放大" disabled />
<ol>
<li></li>
</ol>
</body>
</html>
對 Video的控制重要的方法就是play、paused、stop。重要的事件有：
canplay 通知使用者可以播放了，但不一定資源全部下載下傳好
canplaythrough 資源都下載下傳完畢了
error 出錯時候
事件參數中有一個target對象，他有一個readyState值，可以得到不同的狀态資訊。具體的值，可以通過開發者工具獲得，或看相關文檔。
本文轉自shyleoking 51CTO部落格，原文連結:http://blog.51cto.com/shyleoking/806941
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)