·您当前的位置:首页 > 技术教程 > 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");//重新加载按钮 
  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. //点击声音按钮时,把视频静音 
  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. //当点击进度条上的一个位置时,变化音量 
  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("您的浏览器版本太低,不支持全屏功能!"); 
  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("您的浏览器版本太低,不支持全屏功能!"); 
  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

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器