HTML5 Video player

I do HTML5 Video player with some controls. I have a button, where I change classname for make play, pause or replay button. I have a mute/unmute button, volume range slider, timer and fullscreen mode button.

Maybe I can do some functions better or faster, and also, maybe I need to change comments?

Logic:

```
"use strict"
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 = (current_time) ->
seconds = Math.floor(current_time)
minutes = Math.floor(current_time / 60)
if minutes >= 10 then minutes = minutes else minutes = "0" + minutes
if seconds >= 10 then seconds = seconds else seconds = "0" + seconds
minutes + ":" + seconds

###* Get a video DOM duration property. ###
video_duration = null
get_video_duration = ->
if video.duration
video_duration = video.duration

###* Set video duration to video controls panel. ###
video.addEventListener("loadedmetadata", ->
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 = (position) ->
current_time_block.textContent = video_time_format(video.currentTime)
progress_load.style.width = position

###*
# The value is converted into a p

Your HTML looks good, except for a missing `` brace. You can validate it at the W3C HTML Validator.

While this appears to be a snippet, you should structure your HTML files like this, in the case you are not already:

    
        Page Title Here...
    
    
        
    

Right here, I would not align your code like this, it is easier to write and makes just as much sense without those extra spaces:

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")

Your indentation, spacing, and naming are excellent, although I prefer a 4-space indent over a 2-space indent. I do not know CoffeeScript or JavaScript, so I cannot make any more comments.

StackExchange Code Review Q#82593, answer score: 2