Added progress bar

This commit is contained in:
Gregory Ballantine 2018-02-26 16:09:53 -05:00
parent 5460d47159
commit 72aade7d3f

View File

@ -57,7 +57,8 @@
# create video element
videoElem = $('<video/>',
class: settings.class_prefix + 'video')
videoElem.on('ended', pauseVideo)
videoElem.on('ended', resetVideo)
videoElem.on('timeupdate', updateProgress)
# loop through the video sources
for source in settings.video_sources
@ -74,13 +75,21 @@
# create control elements
playButton = $('<button/>',
class: settings.class_prefix + 'button' + ' ' +
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button'
text: '>').appendTo(videoControls)
playButton.on('click', (e) ->
e.preventDefault()
toggleIsPlaying(this)
)
progressBar = $('<span/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-bar').appendTo(videoControls)
progressFill = $('<span/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-fill').appendTo(progressBar)
# add the elements to the player
$(wrapperElem).append(videoElem)
@ -95,14 +104,25 @@
videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
isPlaying = true
# end playVideo function
return
# pauseVideo - pause video
pauseVideo = ->
videoElem.get(0).pause()
videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
isPlaying = false
# end pauseVideo function
return
# resetVideo - reset the video back to the beginning
resetVideo = ->
pauseVideo()
updateProgress(0)
# toggleIsPlaying - toggle between play and pause
toggleIsPlaying = () ->
toggleIsPlaying = ->
if !videoElem.get(0).paused
pauseVideo()
else
@ -111,6 +131,27 @@
# end toggleIsPlaying function
return
# updateProgress - perform actions when the video's progress updates
updateProgress = (setProgress = false) ->
# get the progress bar element
progressBar = videoControls.children('.' + settings.class_prefix + 'progress-bar')
progressFill = progressBar.children('.' + settings.class_prefix + 'progress-fill')
if typeof setProgress != 'number'
# calculate position in video as percentage
progress = videoElem.get(0).currentTime / videoElem.get(0).duration
else
progress = setProgress
# calculate width for the progress fill
progressWidth = progress * progressBar.width()
# set the width on the progress foreground element
progressFill.css('width', progressWidth + 'px')
# end updateProgress function
return
# run the setup function
setup(this)