视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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>   

 

热门文章推荐

请稍候...

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

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