I updated post with compiled coffee to javascript:
"use strict";
var change_volume, current_time_block, current_time_update, doc, duration_block, exit_full_screen, full_screen_toggle, get_video_duration, launch_into_full_screen, play_button, play_pause_toggle, pluralize_time, progress_bar, progress_load, screen_button, video, video_duration, video_pause, video_play, video_replay, video_time_format, video_volume_muted, video_volume_off, video_volume_on, video_volume_unmuted, volume_button, volume_range, volume_toggle;
doc = document;
video = doc.getElementById("video");
video.controls = false;
/** Video controls */
play_button = doc.getElementById("play-button");
progress_bar = doc.getElementById("progress-bar");
progress_load = doc.getElementById("progress-load");
current_time_block = doc.getElementById("time-current");
duration_block = doc.getElementById("time-duration");
volume_button = doc.getElementById("volume-button");
volume_range = doc.getElementById("volume-range");
screen_button = doc.getElementById("screen-button");
/**
* A video DOM currentTime property formatting.
* @param {current_time} Video currentTime property.
* @return {string} Time in the format 00:00.
*/
video_time_format = function(current_time) {
var minutes, seconds;
seconds = Math.floor(current_time);
minutes = Math.floor(current_time / 60);
if (minutes >= 10) {
minutes = minutes;
} else {
minutes = "0" + minutes;
}
if (seconds >= 10) {
seconds = seconds;
} else {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
};
/** Get a video DOM duration property. */
video_duration = null;
get_video_duration = function() {
if (video.duration) {
return video_duration = video.duration;
}
};
/** Set video duration to video controls panel. */
video.addEventListener("loadedmetadata", function() {
return duration_block.textContent = video_time_format(get_video_duration());
});
/**
* A helper function for update progress bar events.
* Set video current time in video controls panel and progress bar.
* @param {position} Percentage of progress.
*/
current_time_update = function(position) {
current_time_block.textContent = video_time_format(video.currentTime);
return progress_load.style.width = position;
};
/**
* The value is converted into a percentage value using the video’s duration
* and currentTime.
*/
video.addEventListener("timeupdate", function() {
return current_time_update(Math.floor((100 / video_duration) * video.currentTime) + "%");
});
/**
* A clickable progress bar.
* Get x-coordinate of the mouse pointer, converted its into a time.
*/
progress_bar.addEventListener("click", (function(event) {
var mouseX;
mouseX = event.offsetX;
video.currentTime = mouseX * video_duration / progress_bar.offsetWidth;
return current_time_update(mouseX + "px");
}), false);
/**
* Start playback and change replay button to pause button.
*/
video_replay = function() {
video.currentTime = 0;
video.play();
play_button.classList.remove("md-replay");
return play_button.classList.add("md-pause");
};
/**
* Rests video to start position and change play button to pause button.
*/
video_play = function() {
video.play();
play_button.classList.remove("md-play-arrow");
return play_button.classList.add("md-pause");
};
/**
* A nearest integer of video DOM currentTime property pluralize.
* @param {current_time} A nearest integer of video DOM currentTime property.
* @return {string} A pluralized time with title.
*/
pluralize_time = function(current_time) {
var cases, first_titles, index, second_titles;
cases = [2, 0, 1, 1, 1, 2];
index = current_time % 100 > 4 && current_time % 100 < 20 ? 2 : cases[Math.min(current_time % 10, 5)];
first_titles = ["Просмотрена ", "Просмотрено ", "Просмотрено "];
second_titles = [" секунда", " секунды", " секунд"];
return first_titles[index] + current_time + second_titles[index];
};
/**
* Stop playback and change pause button to play button.
*/
video_pause = function() {
video.pause();
play_button.classList.remove("md-pause");
play_button.classList.add("md-play-arrow");
return console.log(pluralize_time(Math.floor(video.currentTime)));
};
play_pause_toggle = function() {
if (video.ended) {
return video_replay();
} else if (video.paused) {
return video_play();
} else {
return video_pause();
}
};
play_button.addEventListener("click", play_pause_toggle);
video.addEventListener("click", play_pause_toggle);
/** Change pause button to play. */
video.addEventListener("ended", function() {
play_button.classList.remove("md-pause");
return play_button.classList.add("md-replay");
});
/**
* Sound turned on when volume button pressed.
* Change `volume-off` button to `volume-up`.
*/
video_volume_unmuted = function() {
video.muted = false;
volume_button.classList.remove("md-volume-off");
return volume_button.classList.add("md-volume-up");
};
/**
* Sound turned off when volume button pressed.
* Change `volume-up` button to `volume-off`.
*/
video_volume_muted = function() {
video.muted = true;
volume_button.classList.remove("md-volume-up");
return volume_button.classList.add("md-volume-off");
};
/**
* Sound turned on when sound is off and user press shortcut for unmute volume.
* Call `video_volume_unmuted()` function.
*/
video_volume_on = function() {
video.volume = 0.1;
volume_range.value = 0.1;
return video_volume_unmuted();
};
/**
* Sound turned off when slider control off.
* Change `volume-up` button to `volume-off`.
*/
video_volume_off = function() {
video.volume = 0;
volume_button.classList.remove("md-volume-up");
return volume_button.classList.add("md-volume-off");
};
/** Sound turned on or off. */
volume_toggle = function() {
if (video.volume === 0) {
return video_volume_on();
} else if (video.muted) {
return video_volume_unmuted();
} else {
return video_volume_muted();
}
};
volume_button.addEventListener("click", volume_toggle);
change_volume = function() {
var volume_range_value;
volume_range_value = parseFloat(volume_range.value);
if (volume_range_value === 0) {
return video_volume_off();
} else {
video.volume = volume_range_value;
return video_volume_unmuted();
}
};
volume_range.addEventListener("input", change_volume);
/**
* Launch into full screen mode.
* Change `md-fullscreen` button to `md-fullscreen-exit`.
*/
launch_into_full_screen = function() {
screen_button.classList.remove("md-fullscreen");
screen_button.classList.add("md-fullscreen-exit");
if (video.requestFullscreen) {
return video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
return video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
return video.webkitRequestFullscreen();
}
};
/**
* Exit full screen mode.
* Change `md-fullscreen-exit` button to `md-fullscreen`.
*/
exit_full_screen = function() {
screen_button.classList.remove("md-fullscreen-exit");
screen_button.classList.add("md-fullscreen");
if (video.exitFullscreen) {
return video.exitFullscreen();
} else if (video.mozCancelFullScreen) {
return video.mozCancelFullScreen();
} else if (video.webkitExitFullscreen) {
return video.webkitExitFullscreen();
}
};
/** Launching and existing fullscreen mode. */
full_screen_toggle = function() {
if (!video.fullscreenElement && !video.mozFullScreenElement && !video.webkitFullscreenElement) {
return launch_into_full_screen();
} else {
return exit_full_screen();
}
};
screen_button.addEventListener("click", full_screen_toggle);
/** Shortcuts. */
doc.onkeydown = function(event) {
if (event.keyCode === 32) {
play_pause_toggle();
}
if (event.keyCode === 70) {
full_screen_toggle();
}
if (event.keyCode === 77) {
volume_toggle();
}
if (event.keyCode === 48) {
return video_replay();
}
};
// ---
// generated by coffee-script 1.9.0
