1. ·您当前的位置:主页 > 技术教程 > Html5技术 >

      [html5]html5倍速播放功能源代码实例

      时间:2019-03-21 11:28csdn.net
      [html5]html5倍速播放功能源代码实例,多倍速观看效果

      [html5]html5倍速播放功能源代码实例

      1. var myVideo = document.getElementById("video");//播放器 
      2. var coolPlay = document.getElementById("cool-play"); 
      3. var cPlay = document.getElementById("c-play");//播放按钮 
      4. var cProgress = document.getElementById("c-progress"); 
      5. var cPlayed = document.getElementById("c-played");//已经播放过的进度条 
      6. var cDrag = document.getElementById("c-drag");//进度条顶端的圆钮 
      7. var cCurrentTime = document.getElementById("c-currentTime");//当前时间span 
      8. var cTotalTime = document.getElementById("c-totalTime");//总时间 
      9. var loading = document.getElementsByClassName("icon-c-loading");//loading 旋转图标 
      10. var refresh = document.getElementsByClassName("icon-c-refresh");//重?#24405;?#36733;按钮 
      11. var voice = document.getElementsByClassName("i-voice");//音量按钮 
      12. var voice_mask = document.getElementsByClassName("voice-mask");//音量总进度条 
      13. var voice_bareddocument.getElementsByClassName("voice-bared");//现在的音量的进度条 
      14. var voice_dot = document.getElementsByClassName("voice-dot"); 
      15. var voice_num = 0.8;//初始化当前的音量 
      16. volume(voice_num);//把音量初始化到80 
      17. function volume(n){ 
      18.   myVideo.volume = n
      19.   voice_bared[0].style.height=n*100 + 'px'; 
      20. function playPause() { 
      21.   if(myVideo.paused) { 
      22.     Play(); 
      23.   } else { 
      24.     Pause(); 
      25.   } 
      26. }; 
      27. function Play(){ 
      28.   cPlay.className = "icon-c-pause"
      29.   myVideo.play(); 
      30. function Pause(){ 
      31.   cPlay.className = "icon-c-play"
      32.   myVideo.pause(); 
      33. refresh[0].onclick = function (){ 
      34.   Load(); 
      35. function Load(){ 
      36.   Pause(); 
      37.   myVideo.load(); 
      38.   cPlayed.style.width = 0+"%"; 
      39.   cDrag.style.display="none"
      40.   cCurrentTime.innerHTML = "00:00"
      41.   cTotalTime.innerHTML = "00:00"
      42. //播放时间及进度条控制 
      43. myVideo.ontimeupdate = function(){   
      44.   var currTime = this.currentTime,    //当前播放时间 
      45.       duration = this.duration;       // 视频总时长 
      46.   if(currTime == duration){ 
      47.     Pause(); 
      48.   } 
      49.   //百分比 
      50.   var pre = currTime / duration * 100 + "%"; 
      51.   //显示进度条 
      52.   cPlayed.style.width = pre
      53.   var progressWidth = cProgress.offsetWidth; 
      54.   var leftWidth = progressWidth*(currTime / duration); 
      55.   if(leftWidth > 8 && (progressWidth - leftWidth) > 4){ 
      56.     cDrag.style.display="block";     
      57.   } else { 
      58.     cDrag.style.display="none"
      59.   }   
      60.   cDrag.style.left = progressWidth*(currTime / duration)-4 + "px"; 
      61.   //显示当前播放进度时间 
      62.   cCurrentTime.innerHTML = getFormatTime(currTime,duration); 
      63.   cTotalTime.innerHTML = getFormatTime(duration,duration); 
      64. }; 
      65. //当浏览器可在不因缓冲而停顿的情况下进行播放时 
      66. myVideo.oncanplaythrough = function() { 
      67.   loading[0].style.display="none"
      68.   //当视频由于需要缓冲下一帧而停止 
      69. myVideo.onwaiting = function() { 
      70.   loading[0].style.display="block"
      71. //当用户开始移动/跳跃到音频/视频中的新位置时 
      72. myVideo.onseeking = function() { 
      73.   if (myVideo.readyState == 0 || myVideo.readyState == 1) { 
      74.     loading[0].style.display="block"
      75.   } 
      76. //拖拽进度条上的园钮实现跳跃播放 
      77. /*cDrag.onmousedown = function(e){  
      78.   if(cPlay.className == 'icon-c-pause') 
      79.     myVideo.pause(); 
      80.   loading[0].style.display="block"
      81.   document.onmousemove = function(e){ 
      82.     console.log("e.clientX:"+e.clientX); 
      83.     console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 
      84.  
      85.     var leftV = e.clientX - coolPlay.offsetLeft; 
      86.     console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 
      87.     console.log("leftV:"+leftV); 
      88.     if(leftV <= 0){ 
      89.       leftV = 0
      90.     } 
      91.     if(leftV >= coolPlay.offsetWidth){ 
      92.       leftV = coolPlay.offsetWidth-10; 
      93.     } 
      94.     cDrag.style.left = leftV+"px"; 
      95. //  console.log(leftV); 
      96.   }     
      97.   document.onmouseup = function (){ 
      98.     var scales = cDrag.offsetLeft/cProgress.offsetWidth; 
      99.     var du = myVideo.duration*scales; 
      100.     console.log("scales:"+scales); 
      101.     console.log("du:"+du); 
      102.     myVideo.currentTime = du
      103.     if(cPlay.className == 'icon-c-pause') 
      104.       myVideo.play();      
      105.     document.onmousemove = null
      106.     document.onmousedown = null
      107.   } 
      108. }*/ 
      109. //在进度条上点击跳跃播放 
      110. cProgress.onclick = function(e){ 
      111.   var eevent = e || window.event; 
      112.   console.log("当前点击的位置为:"+(event.offsetX / this.offsetWidth) * myVideo.duration); 
      113.   myVideo.currentTime = (event.offsetX / this.offsetWidth) * myVideo.duration; 
      114. }; 
      115. //根据duration总长度返回 00 或 00:00 或 00:00:00 三种格式 
      116. function getFormatTime(time,duration) { 
      117.   var timetime = time || 0;          
      118.  
      119.   var h = parseInt(time/3600), 
      120.       m = parseInt(time%3600/60), 
      121.       s = parseInt(time%60); 
      122.   ss = s < 10 ? "0"+s : s; 
      123.   if(duration>=60 && duration <3600){ 
      124.     mm = m < 10 ? "0"+m : m;  
      125.     return m+":"+s; 
      126.   } 
      127.   if (duration >=3600){ 
      128.     mm = m < 10 ? "0"+m : m;  
      129.     hh = h < 10 ? "0"+h : h; 
      130.     return h+":"+m+":"+s; 
      131.   }  
      132.   return s; 
      133. }    
      134. //音量的控制部分 
      135. //点击声音按钮?#20445;?#25226;视频静音 
      136. voice[0].onclick = function(){   
      137.   if(myVideo.muted){ 
      138.     voice[0].className="i-voice icon-c-voice"
      139.     myVideo.muted=false
      140.     if(voice_num >= 0 && voice_num <= 1){ 
      141.       volume(voice_num); 
      142.     } else { 
      143.       volume(0.8); 
      144.     }     
      145.   } else { 
      146.     voice_num = myVideo.volume; //记录下来静音前的音量 
      147.     voice[0].className='i-voice icon-c-mute'
      148.     myVideo.muted=true
      149.     volume(0); 
      150.   }   
      151. //当点击进度条上的一个位置?#20445;?#21464;化音量 
      152. voice_mask[0].onclick = function(e){ 
      153.   var eevent = e || window.event;   
      154.   if(event.offsetY >= 100){ 
      155.     voice[0].className='i-voice icon-c-mute'
      156.     myVideo.muted=true
      157.     volume(0); 
      158.     return; 
      159.   } 
      160.   volume((100-event.offsetY)/100); 
      161. }; 
      162. /*voice_mask[0].onmousedown = function(e){  
      163.   document.onmousemove = function(e){ 
      164.     console.log("e.clientY:"+e.clientY); 
      165.     console.log("e.offsetY:"+e.offsetY); 
      166.     console.log(e); 
      167.     console.log(voice[0].offsetTop); 
      168.     console.log(document.getElementsByClassName("voice")[0]); 
      169.     volume((100-e.offsetY)/100); 
      170.     if(event.offsetY == 100){ 
      171.       voice[0].className='i-voice icon-c-mute'
      172.       myVideo.muted=true
      173.       volume(0); 
      174.     }    
      175.   }     
      176.   document.onmouseup = function (){     
      177.     document.onmousemove = null
      178.     document.onmousedown = null
      179.   } 
      180. }*/ 
      181. //全屏的控制部分 
      182. var fullscreen = document.getElementById('cool-fullScreen'); 
      183. var FullScreenTF = true
      184. function launchFullscreen(element) { 
      185.   //此方法不能在异步中进行,否则火狐中不能全屏操作 
      186.   if(element.requestFullscreen) { 
      187.     element.requestFullscreen(); 
      188.   } else if(element.mozRequestFullScreen) { 
      189.     element.mozRequestFullScreen(); 
      190.   } else if(element.msRequestFullscreen) { 
      191.     element.msRequestFullscreen(); 
      192.   } else if(element.oRequestFullscreen) { 
      193.     element.oRequestFullscreen(); 
      194.   } else if(element.webkitRequestFullscreen) { 
      195.     element.webkitRequestFullScreen(); 
      196.   } else { 
      197.     alert("您的浏览器版本太?#20572;?#19981;支持全屏功能!"); 
      198.   } 
      199.   FullScreenTF = false
      200. }; 
      201. //退出全屏 
      202. function exitFullscreen() { 
      203.   if(document.exitFullscreen) { 
      204.     document.exitFullscreen(); 
      205.   } else if(document.msExitFullscreen) { 
      206.     document.msExitFullscreen(); 
      207.   } else if(document.mozCancelFullScreen) { 
      208.     document.mozCancelFullScreen(); 
      209.   } else if(document.oRequestFullscreen) { 
      210.     document.oCancelFullScreen(); 
      211.   } else if(document.webkitExitFullscreen) { 
      212.     document.webkitExitFullscreen(); 
      213.   } else { 
      214.     alert("您的浏览器版本太?#20572;?#19981;支持全屏功能!"); 
      215.   } 
      216.   FullScreenTF = true
      217. }; 
      218. fullscreen.onclick = function() {        
      219.   if(FullScreenTF) { 
      220.     launchFullscreen(coolPlay); 
      221.     fullscreen.className = "icon-c-shrink";          
      222.   } else { 
      223.     exitFullscreen(); 
      224.     fullscreen.className = "icon-c-enlarge";           
      225.   } 
      226. }; 

      来源:https://blog.csdn.net/yaozhiqi1905658804

      热门文章推荐

      请稍候...
      彩票软件开发公司