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

[html5]html5视频播放控制写法示例

时间:2017-10-30 23:09酷播
[html5]html5视频播放控制写法示例

[html5]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. //关闭声音 
  27. function enableMute(){ 
  28. myvideo.muted=true
  29. btn[0].disabled=true
  30. btn[1].disabled=false
  31.   
  32. //打开声音 
  33. function disableMute(){ 
  34. myvideo.muted=false
  35. btn[0].disabled=false
  36. btn[1].disabled=true
  37.   
  38. //播放视频 
  39. function playVid(){ 
  40. myvideo.play(); 
  41. setInterval(pro1,1000); 
  42. //停息视频 
  43. function pauseVid(){ 
  44. myvideo.pause(); 
  45. //全屏 
  46. function showFull(){ 
  47. myvideo.webkitrequestFullscreen(); 
  48. //进度条展示 
  49. function pro1(){ 
  50. pro.max=myvideo.duration; 
  51. pro.value=myvideo.currentTime; 
  52.   
  53. //拖动range进行调音量大小 
  54. function setvalue(){ 
  55. myvideo.volume=ran.value/100; 
  56. myvideo.muted=false
  57.   
  58.  </script> 
  59.   
  60. </body>  
  61. </html> 

 

热门文章

请稍候...
  • 热身双十一,锁定云视频大聚惠
  • 备战双十一,相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器