jPlayer -如何制作一个按钮来滑动和寻求进步

<link rel="stylesheet" type="text/css" href="jplayer.css">
<script src="jplayer.js"></script>

<div id="jp_container_1" class="jp-video">
  <div class="jp-type-single">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui">
      <div class="jp-interface">
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-controls">
          <button class="jp-play"></button>
          <button class="jp-stop"></button>
        </div>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $("#jquery_jplayer_1").jPlayer({
    ready: function() {
      $(this).jPlayer("setMedia", {
        mp3: "path/to/audio.mp3",
        m4v: "path/to/video.mp4"
      });
    },
    swfPath: "path/to/jplayer.swf",
    supplied: "mp3, m4v",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
  });
});

$(document).ready(function() {
  $(".jp-play").click(function() {
    $("#jquery_jplayer_1").jPlayer("play");
  });

  $(".jp-stop").click(function() {
    $("#jquery_jplayer_1").jPlayer("stop");
  });

  $(".jp-seek-bar").click(function(e) {
    var offset = $(this).offset();
    var width = $(this).width();
    var clickX = e.pageX - offset.left;
    var percentage = clickX / width;
    $("#jquery_jplayer_1").jPlayer("playHead", percentage * 100);
  });
});