视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

HTML5倍速功能实现视频播放器（加速2X、1.5X播放）

时间:2021-09-06 09:11阿酷
本文章为原创文章，因为有很多朋友加我QQ咨询播放器来源的事，我在这补充说明一下：方式一中，播放器的倍速播放效果截图，来自酷播云免费视频平台，播放器自带这个功能有兴趣的朋友

本文章为原创文章，因为有很多朋友加我QQ咨询播放器来源的事，我在这补充说明一下：
方式一中，播放器的倍速播放效果截图，来自酷播云免费视频平台，播放器自带这个功能有兴趣的朋友，可以注册用一下就知道  http://www.cuplayer.com/cloud ，主要为中小企业提供免费视频云服务；

实例的演示效果，可以参见 http://www.52player.cn/Demos/CloudPlayer/demo01.html

方式二，主要是为大家自己写倍速播放器代码的原理，采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度)。

方式一：采用第三方云视频平台

HTML5倍数功能视频播放器（加速2倍，1.5倍播放）

倍数功能视频播放器的应用：

培训场景，教育教学场景下，可以倍速观看视频，比如1.5倍，2倍的速度观看视频，可以更快速的看完课程，节省时间。

  1. <div id="player"></div> 
  2. <script src="//player.polyv.net/script/player.js"></script> 
  3. <script> 
  4.   var player = polyvPlayer({ 
  5.     wrap: '#player', 
  6.     width: 800, 
  7.     height: 533, 
  8.     vid: 'e8888b74d1229efec6b4712e17cb6b7a_e', 
  9.   }); 
  10. </script> 

方式二：自已动手修改HTML5视频标签的速率

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>阿酷TONY</title> 
  6. </head> 
  7. <body> 
  8. <div style="text-align:center"> 
  9.   <button οnclick="playPause()">播放/暂停</button> 
  10.   <button οnclick="makeBig()">放大</button> 
  11.   <button οnclick="makeSmall()">缩小</button> 
  12.   <button οnclick="makeNormal()">普通</button> 
  13.   <button οnclick="getPlaySpeed()" type="button">播放速度是多少？</button> 
  14.   <button οnclick="setPlaySpeed()" type="button">将视频设置为以快速播放</button> 
  15.   <br> 
  16.   <video id="video" width="420" autoplay controls> 
  17.     <source src="test.mp4" type="video/mp4"> 
  18.     TONY提示：您浏览器不支持 HTML5 video 标签。 </video> 
  19. </div> 
  20. <script>  
  21. var myVideo=document.getElementById("video");  
  22. function getPlaySpeed() { 
  23.     alert(myVideo.playbackRate);//获取播放速度 
  24.     } 
  25. function setPlaySpeed()  {  
  26.     myVideo.playbackRate=2;//设定新的播放速度2倍速度 
  27.     }  
  28. function playPause(){  
  29.     if (myVideo.paused)  
  30.       myVideo.play(); //播放 
  31.     else  
  32.       myVideo.pause(); //暂停播放 
  33.     }  
  34. function makeBig(){  
  35.     myVideo.width=660;  
  36.     }  
  37. function makeSmall(){  
  38.     myVideo.width=230;  
  39.     }  
  40. function makeNormal(){  
  41.     myVideo.width=400;  
  42.     }  
  43. </script> 
  44. </body> 
  45. </html> 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器