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

[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.     var progressTime=document.getElementById("progressTime"); 
  43.     progressTime.style.display=""; //显示播放进度条和时间 
  44.     if(video.paused) //如果当前播放状态为暂停,点击后开始播放 
  45.     { 
  46.         playBtn.value="暂停"
  47.         video.play(); 
  48.         video.playbackRate=speed
  49.         video.volume=volume; 
  50.         //启用控制工具条其他按钮 
  51.         btnSpeedUp.disabled=""
  52.         btnSpeedUpDown.disabled=""
  53.         btnVolumeUp.disabled=""
  54.         btnVolumeDown.disabled=""
  55.     } 
  56.     else //如果当前播放状态为播放,点击后暂停播放 
  57.     { 
  58.         playBtn.value="播放"
  59.         video.pause(); 
  60.         //禁用控制条其他按钮 
  61.         btnSpeedUp.disabled="disabled"
  62.         btnSpeedUpDown.disabled="disabled"
  63.         btnVolumeUp.disabled="disabled"
  64.         btnVolumeDown.disabled="disabled"
  65.     }    
  66. //提高播放速度 
  67. function speedUp() 
  68.     video.playbackRate+=1; 
  69.     speed=video.playbackRate; 
  70. //降低播放速度 
  71. function speedDown() 
  72.     video.playbackRate-=1
  73.     if(video.playbackRate<0
  74.     { 
  75.         video.playbackRate=0;    
  76.     } 
  77.     speed=video.playbackRate; 
  78. //增大音量 
  79. function volumeUp() 
  80.     if(video.volume<1
  81.     { 
  82.         video.volume+=0.1; 
  83.         if(video.volume>0) 
  84.         { 
  85.             video.muted=false
  86.         } 
  87.     } 
  88.     volume=video.volume; 
  89. //降低音量 
  90. function volumeDown() 
  91.     if(video.volume>0) 
  92.     { 
  93.         video.volume-=0.1; 
  94.         if(video.volume==0) 
  95.         { 
  96.             video.muted=true
  97.         } 
  98.     } 
  99.     volume=video.volume; 
  100. //播放进度条点击事件,点击后从点击位置开始播放 
  101. function progressOnClick(event) 
  102.     var progress=document.getElementById("progress"); 
  103.     if(event.offsetX) //获取鼠标当前点击位置与当前位置相比存在偏移量 
  104.     { 
  105.         videovideo.currentTime=video.duration*(event.offsetX/progress.clientWidth); //设定播放器新的播放位置 
  106.     } 
  107.     else 
  108.     { 
  109.         videovideo.currentTime=video.duration*(event.clientX/progress.clientWidth); 
  110.     } 
  111. //更新进度条状态 
  112. function updateProgress() 
  113.     var currentPercent=Math.round(Math.floor(video.currentTime)/
    Math.floor(video.duration)*100,0);//计算当前播放时长与视频总时长之比 
  114.     var progress=document.getElementById("progress"); 
  115.     progress.value=currentPercent
  116.     showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/
    "+calculateTime(Math.floor(video.duration));//显示播放时间 
  117. //将当前传入的时间转换为hh:MM:ss的格式 
  118. function calculateTime(time) 
  119.     var h; 
  120.     var m; 
  121.     var s; 
  122.     h=String(parseInt(time/3600,10)); 
  123.     if(h.length==1) 
  124.     { 
  125.         h='0'+h; 
  126.     } 
  127.     m=String(parseInt((time%3600)/60,10)); 
  128.     if(m.length==1) 
  129.     { 
  130.         m='0'+m; 
  131.     } 
  132.     s=String(parseInt(time%60),10) 
  133.     if(s.length==1) 
  134.     { 
  135.         s='0'+s; 
  136.     } 
  137.     return h+":"+m+":"+s; 
  138. </script> 
  139. </html> 

 

热门文章推荐

请稍候...