JQuery移动端播放进度条

JQuery移动端播放进度条

播放进度条其实就是普通进度条加上播放时长，这里记录下自己的思路

界面展示

videocontrol.html

 <!-- 功能按键 -->
    <nav class="nav">
    <!-- 文件标题 -->
    <span class="nav-videoname"></span>
      <!-- 第一行（停止，播放） -->
     <a href="#" class="videocontrol-item" style="margin-bottom:  2.24rem;">
       <img class="img0">
       <img class="img1" src="./icons/video/ic_play_stop.png">
       <p>停止</p>
     </a>
    
    <a href="#" class="videocontrol-item">
        <img class="img0">
        <img class="img1" src="./icons/video/ic_play_pause.png">
        <img class="img2" src="./icons/video/ic_play.png">
        <p>播放/暂停</p>
    </a>
     
   <!-- 视频进度条 -->
    <div class="progress">
        <!-- 进度条框 -->
      <div class="progress_bg">
          <!-- 填充条 -->
        <div class="progress_bar"></div>
      </div>
       <!-- 进度指示标 -->
      <div class="progress_btn"></div>
      <span class="progress_time"></span>
    </div>
    <!-- 音量条 -->
    <div class="vioce">
        <!-- 音量图标 -->
        <img class="vioce-img"  alt="">
          <!-- 进度条框 -->
      <div class="vioce_bg">
        <!-- 填充条 -->
      <div class="vioce_bar"></div>
    </div>
     <!-- 进度指示标 -->
    <div class="vioce_btn"></div>
    </div>
   </nav