Added progress bar
This commit is contained in:
parent
5460d47159
commit
72aade7d3f
@ -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)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user