网页播放器自定义倍速播放,可设置播放器的播放速度为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>
效果如下: