draw the dimmed bar immediately after hitting play

static/script.js

@@ -74,21 +74,23 @@ function drawBar(id) {
 	if (!canvas) return;
 	canvas.height = canvas.height; //clear
 
-	if (current_id == id && player) {
+	if (current_id == id) {
 		var context = canvas.getContext("2d");
 		context.fillStyle = dimmedColor;
 		context.fillRect(0, 9, 700, 2);
-		var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700,
-		    loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
-		context.fillStyle = litColor;
-		context.fillRect(loaded_start, 9, loaded_length, 2);
+		if (player) {
+			var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700,
+				loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
+			context.fillStyle = litColor;
+			context.fillRect(loaded_start, 9, loaded_length, 2);
 
-		var current_time = player.getVideoStartBytes() + player.getCurrentTime(),
-		    current_pos = current_time / player.getDuration() * 690 + 5;
-		context.beginPath();
-		context.arc(current_pos, 10, 5, 0, Math.PI * 2, false);
-		context.closePath();
-		context.fill();
+			var current_time = player.getVideoStartBytes() + player.getCurrentTime(),
+				current_pos = current_time / player.getDuration() * 690 + 5;
+			context.beginPath();
+			context.arc(current_pos, 10, 5, 0, Math.PI * 2, false);
+			context.closePath();
+			context.fill();
+		}
 	}
 }
 
@@ -123,10 +125,10 @@ function onStateChange(state) {
 
 function play(yid) {
 	if (current_id != yid) {
-		player.loadVideoById(yid, 0, 'hd720');
 		var previous_id = current_id;
 		current_id = yid;
 		drawBar(previous_id);
+		player.loadVideoById(yid, 0, 'hd720');
 	}
 	if (player.getPlayerState() in {'-1':1, '0':1, '5':1}) { // unstarted, ended, cued
 		player.seekTo(0, true);
@@ -139,6 +141,7 @@ function play(yid) {
 		else
 			showPlay(songs[i].id);
 	}
+	drawBar(current_id);
 }
 function pause(yid) {
 	if (current_id != yid)