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

      2020-01-18 01:31      HTML5
[html5]h5播放器的视频控制动作的实例代码

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

  1. <!DOCTYPEhtml><html>
  2. <body><videoid="video1"controls="controls"width="400px"height="400px">
  3. <sourcesrc="img/1.mp4"></video>
  4. <div><buttononclick="enableMute()"type="button">关闭声音</button>
  5. <buttononclick="disableMute()"type="button">打开声音</button><buttononclick="playVid()"type="button">播放视频</button>
  6. <buttononclick="pauseVid()"type="button">暂停视频</button><buttononclick="showFull()"type="button">全屏</button><br/>
  7. <span>进度条:</span><progressvalue="0"max="0"id="pro"></progress>
  8. <span>音量:</span><inputtype="range"min="0"max="100"value="50"onchange="setvalue()"id="ran"/>
  9. </div>
  10. <script>varbtn=document.getElementsByTagName("button");
  11. varmyvideo=document.getElementById("video1");varpro=document.getElementById("pro");
  12. varran=document.getElementById("ran");
  13. //关闭声音functionenableMute(){
  14. myvideo.muted=true;btn[0].disabled=true;
  15. btn[1].disabled=false;}
  16. //打开声音
  17. functiondisableMute(){myvideo.muted=false;
  18. btn[0].disabled=false;btn[1].disabled=true;
  19. }
  20. //播放视频functionplayVid(){
  21. myvideo.play();setInterval(pro1,1000);
  22. }//暂停视频
  23. functionpauseVid(){myvideo.pause();
  24. }//全屏
  25. functionshowFull(){myvideo.webkitrequestFullscreen();
  26. }//进度条展示
  27. functionpro1(){pro.max=myvideo.duration;
  28. pro.value=myvideo.currentTime;}
  29. //拖动range进行调音量大小functionsetvalue(){
  30. myvideo.volume=ran.value/100;myvideo.muted=false;
  31. }</script>
  32. </body>
  33. </html>