首頁 > 開發者 > JavaScript
HTML5 多媒體video，autio使用樣本，html5autio
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AV</title> 6 </head> 7 <body> 8 <div class="content"> 9 <p>注意:audio標籤設定controls="controls"才可以再頁面中顯示</p> 10 <p>IE9開始支援</p> 11 <div class="audio"> 12 <audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop> 13 不支援audio 14 </audio> 15 </div> 16 <div class="video"> 17 <video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement"> 18 不支援video 19 </video> 20 </div> 21 <div class="networkState"></div> 22 <button id="getVideoURL">getVideoURL</button> 23 <button id="palyVideo">palyVideo</button> 24 <button id="pauseVideo">pauseVideo</button> 25 </div> 26 <script> 27 var page = { 28 init : function(){ 29 this.listener(); 30 }, 31 listener : function(){ 32 var video = document.getElementById('videoElement'); 33 34 //error屬性：不能正常讀取，使用媒體資料 35 video.addEventListener('error', function(){ 36 var error = video.error; 37 switch(error.code){ 38 case 1 : 39 alert("視頻的下載過程被中止"); 40 break; 41 case 2 : 42 alert("網路發生故障，視頻的下載過程被中止"); 43 break; 44 case 3 : 45 alert('解碼失敗'); 46 break; 47 case 4 : 48 alert("媒體資源不可用或是媒體格式不被支援"); 49 } 50 },false); 51 52 53 //networkState屬性:載入過程使用networkState屬性讀取當前網路狀態 54 video.addEventListener('progress',function(e){ 55 var networkStateDisplay = document.getElementById('networkState'); 56 if(video.networkState === 2){ 57 //計算已載入的位元組數與總位元組數 58 networkStateDisplay.innerHTML = "載入中...[" + e.loaded + "/" + e.total + "byte]"; 59 } 60 else if(video.networkState === 3){ 61 networkStateDisplay.innerHTML = "載入失敗"; 62 } 63 },false); 64 65 //使用currentSrc屬性：讀取媒體資料的URL地址(唯讀) 66 var videoURL = video.currentSrc, 67 videoURLBtn = document.getElementById('getVideoURL'); 68 videoURLBtn.onclick = function(){ 69 //這裡是空的，還不知道為什麼??? 70 console.log(videoURL); 71 } 72 //buffered屬性 73 74 //readState屬性 75 76 //seeking屬性與seekable屬性 77 78 //currenTime屬性 79 //startTime屬性 80 81 //duration屬性 82 83 //play屬性(開始時間,結束時間) 84 //paused屬性(true_暫停，false_播放) 85 //ended屬性(true_播放完畢，false_未完畢) 86 87 //defaultPlaybackRate,playbackRate屬性 88 89 //volume,muted屬性 90 91 /* 92 方法： 93 play(),播放 94 pause(),暫停 95 load(),重新載入 96 */ 97 98 //監聽視頻播放結束事件 99 //注意這裡不設定loop迴圈播放100 video.addEventListener('ended',function(){101 alert("播放結束");102 },true)103 104 var palyVideoBtn = document.getElementById('palyVideo'),105 pauseVideoBtn = document.getElementById('pauseVideo');106 //播放視頻play()107 palyVideoBtn.onclick = function(){108 video.play();109 }110 //暫停視頻pause()111 pauseVideoBtn.onclick = function(){112 video.pause();113 }114 115 /*116 canPlayType方法:117 Null 字元串——不支援118 maybe——可能支援119 probably：支援120 */121 var support = video.canPlayType("video/mp4");122 console.log(support);//maybe123 124 /*125 在媒體讀取和播放的過程中，還有一系列的事件。126 對這些事件的捕捉：127 (1)監聽的方式128 (2)擷取事件控制代碼129 */130 131 }132 }133 window.onload = page.init();134 </script>135 </body>136 </html>
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
