视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

 

热门文章推荐

请稍候...

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

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