·您当前的位置:主页 > 技术教程 > 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. function disableMute(){ 
  33. myvideo.muted=false
  34. btn[0].disabled=false
  35. btn[1].disabled=true
  36.  
  37. //播放视频 
  38. function playVid(){ 
  39. myvideo.play(); 
  40. setInterval(pro1,1000); 
  41. //暂停视频 
  42. function pauseVid(){ 
  43. myvideo.pause(); 
  44. //全屏 
  45. function showFull(){ 
  46. myvideo.webkitrequestFullscreen(); 
  47. //进度条展示 
  48. function pro1(){ 
  49. pro.max=myvideo.duration; 
  50. pro.value=myvideo.currentTime; 
  51. //拖动range进行调音量大小 
  52. function setvalue(){ 
  53. myvideo.volume=ran.value/100; 
  54. myvideo.muted=false
  55. </script> 
  56.  
  57. </body>  
  58. </html> 

 

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