当我点击播放按钮时

Question

嘿，我试图点击播放按钮，以使youtube视频的自定义进度条加载。我把两个脚本放在一起，所以我猜代码有问题，但是我不知道是什么。当您按下破碎的图片（即网站上的播放/暂停按钮）时，进度条应开始加载。

我尝试搜索google和stackoverflow，但是找不到类似的东西

  var player;
 function onYouTubeIframeAPIReady() {

var ctrlq = document.getElementById("youtube-audio");
ctrlq.innerHTML = '<img id="youtube-icon" src=""/><div id="player"> 
 </div>';
ctrlq.style.cssText = 'width:150px;margin:2em 
auto;cursor:pointer;cursor:hand;display:
  none;left:30px;position:fixed;float:
 left;bottom:0px';
ctrlq.onclick = toggleAudio;

player = new YT.Player('player', {
  height: '0',
  width: '0',
  videoId: ctrlq.dataset.video,
  playerVars: {
    autoplay: ctrlq.dataset.autoplay,
    loop: ctrlq.dataset.loop,
  },
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange 
  } 
});
 } 

  function togglePlayButton(play) {    
document.getElementById("youtube-icon").src = play ? 
 "images/icons/pause.png" : "images/icons/play.png";
 }

    function toggleAudio() {
   if ( player.getPlayerState() == 1 || player.getPlayerState() == 3 ) 
  {
  player.pauseVideo(); 
  togglePlayButton(false);
  } else {
  player.playVideo(); 
  togglePlayButton(true);
  } 

 function onPlayerReady(event) {
 player.setPlaybackQuality("small");
document.getElementById("youtube-audio").style.display = "block";
togglePlayButton(player.getPlayerState() !== 5);

  player.addEventListener('onStateChange', function(state) {
handleState(state.data);
 });
}

 function onPlayerStateChange(event) {
  if (event.data === 0) {
  togglePlayButton(false); 
  }
 }




   var player;
   var duration;
   var vidClock;
    var seeking = false;
    var currentTime = 0;




   function handleState(state) {
   var $seekSlider = $('.progress');
   var $seekContainer = $('.progress-container');

  if (state == 1) { // when player starts playing
    duration = player.getDuration();
    // everytime that player starts playing, either first time or when 
   it 
    starts playing after
   // selecting a custom time by user, we should sync players state 
   with 
 progress bar.
   // then we should animate progress bar to 100%, but the point is 
    that 
     we set animation duration
// to difference of the duration and current time of the player(also 
 we should multiply that number
// by 1000 to convert it from seconds in float format to miliseconds 
 in int format)
currentTime = player.getCurrentTime();
currentLocation = ((currentTime/duration) * 100).toFixed(4);

$seekSlider
  .velocity('stop') // stop progressbar animation(in case of selecting 
   a custom time by user)
  .velocity({
    'translateX': currentLocation + '%'
  }, {duration: 0}) // you can also use css function instead of 
   velocity with duration = 0
  .velocity({
    'translateX': '100%'
  }, {
    duration: Math.floor((duration-currentTime) * 1000),
    easing: 'linear'
  });
 }

 if (state == 2 || state == 3 || state == 0) {
// when player stop or end or started buffering we should stop our 
  progress bar animation
$seekSlider.velocity('stop');

// another situation that we should handle is when the video is not 
 completely loaded for user
// and user select a custom time from parts of the video that not 
 buffered yet, in this case the
// progres bar should change to the user selected location but wait 
  until the buffering is completed
// to start animating the progress bar
if (state == 3) {
  duration = player.getDuration();
  currentTime = player.getCurrentTime();
  currentLocation = ((currentTime/duration) * 100).toFixed(4);

  $seekSlider.velocity({
    'translateX': currentLocation + '%'
  }, {duration: 0});
}

if (state == 0) {
    $seekSlider.velocity({
    'translateX': '100%'
  }, {duration: 0});
   }
 }
 }


</script>

声音应该开始播放，但是定制进度条不会像在脚本中借来的那样实际运行。这是工作进度条的链接；

http://jsfiddle.net/e11oy0eu/293/

这是我自己的剧本；

https://jsfiddle.net/6rwutj2f/