您现在的位置是:首页>博客详情

网页播放器自定义倍速播放

FreshMan2021年09月02日 10:40倍速播放692

简介网页播放器自定义倍速播放,可设置播放器的播放速度为1,2,3,5,6,7等自定义播放速度。利用html5的特性进行处理。

        一般网页播放器的速度限制在最高两倍速播放,通常这就符合一般的要求了。但是确实有时候需要突破这个限制,比如在用于视频审核时,通常会要求超过2倍速进行播放,审核。所以请看下面代码,突破2倍速播放限制。

        

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>倍速播放视频</title>
</head> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button> 
  <button onclick="makeSmall()">缩小</button> 
  <button onclick="makeNormal()">普通</button> 
  <button onclick="getPlaySpeed()" type="button">当前播放速度</button> 
  <button onclick="setPlaySpeed()" type="button">将视频设定为6倍播放速度</button> 
  <br> 
  <video id="video" width="600" autoplay controls> 
    <source src="https://vd3.bdstatic.com/mda-mi127hjc3f72vvat/540p/h264_cae/1630546445792886684/mda-mi127hjc3f72vvat.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1630551220-0-0-f0fe9f0399ff06cab15c8c3ff32d5a5f&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=" type="video/mp4">
    TONY提示:您浏览器不支持 HTML5 video 标签。测试视频.mp4 </video> 
</div> 
<script>  
var myVideo=document.getElementById("video");  
function getPlaySpeed() { 
    alert("当前视频播放速度为:"+myVideo.playbackRate);//获取播放速度 
    } 
function setPlaySpeed()  {  
    alert("视频将以6倍速度播放");//获取播放速度 
    myVideo.playbackRate=6;//设定新的播放速度2倍速度 
    }  
function playPause(){  
    if (myVideo.paused)  
      myVideo.play(); //播放 
    else  
      myVideo.pause(); //暂停播放 
    }  
function makeBig(){  
    myVideo.width=660;  
    }  
function makeSmall(){  
    myVideo.width=230;  
    }  
function makeNormal(){  
    myVideo.width=400;  
    }  
</script> 
</body> 
</html>

        效果如下:

        网页播放器.png