流媒体-播放器 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             #video{
  8                 width: 500px;
  9                 height: auto;
 10             }
 11             .progress{
 12                 margin-top:20px;
 13                 width: 500px;
 14                 height: 10px;
 15                 background: burlywood;
 16                 /*position: absolute;*/
 17                 border-radius:50px;
 18             }
 19             .handle{
 20                 width: 0;
 21                 height: 10px;
 22                 background: green;
 23                 border-radius:50px;
 24                 /*position: absolute;
 25                 left: 0;
 26                 top: 0;*/
 27             }
 28         </style>
 29     </head>
 30     <body>
 31         <video id = "video" src="A&V/Intermission-Walk-in_512kb.mp4"></video>        
 32         
 33         <div class="control">
 34             <input type="button" value="播放" />
 35             <input type="button" value="静音" />
 36             <!--初始时间-->
 37             <input type="button" value="00:00:00" />
 38             <!--总时间-->
 39             <input type="button" value="00:00:00" />
 40         </div>
 41         
 42         <!--进度条-->
 43         <div class="progress">
 44             <div class="handle"></div>
 45         </div>
 46                 
 47         <script>
 48             var video = document.getElementById("video");
 49             var btnArr = document.getElementsByTagName("input");
 50             var progress = document.querySelector('.progress');
 51             var handle = document.querySelector('.handle');
 52             
 53             var timer = null;
 54             var totalTime = 0;
 55             
 56             //总长度
 57             var progressLength = progress.offsetWidth - handle.offsetWidth;
 58             console.log(progressLength);
 59             
 60             //播放
 61             btnArr[0].onclick = function(){
 62                 if(video.paused){
 63                     video.play();
 64                     this.value = "暂停";
 65                     timer = setInterval(getVideoCurrentTime, 500)
 66                 }else {
 67                     video.pause();
 68                     this.value = "播放";
 69                     clearInterval(timer);
 70                 }
 71             }
 72             
 73             //静音
 74             btnArr[1].onclick = function(){
 75                 if(video.muted){
 76                     video.muted = false;
 77                     this.value = "静音";                    
 78                 }else {
 79                     video.muted = true;
 80                     this.value = "取消静音";
 81                 }
 82             }
 83             
 84             //监听视频总时间
 85             video.addEventListener("canplay", function () {
 86                 totalTime = video.duration;                
 87                 btnArr[3].value = changeTime(totalTime);
 88             })
 89             
 90             //当前时间
 91             function getVideoCurrentTime(){
 92                 //得到当前时间
 93 //                console.log(video.currentTime);
 94                 
 95                 //当前时间的值
 96                 btnArr[2].value = changeTime(video.currentTime);
 97                 
 98                 //改变进度条
 99                 var p = video.currentTime / video.duration * progressLength;
100                 if(p < progressLength){
101                     handle.style.width = p + "px";
102                 }else {
103                     btnArr[0].value = "播放";
104                     clearInterval(timer);
105                 }
106                             
107             }
108             
109             //改变时间格式
110             function changeTime(totalTime) {
111                 totalTime = parseInt(totalTime);                
112                 
113                 var h = Math.floor(totalTime/3600);
114                 h = h > 9 ?  h : "0"+h;                
115                 
116                 var m = Math.floor(totalTime%3600/60);
117                 console.log(totalTime%3600);                
118                 m = m > 9 ?  m : "0"+m;
119                 
120                 var s = totalTime%60;
121                 s = s > 9 ?  s : "0"+s;        
122                 
123                 return h+':'+m+':'+s
124             }
125             
126             
127             
128         </script>
129         
130     </body>
131 </html>

如果handle是可滑动的手柄，可以做出可拖动的效果，暂时未将手柄和进度条一起实现。望大家可以指点一下。

 1 //调节音量的逻辑            
 2             vHandle.style.left = (volume.offsetWidth - vHandle.offsetWidth) + 'px';
 3             
 4             vHandle.onmousedown = function(ev){
 5                 var offset = ev.offsetX;
 6                 
 7                 document.onmousemove = function(ev){
 8                     //鼠标在屏幕的x值
 9                     var x1 = ev.clientX;
10                     //进度距离屏幕的x值
11                     var x2 = progress.offsetLeft;
12                     
13                     var distance = x1 - x2 - offset;
14                     
15                     if(distance>=0 && distance<=volume.offsetWidth - vHandle.offsetWidth){
16                         vHandle.style.left = distance + 'px';
17                         //调节音量
18                         video.volume = distance/(volume.offsetWidth - vHandle.offsetWidth);
19                     }
20                 }
21                 
22                 document.onmouseup = function(){
23                     document.onmousemove = null;
24                     document.onmouseup = null;
25                 }
26                 
27                 
28             }
posted @ 2017-09-06 10:03  铜镜123  阅读(115)  评论(0)  编辑  收藏  举报