视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]h5播放器的视频控制动作的实例代码

时间:2017-10-12 11:11酷播
[html5]h5播放器的视频控制动作的实例代码

[html5]h5播放器的视频控制动作的实例代码

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

 

热门文章推荐

请稍候...

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

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