视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 播放器教程 >

[html5播放器]视频播放器倍速播放原理（附源文件）

时间:2018-11-09 15:42阿酷
[html5播放器]视频播放器倍速播放原理（附源文件），视频播放器,倍速视频播放,网页播放器

[html5播放器]视频播放器倍速播放原理（附源文件）


 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>阿酷TONY--Tangni</title> 
  6. </head> 
  7. <body> 
  8. <div style="text-align:center"> 
  9.   <button onclick="playPause()">播放/暂停</button> 
  10.   <button onclick="makeBig()">放大</button> 
  11.   <button onclick="makeSmall()">缩小</button> 
  12.   <button onclick="makeNormal()">普通</button> 
  13.   <button onclick="getPlaySpeed()" type="button">当前播放速度</button> 
  14.   <button onclick="setPlaySpeed()" type="button">将视频设定为2倍播放速度</button> 
  15.   <br> 
  16.   <video id="video" width="600" 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.     alert("视频将以2倍速度播放");//获取播放速度 
  27.     myVideo.playbackRate=2;//设定新的播放速度2倍速度 
  28.     }  
  29. function playPause(){  
  30.     if (myVideo.paused)  
  31.       myVideo.play(); //播放 
  32.     else  
  33.       myVideo.pause(); //暂停播放 
  34.     }  
  35. function makeBig(){  
  36.     myVideo.width=660;  
  37.     }  
  38. function makeSmall(){  
  39.     myVideo.width=230;  
  40.     }  
  41. function makeNormal(){  
  42.     myVideo.width=400;  
  43.     }  
  44. </script> 
  45. </body> 
  46. </html> 
  47. ---------------------  
  48. 作者：阿酷tony  
  49. 来源：CSDN  
  50. 原文：https://blog.csdn.net/ffffffff8/article/details/83866013  
  51. 版权声明：本文为博主原创文章，转载请附上博文链接！ 

代码下载：http://www.52player.cn/

相关链接：https://blog.csdn.net/ffffffff8/article/details/79150624

热门文章推荐

请稍候...

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

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