HTML5的一個新特性就是內置對多媒體的支持,<video> 元素很好用,也支持了不錯的API接口,下面用了一個案例來說明怎么對<video> 元素的控制。
在延邊朝鮮族等地區(qū),都構建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力,以專注、極致的服務理念,為客戶提供做網站、成都網站設計 網站設計制作定制開發(fā),公司網站建設,企業(yè)網站建設,成都品牌網站建設,成都全網營銷推廣,外貿營銷網站建設,延邊朝鮮族網站建設費用合理。
- <!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("已獲取到后續(xù)播放數據,可以進行播放");
- break;
- default:
- case 4:
- $("ol>li:eq(3)").html("可以進行播放,且瀏覽器確認媒體數據以某一種速度進行加載,可以保證有足夠的后續(xù)數據進行播放,而不會使瀏覽器的播放進度趕上加載數據的末端");
- 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值,可以得到不同的狀態(tài)信息。具體的值,可以通過開發(fā)者工具獲得,或看相關文檔。
網頁名稱:HTML5VideoDOM入門體驗
本文URL:http://muchs.cn/article32/geojpc.html
成都網站建設公司_創(chuàng)新互聯,為您提供搜索引擎優(yōu)化、商城網站、小程序開發(fā)、自適應網站、全網營銷推廣、外貿網站建設
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯