Added a current time and duration of the video

This commit is contained in:
Gregory Ballantine 2018-02-27 00:33:52 -05:00
parent 86d5090f80
commit 9d60a382ca
2 changed files with 72 additions and 26 deletions

View File

@ -29,6 +29,9 @@
# create the video player # create the video player
createPlayer(wrapperElem) createPlayer(wrapperElem)
# load the video now
videoElem.get(0).load()
# end setup function # end setup function
return return
@ -64,6 +67,7 @@
class: settings.class_prefix + 'video') class: settings.class_prefix + 'video')
videoElem.on('ended', resetVideo) videoElem.on('ended', resetVideo)
videoElem.on('timeupdate', updateProgress) videoElem.on('timeupdate', updateProgress)
videoElem.on('loadedmetadata', updateDuration)
# loop through the video sources # loop through the video sources
for source in settings.video_sources for source in settings.video_sources
@ -79,15 +83,6 @@
class: settings.class_prefix + 'controls') class: settings.class_prefix + 'controls')
# create control elements # create control elements
playButton = $('<button/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button'
text: '>').appendTo(videoControls)
playButton.on('click', (e) ->
e.preventDefault()
toggleIsPlaying(this)
)
progressBar = $('<span/>', progressBar = $('<span/>',
class: settings.class_prefix + 'control' + ' ' + class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-bar').appendTo(videoControls) settings.class_prefix + 'progress-bar').appendTo(videoControls)
@ -95,6 +90,20 @@
progressFill = $('<span/>', progressFill = $('<span/>',
class: settings.class_prefix + 'control' + ' ' + class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-fill').appendTo(progressBar) settings.class_prefix + 'progress-fill').appendTo(progressBar)
playButton = $('<button/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button'
text: '>').appendTo(videoControls)
playButton.on('click', (e) ->
e.preventDefault()
toggleIsPlaying(this))
progressTime = $('<div/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progressTime').appendTo(videoControls)
progressTime.html('<span class="currentTime">' + msToTime(videoElem.get(0).currentTime) + '</span> / ' +
'<span class="totalTime">' + msToTime(videoElem.get(0).duration) + '</span>')
# add the elements to the player # add the elements to the player
$(wrapperElem).append(videoElem) $(wrapperElem).append(videoElem)
@ -144,18 +153,45 @@
if typeof setProgress != 'number' if typeof setProgress != 'number'
# calculate position in video as percentage # calculate position in video as percentage
progress = videoElem.get(0).currentTime / videoElem.get(0).duration progress = videoElem.get(0).currentTime
else else
progress = setProgress progress = setProgress
# calculate width for the progress fill # calculate width for the progress fill
progressWidth = progress * progressBar.width() progressWidth = (progress / videoElem.get(0).duration) * progressBar.width()
# set the width on the progress foreground element # set the width on the progress foreground element
progressFill.css('width', progressWidth + 'px') progressFill.css('width', progressWidth + 'px')
# update the progress time while we're at it
videoControls.find('.currentTime').text(msToTime(progress))
# end updateProgress function # end updateProgress function
return return
# updateDuration - updates the video's duration time
updateDuration = ->
currentTime = videoControls.find('.currentTime')
totalTime = videoControls.find('.totalTime')
currentTime.text(msToTime(videoElem.get(0).currentTime))
totalTime.text(msToTime(videoElem.get(0).duration))
# msToTime - converts seconds to a human-readable time
msToTime = (time) ->
secs = Math.floor(time % 60)
time = (time - secs) / 60
mins = Math.floor(time % 60)
hrs = Math.floor((time - mins) / 60)
if secs < 10
secs = '0' + secs
if hrs > 0 and mins < 10
mins = '0' + mins
if hrs > 0
return hrs + ':' + mins + ':' + secs
else
return mins + ':' + secs
# run the setup function # run the setup function
setup(this) setup(this)

View File

@ -5,16 +5,36 @@
padding: 0 padding: 0
.mup-controls .mup-controls
display: flex
vertical-align: top vertical-align: top
white-space: nowrap white-space: nowrap
width: calc(100% - 10px)
padding: 5px padding: 5px
background: #212121 background: #212121
.mup-control .mup-control
display: inline-block display: inline-block
flex: none
&:not(:last-child)
margin-right: 10px
.mup-progress-bar, .mup-progress-fill
margin: 0
padding: 0
border: 0
.mup-control.mup-progress-bar
display: block
height: 20px
margin: 0 0 5px
padding: 0
background: grey
.mup-progress-fill
display: block
width: 0
height: 100%
margin: 0
padding: 0
background: green
button.mup-control button.mup-control
margin: 0 margin: 0
@ -29,15 +49,5 @@ button.mup-control
color: #212121 color: #212121
cursor: pointer cursor: pointer
.mup-progress-bar, .mup-progress-fill .mup-control
margin: 0 color: white
padding: 0
border: 0
.mup-progress-bar
flex: 1
background: pink
.mup-progress-fill
height: 100%
background: lime