视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 播放器教程 >

[html5]html5播放器的一段代码示例

时间:2018-11-19 23:07cnblogs.com
[html5]html5播放器的一段代码示例

[html5]html5播放器的一段代码示例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <meta charset=gb2312" /> 
  4. <div> 
  5.     <div> 
  6.         <video id="video" src="4_1.mp4" width="600">当前浏览器不支持video元素</video> 
  7.     </div> 
  8.     <div id="progressTime" style="display:none"> 
  9.         <div style="float:left"> 
  10.         <progress id="progress" max="100" style="width:450px"> 
  11.         </progress> 
  12.         </div> 
  13.         <div id="showTime" style="float:left;margin-left:15px"></div> 
  14.         <div style="clear:both"></div> 
  15.     </div> 
  16.     </div> 
  17.     <div> 
  18.         <input type="button" id ="btnPlay" onclick="playOrPause()" value="播放"/>  
  19.         <input type="button" id="btnSpeedUp" onclick="speedUp()" value="快放" />  
  20.         <input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="慢放" />  
  21.         <input type="button" id="btnVolumeUp" onclick="volumeUp()" value="提高音量" />  
  22.         <input type="button"  id="btnVolumeDown" onclick="volumeDown()" value="降低音量" />  
  23.     </div> 
  24. </div> 
  25. <script> 
  26. var speed=1; //播放速度 
  27. var volume=1; //播放音量 
  28. var video=document.getElementById("video"); 
  29. var playBtn=document.getElementById("btnPlay"); 
  30. var btnSpeedUp=document.getElementById("btnSpeedUp"); 
  31. var btnSpeedUpDown=document.getElementById("btnSpeedUpDown"); 
  32. var btnVolumeUp=document.getElementById("btnVolumeUp"); 
  33. var btnVolumeDown=document.getElementById("btnVolumeDown"); 
  34. var showTime=document.getElementById("showTime"); 
  35.   
  36. video.addEventListener('timeupdate',updateProgress,false); //为播放器添加时间改变监听事件 
  37. var progress=document.getElementById("progress"); 
  38. progress.onclick=progressOnClick; //为progress控件添加点击事件 
  39.   
  40. //播放或暂停 
  41. function playOrPause() 
  42. { 
  43.     var progressTime=document.getElementById("progressTime"); 
  44.     progressTime.style.display=""; //显示播放进度条和时间 
  45.     if(video.paused) //如果当前播放状态为暂停，点击后开始播放 
  46.     { 
  47.         playBtn.value="暂停"; 
  48.         video.play(); 
  49.         video.playbackRate=speed; 
  50.         video.volume=volume; 
  51.         //启用控制工具条其他按钮 
  52.         btnSpeedUp.disabled=""; 
  53.         btnSpeedUpDown.disabled=""; 
  54.         btnVolumeUp.disabled=""; 
  55.         btnVolumeDown.disabled=""; 
  56.     } 
  57.     else //如果当前播放状态为播放，点击后暂停播放 
  58.     { 
  59.         playBtn.value="播放"; 
  60.         video.pause(); 
  61.         //禁用控制条其他按钮 
  62.         btnSpeedUp.disabled="disabled"; 
  63.         btnSpeedUpDown.disabled="disabled"; 
  64.         btnVolumeUp.disabled="disabled"; 
  65.         btnVolumeDown.disabled="disabled"; 
  66.     }    
  67. } 
  68. //提高播放速度 
  69. function speedUp() 
  70. { 
  71.     video.playbackRate+=1; 
  72.     speed=video.playbackRate; 
  73. } 
  74. //降低播放速度 
  75. function speedDown() 
  76. { 
  77.     video.playbackRate-=1; 
  78.     if(video.playbackRate<0) 
  79.     { 
  80.         video.playbackRate=0;    
  81.     } 
  82.     speed=video.playbackRate; 
  83. } 
  84. //增大音量 
  85. function volumeUp() 
  86. { 
  87.     if(video.volume<1) 
  88.     { 
  89.         video.volume+=0.1; 
  90.         if(video.volume>0) 
  91.         { 
  92.             video.muted=false; 
  93.         } 
  94.     } 
  95.     volume=video.volume; 
  96. } 
  97. //降低音量 
  98. function volumeDown() 
  99. { 
  100.     if(video.volume>0) 
  101.     { 
  102.         video.volume-=0.1; 
  103.         if(video.volume==0) 
  104.         { 
  105.             video.muted=true; 
  106.         } 
  107.     } 
  108.     volume=video.volume; 
  109. } 
  110. //播放进度条点击事件，点击后从点击位置开始播放 
  111. function progressOnClick(event) 
  112. { 
  113.     var progress=document.getElementById("progress"); 
  114.     if(event.offsetX) //获取鼠标当前点击位置与当前位置相比存在偏移量 
  115.     { 
  116.         videovideo.currentTime=video.duration*(event.offsetX/progress.clientWidth); //设定播放器新的播放位置 
  117.     } 
  118.     else 
  119.     { 
  120.         videovideo.currentTime=video.duration*(event.clientX/progress.clientWidth); 
  121.     } 
  122. } 
  123. //更新进度条状态 
  124. function updateProgress() 
  125. { 
  126.     var currentPercent=Math.round(Math.floor(video.currentTime)/
    Math.floor(video.duration)*100,0);//计算当前播放时长与视频总时长之比 
  127.     var progress=document.getElementById("progress"); 
  128.     progress.value=currentPercent; 
  129.     showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/
    "+calculateTime(Math.floor(video.duration));//显示播放时间 
  130. } 
  131. //将当前传入的时间转换为hh:MM:ss的格式 
  132. function calculateTime(time) 
  133. { 
  134.     var h; 
  135.     var m; 
  136.     var s; 
  137.     h=String(parseInt(time/3600,10)); 
  138.     if(h.length==1) 
  139.     { 
  140.         h='0'+h; 
  141.     } 
  142.     m=String(parseInt((time%3600)/60,10)); 
  143.     if(m.length==1) 
  144.     { 
  145.         m='0'+m; 
  146.     } 
  147.     s=String(parseInt(time%60),10) 
  148.     if(s.length==1) 
  149.     { 
  150.         s='0'+s; 
  151.     } 
  152.     return h+":"+m+":"+s; 
  153. } 
  154. </script> 
  155. </html> 

 

热门文章推荐

请稍候...

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

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