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 空字符串——不支持 118 maybe——可能支持 119 probably：支持 120 */ 121 var support = video.canPlayType("video/mp4"); 122 console.log(support);//maybe 123 124 /* 125 在媒体读取和播放的过程中，还有一系列的事件。 126 对这些事件的捕捉： 127 (1)监听的方式 128 (2)获取事件句柄 129 */ 130 131 } 132 } 133 window.onload = page.init(); 134 </script> 135 </body> 136 </html>