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

最新推荐文章于 2025-04-09 11:09:15 发布

萤火虫小Q

最新推荐文章于 2025-04-09 11:09:15 发布

阅读量2.3k

点赞数

分类专栏： Web JS 文章标签： html5 html css web播放器

本文链接：https://blog.youkuaiyun.com/qin_zhangyongheng/article/details/120056693

版权

JS 同时被 2 个专栏收录

11 篇文章

订阅专栏

Web

7 篇文章

订阅专栏

网页播放器自定义倍速播放，可设置播放器的播放速度为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>

效果如下：