Twitter中的Twitter-Bootstrap。玩家

Question

我正在创建一个自定义媒体播放器，但按钮和进度条不是应该做的事情，我正在使用带有Bootswatch主题的Bootstrap（Paper），这里是Template

什么是错的？请帮忙！

谢谢！

抱歉我的英文......

<div id='media-player'>
      <video id='media-video' controls>
        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4">
        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg">
      </video>
      <div id='media-controls'>
        <button id='play-pause-button' class="btn btn-default play" id="play" title="play" onclick='togglePlayPause();'>play</button>
        <div class="progress">
          <div id="progress-bar" class="progress-bar" min='0' max='100' value='0'>0% played</div>
        </div>
        <button class="btn btn-default" id="fullScreen" title="FullScreen Toggle"> FS </button>
      </div>

document.addEventListener("DOMContentLoaded", function() {
  initialiseMediaPlayer();
}, false);
var mediaPlayer;

function initialiseMediaPlayer() {
  mediaPlayer = document.getElementById('media-video');
  mediaPlayer.controls = false;
}

function togglePlayPause() {
  var btn = document.getElementById('play-pause-button');
  if (mediaPlayer.paused || mediaPlayer.ended) {
    btn.title = 'pause';
    btn.innerHTML = 'pause';
    btn.className = 'btn btn-default play';
    mediaPlayer.play();
  } else {
    btn.title = 'play';
    btn.innerHTML = 'play';
    btn.className = 'btn btn-default play';
    mediaPlayer.pause();
  }
}
mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

function updateProgressBar() {
  var progressBar = document.getElementById('progress-bar');
  var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
  progressBar.value = percentage;
  progressBar.innerHTML = percentage + '% played';
}