视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]html5手机播放器

时间:2016-12-21 14:51cnblogs.com
[html5]html5手机播放器

[html5]html5手机播放器

1.利用一个DIV作为容器,一个子DIV作为进度条，初始时设定子DIV宽度为0%

2.获取音频文件总时长（有属性可以直接获取（单位为秒））

3.（核心）利用timer计时器来计算当前播放了多少秒，一秒运行一次（可自由设置）

4.利用播放的秒数/文件总秒数/100  =当前的进度条的百分比

5.直接给进度条设定当前宽度

6.判断播放时长和文件时长一致就停止计时器

  1. <body> 
  2.     <div class="top"></div> 
  3.     <div id="containner"> 
  4.          
  5.         <div style="width: 78px; height: 30px; border-radius: 11px; text-align: center; margin:0px auto; "> 
  6.             <div><img id="icon" src="played.jpg" onclick="play()" width="30" height="30" /></div> 
  7.      
  8.          </div> 
  9.         <div style="width:100%; height:22px; padding-right:50px;"><span id="showtime" >00:00</span><span>/</span><span id="currenttime">00:00</span></div> 
  10.         
  11.         <div id="barbox" class="graph" style="width:98%"> 
  12.             <strong id="bar" class="bar" style="width: 0%;"></strong> 
  13.         </div> 
  14.        
  15.         <div id="divplayer"> 
  16.             <audio id="player" src="" loop="0" autostart="true" hidden="true"></audio> 
  17.         </div> 
  18.         
  19.     </div> 
  20.     
  21. </body> 
  22. </html> 
  23. <script language="javascript"> 
  24.     //成员变量 
  25.     var url = 'mp3/myeye.mp3';//（设定文件路径） 
  26.     var pausedimg = "paused.png"; 
  27.     var playedimg = "played.jpg"; 
  28.     var div = document.getElementById('divplayer');   
  29.     var player = document.getElementsByTagName('audio')[0]; 
  30.     player.src = url; 
  31.     //文件长度(秒) 
  32.     var fileseconds = 0; 
  33.     //定时器对象 
  34.     var progressStateTimer; 
  35.     //进度条父容器宽度 
  36.     var barboxwidth = 0; 
  37.     //进度条当前宽度 
  38.     var currentbarwidth = 0; 
  39.     //每秒追加宽度 
  40.     var appendwidth = 0; 
  41.     //进度条对象 
  42.     var bar; 
  43.     //当前运行秒数 
  44.     var currentseconds = 0; 
  45.  
  46.     function play() { 
  47.         if (player && player.paused) { 
  48.  
  49.             //获取文件时长 
  50.             fileseconds = parseInt(player.duration); 
  51.             //显示文件时长 
  52.             document.getElementById("showtime").innerHTML = (formatTime(fileseconds)); 
  53.             //获取进度条的容器宽度 
  54.             barboxwidth = document.getElementById("barbox").style.width; 
  55.  
  56.             //获取容器变量备用 
  57.             bar = document.getElementById("bar"); 
  58.             //开始播放 
  59.             player.play(); 
  60.             //显示暂停按钮 
  61.             document.getElementById("icon").src = pausedimg; 
  62.             //执行进度条方法 
  63.             progressStateTimer = setInterval(prossbar, 1000); 
  64.         } else if (player && player.played) { 
  65.             //暂停并停止进度条 
  66.             player.pause(); 
  67.             //显示播放按钮 
  68.             document.getElementById("icon").src = playedimg; 
  69.             //停止进度条 
  70.             clearInterval(progressStateTimer); 
  71.         } 
  72.         else { 
  73.             //进到此处说明player未实例化 或者状态不是播放和暂停 
  74.             //dosomething 
  75.         } 
  76.     } 
  77.  
  78.  
  79.  
  80.  
  81.     var prossbar = function () { 
  82.  
  83.         if (fileseconds > 0) { 
  84.             //重新计算新的宽度 
  85.              
  86.             if (currentseconds == 0) { 
  87.                 appendwidth = 0; 
  88.             } else 
  89.             { 
  90.                 appendwidth = (currentseconds / fileseconds) * 100; 
  91.             } 
  92.              
  93.             bar.style.width = appendwidth + "%"; 
  94.             //显示当前播放的时间 
  95.             document.getElementById("currenttime").innerHTML = formatTime(currentseconds); 
  96.             currentseconds++; 
  97.             if (currentseconds > fileseconds || currentbarwidth >= barboxwidth) { 
  98.                 //停止播放并清除进度条计时器 
  99.                 player.pause(); 
  100.                 clearInterval(progressStateTimer); 
  101.             } 
  102.         } 
  103.     } 
  104.  
  105.     function formatTime(second) { 
  106.         return [parseInt(second / 60 % 60), parseInt(second % 60)].join(":") 
  107.         .replace(/\b(\d)\b/g, "0$1"); 
  108.     } 
  109. </script> 

再推荐一个支持pc和手机端\微信端观看视频的免费云服务：酷播云。

酷播云 ( 官网 http://www.cuplayer.com/ )
酷播云，是一款永久免费的视频云服务产品，集视频上传、视频转码、视频存储和视频播放四大功能为一体；全界面化操作平台，使用简单方便；视频无任何广告，提供最佳的观看体验；全终端兼容：微信、手机、PC、平板、智能电视终端，为用户提供在线视频全终端整体解决方案。

 

热门文章推荐

请稍候...

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

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