·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]html5视频播放器控制视频的操作源代码范例

时间:2017-02-05 14:32酷播
[html5]html5视频播放器控制视频的操作源代码范例,拖动range进行调音量大小

html5视频播放器控制视频的操作源代码

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4. <video id="video1" controls="controls" width="400px" height="400px">   
  5. <source src="img/1.mp4">   
  6. </video>   
  7.    
  8. <div>   
  9. <button onclick="enableMute()" type="button">关闭声音</button>   
  10. <button onclick="disableMute()" type="button">打开声音</button>   
  11. <button onclick="playVid()" type="button">播放视频</button>   
  12. <button onclick="pauseVid()" type="button">暂停视频</button>   
  13. <button onclick="showFull()" type="button">全屏</button><br />   
  14. <span>进度条:</span>   
  15. <progress value="0" max="0" id="pro"></progress>   
  16. <span>音量:</span>   
  17. <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>   
  18. </div>   
  19.    
  20. <script>   
  21. var btn=document.getElementsByTagName("button");   
  22. var myvideo=document.getElementById("video1");   
  23. var pro=document.getElementById("pro");   
  24. var ran=document.getElementById("ran");   
  25.    
  26. //cuplayer.com酷播提示:关闭声音   
  27. function enableMute(){   
  28. myvideo.muted=true;   
  29. btn[0].disabled=true;   
  30. btn[1].disabled=false;   
  31. }   
  32. //cuplayer.com酷播提示:打开声音   
  33. function disableMute(){   
  34. myvideo.muted=false;   
  35. btn[0].disabled=false;   
  36. btn[1].disabled=true;   
  37. }   
  38. //cuplayer.com酷播提示:播放视频   
  39. function playVid(){   
  40. myvideo.play();   
  41. setInterval(pro1,1000);   
  42. }   
  43. //cuplayer.com酷播提示:暂停视频   
  44. function pauseVid(){   
  45. myvideo.pause();   
  46. }   
  47. //cuplayer.com酷播提示:全屏   
  48. function showFull(){   
  49. myvideo.webkitrequestFullscreen();   
  50. }   
  51. //cuplayer.com酷播提示:进度条展示   
  52. function pro1(){   
  53. pro.max=myvideo.duration;   
  54. pro.value=myvideo.currentTime;   
  55. }   
  56. //cuplayer.com酷播提示:拖动range进行调音量大小   
  57. function setvalue(){   
  58. myvideo.volume=ran.value/100;   
  59. myvideo.muted=false;   
  60. }   
  61. </script>   
  62.    
  63. </body>    
  64. </html>   

 

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!