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; break; case 2: 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; break; } } ); } ); $( function() { $("#video1").on( "canplay", function(e) { $(":button").removeAttr("disabled"); console.log(e); } ); $("#video1").on( "canplaythrough", function(e) { $("ol>li:eq(0)").html("全部載入完畢，你可以斷網看電影了！"); console.log(e); } ); $("#video1").bind( "playing waiting ended play pause", function(e) { var vObj = document.getElementById("video1"); $("ol>li:eq(1)").html(vObj.duration + ":" + vObj.startTime + ":" + vObj.currentTime); console.log(e); } ); $("#video1").on( "stalled", function(e) { $("ol>li:eq(2)").html("你的網路不給力啊，正在等資料呢"); console.log(e); } ); $("#video1").on( "error", function(e) { switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: $("ol>li:eq(3)").html("媒體資源擷取異常"); break; case e.target.error.MEDIA_ERR_NETWORK: $("ol>li:eq(3)").html("網路錯誤"); break; case e.target.error.MEDIA_ERR_DECODE: $("ol>li:eq(3)").html("媒體解碼錯誤"); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: $("ol>li:eq(3)").html("視頻格式被不支援"); break; default: $("ol>li:eq(3)").html("這個是神馬錯誤啊"); break; } console.log(e); } ); $("#video1").on( "suspend abort progress", function(e) { var vObj = document.getElementById("video1"); $("ol>li:eq(1)").html(vObj.duration + ":" + vObj.startTime + ":" + vObj.currentTime); console.log(e); } ); $("#video1").on( "progress error abort", function(e) { switch (e.target.readyState) { case 0: $("ol>li:eq(3)").html("當前播放位置無有效媒介資源"); break; case 1: $("ol>li:eq(3)").html("載入中，媒介資源確認存在，但當前位置沒有能夠載入到有效媒介資料進行播放"); break; case 2: $("ol>li:eq(3)").html("已擷取到當前播放資料，但沒有足夠的資料進行播放"); break; case 3: $("ol>li:eq(3)").html("已擷取到後續播放資料，可以進行播放"); break; default: case 4: $("ol>li:eq(3)").html("可以進行播放，且瀏覽器確認媒體資料以某一種速度進行載入，可以保證有足夠的後續資料進行播放，而不會使瀏覽器的播放進度趕上載入資料的末端"); break; } console.log(e); } ); } ); </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> <li></li> <li></li> <li></li> <li></li> </ol></body></html>
對 Video的控制重要的方法就是play、paused、stop。重要的事件有：
canplay 通知使用者可以播放了，但不一定資源全部下載好
canplaythrough 資源都下載完畢了
error 出錯時候
事件參數中有一個target對象，他有一個readyState值，可以得到不同的狀態資訊。具體的值，可以通過開發人員工具獲得，或看相關文檔。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
