首页 > > 网页制作 > css >

HTML5 多媒体video，autio使用示例

2018-06-24 02:20:07来源：未知阅读 ()

  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>