·您當前的位置:主頁 > 技術教程 > 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

                          熱門文章推薦

                          請稍候...