Added a current time and duration of the video
This commit is contained in:
parent
86d5090f80
commit
9d60a382ca
@ -30,6 +30,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)
|
||||||
@ -96,6 +91,20 @@
|
|||||||
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)
|
||||||
$(wrapperElem).append(videoControls)
|
$(wrapperElem).append(videoControls)
|
||||||
@ -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)
|
||||||
|
@ -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
|
|
||||||
|
Loading…
Reference in New Issue
Block a user