Added progress bar
This commit is contained in:
parent
5460d47159
commit
72aade7d3f
@ -57,7 +57,8 @@
|
|||||||
# create video element
|
# create video element
|
||||||
videoElem = $('<video/>',
|
videoElem = $('<video/>',
|
||||||
class: settings.class_prefix + 'video')
|
class: settings.class_prefix + 'video')
|
||||||
videoElem.on('ended', pauseVideo)
|
videoElem.on('ended', resetVideo)
|
||||||
|
videoElem.on('timeupdate', updateProgress)
|
||||||
|
|
||||||
# loop through the video sources
|
# loop through the video sources
|
||||||
for source in settings.video_sources
|
for source in settings.video_sources
|
||||||
@ -74,13 +75,21 @@
|
|||||||
|
|
||||||
# create control elements
|
# create control elements
|
||||||
playButton = $('<button/>',
|
playButton = $('<button/>',
|
||||||
class: settings.class_prefix + 'button' + ' ' +
|
class: settings.class_prefix + 'control' + ' ' +
|
||||||
settings.class_prefix + 'play-button'
|
settings.class_prefix + 'play-button'
|
||||||
text: '>').appendTo(videoControls)
|
text: '>').appendTo(videoControls)
|
||||||
playButton.on('click', (e) ->
|
playButton.on('click', (e) ->
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
toggleIsPlaying(this)
|
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
|
# add the elements to the player
|
||||||
$(wrapperElem).append(videoElem)
|
$(wrapperElem).append(videoElem)
|
||||||
@ -95,14 +104,25 @@
|
|||||||
videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
|
videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
|
||||||
isPlaying = true
|
isPlaying = true
|
||||||
|
|
||||||
|
# end playVideo function
|
||||||
|
return
|
||||||
|
|
||||||
# pauseVideo - pause video
|
# pauseVideo - pause video
|
||||||
pauseVideo = ->
|
pauseVideo = ->
|
||||||
videoElem.get(0).pause()
|
videoElem.get(0).pause()
|
||||||
videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
|
videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
|
||||||
isPlaying = false
|
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 - toggle between play and pause
|
||||||
toggleIsPlaying = () ->
|
toggleIsPlaying = ->
|
||||||
if !videoElem.get(0).paused
|
if !videoElem.get(0).paused
|
||||||
pauseVideo()
|
pauseVideo()
|
||||||
else
|
else
|
||||||
@ -111,6 +131,27 @@
|
|||||||
# end toggleIsPlaying function
|
# end toggleIsPlaying function
|
||||||
return
|
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
|
# run the setup function
|
||||||
setup(this)
|
setup(this)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user