纯html+css+js自制视频播放器(video标签倍速播放)

<!DOCTYPE html>
<html>    
<head>        
<meta charset="UTF-8">       
 <title>视频播放器</title>    
 </head>    
 <body>        
 <div style="width: 90%;margin:0px auto">            
 <video id="bofan" src="./kecheng-1.mp4" width="100%" autoplay controls></video>        
 </div>        
 <div style="text-align: center;">        
 <button onclick="prep()">上一个视频</button>        
 <select onchange="videoS()" id="speedO">            
 <option value ="1">1</option>            
 <option value ="1.25">1.25</option>           
  <option value="1.5">1.5</option>            
  <option value="2">2</option>          
  </select>         
   <button onclick="next()">下一个视频</button>        
   </div>        
   <script>            
   let video=document.getElementById("bofan")            
   function videoS(){                
   console.log(4444)                
   let select=document.getElementById("speedO")                
   let i=select.selectedIndex;               
    let option=select.options[i].text;                
    video.playbackRate=option;           
     }            
  function prep(){               
          let i=video.src.split('-')[1].split('.')[0];            	     if(i>1){                    
          video.src=`./kecheng-${i-1}.mp4`;                
          }           
           }            
 function next(){      
      let i=video.src.split('-')[1].split('.')[0];               
            if(i<4){                   
             video.src=`./kecheng-${i+1}.mp4`;                
             }    
} 
 </script>  
 </body>
  </html>

效果图:
纯html+css+js自制视频播放器(video标签倍速播放)_第1张图片

你可能感兴趣的:(前端,html,javascript,css)