Added a volume slider and added play/pause to clicking on the video

This commit is contained in:
Gregory Ballantine 2018-02-27 17:45:41 -05:00
parent 9d60a382ca
commit cdef253874
2 changed files with 171 additions and 40 deletions

View File

@ -5,6 +5,7 @@
settings = undefined # settings objects
videoElem = undefined
videoControls = undefined
volumeDragging = false
# combine user settings with defaults
settings = $.extend({
@ -68,6 +69,7 @@
videoElem.on('ended', resetVideo)
videoElem.on('timeupdate', updateProgress)
videoElem.on('loadedmetadata', updateDuration)
videoElem.on('click', toggleIsPlaying)
# loop through the video sources
for source in settings.video_sources
@ -91,20 +93,37 @@
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-fill').appendTo(progressBar)
videoControlsLeft = $('<div/>',
class: settings.class_prefix + 'controls-left').appendTo(videoControls)
videoControlsRight = $('<div/>',
class: settings.class_prefix + 'controls-right').appendTo(videoControls)
playButton = $('<button/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button'
text: '>').appendTo(videoControls)
text: '>').appendTo(videoControlsLeft)
playButton.on('click', (e) ->
e.preventDefault()
toggleIsPlaying(this))
toggleIsPlaying())
progressTime = $('<div/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progressTime').appendTo(videoControls)
settings.class_prefix + 'progressTime').appendTo(videoControlsLeft)
progressTime.html('<span class="currentTime">' + msToTime(videoElem.get(0).currentTime) + '</span> / ' +
'<span class="totalTime">' + msToTime(videoElem.get(0).duration) + '</span>')
volumeSlider = $('<input/>',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'volume-slider'
type: 'range'
min: 0
max: 100
step: 1
).appendTo(videoControlsRight)
volumeSlider.on('input', ->
setVolume(this.value)
)
# add the elements to the player
$(wrapperElem).append(videoElem)
$(wrapperElem).append(videoControls)
@ -115,7 +134,7 @@
# playVideo - start playing video
playVideo = ->
videoElem.get(0).play()
videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
videoControls.find('.' + settings.class_prefix + 'play-button').text('||')
isPlaying = true
# end playVideo function
@ -124,7 +143,7 @@
# pauseVideo - pause video
pauseVideo = ->
videoElem.get(0).pause()
videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
videoControls.find('.' + settings.class_prefix + 'play-button').text('>')
isPlaying = false
# end pauseVideo function
@ -145,6 +164,10 @@
# end toggleIsPlaying function
return
# setVolume - set the video player's volume
setVolume = (vol) ->
videoElem.get(0).volume = (vol / 100)
# updateProgress - perform actions when the video's progress updates
updateProgress = (setProgress = false) ->
# get the progress bar element

View File

@ -1,3 +1,15 @@
//# general variables
$main-color: red
$text-color: white
//# slider variables
$slider-track-color: grey
$slider-progress-color: red
$slider-thumb-color: red
$slider-thumb-height: calc(100% + 8px)
$slider-thumb-width: 15px
$slider-thumb-border-radius: 7px
//# styles
.mup-video
vertical-align: top
width: 100%
@ -9,45 +21,141 @@
white-space: nowrap
padding: 5px
background: #212121
overflow: auto
.mup-control
display: inline-block
.mup-controls-left
float: left
margin: 0
padding: 0
&:not(:last-child)
margin-right: 10px
.mup-controls-right
float: right
margin: 0
padding: 0
.mup-progress-bar, .mup-progress-fill
margin: 0
padding: 0
border: 0
.mup-control
display: inline-block
color: $text-color
.mup-control.mup-progress-bar
display: block
height: 20px
margin: 0 0 5px
padding: 0
background: grey
&:focus
outline: none
.mup-progress-fill
display: block
width: 0
height: 100%
margin: 0
padding: 0
background: green
&:not(:last-child)
margin-right: 10px
button.mup-control
margin: 0
padding: 7px 12px
background: #eee
border: none
color: #000
font-size: 16px
transition: all 200ms ease-in-out
&:hover
background: #fff
color: #212121
cursor: pointer
.mup-progress-bar, .mup-progress-fill
margin: 0
padding: 0
border: 0
.mup-control
color: white
.mup-control.mup-progress-bar
display: block
height: 8px
margin: 0 0 5px
padding: 0
background: $slider-track-color
.mup-progress-fill
display: block
width: 0
height: 100%
margin: 0
padding: 0
background: $main-color
button.mup-control
margin: 0
padding: 7px 12px
background: #eee
border: none
color: #000
font-size: 16px
font-weight: bold
transition: all 200ms ease-in-out
&:hover
background: #fff
color: #212121
cursor: pointer
.mup-volume-slider
display: inline-block
width: 120px
height: 10px
margin: 10px 0 0
padding: 0
background: none
border: none
&::-webkit-slider-runnable-track
width: 100%
height: 10px
cursor: pointer
animate: 0.2s
box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d
background: $slider-track-color
border-radius: 25px
border: 0px solid #000101
overflow: hidden
&::-webkit-slider-thumb
box-shadow: -100px 0 0 90px $main-color
border: 0px solid #000000
width: $slider-thumb-width
height: $slider-thumb-height
border-radius: $slider-thumb-border-radius
background: $main-color
cursor: pointer
-webkit-appearance: none
margin-top: -2.4px
&:focus::-webkit-slider-runnable-track
background: $slider-track-color
&::-moz-range-track
width: 100%
height: 10px
cursor: pointer
animate: 0.2s
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
background: $slider-track-color
border-radius: 25px
border: 0px solid #000101
&::-moz-range-progress
height: 100%
background: $main-color
border-radius: $slider-thumb-border-radius
&::-moz-range-thumb
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
border: 0px solid #000000
width: $slider-thumb-width
height: $slider-thumb-height
border-radius: $slider-thumb-border-radius
background: $main-color
cursor: pointer
&::-ms-track
width: 100%
height: 10px
cursor: pointer
animate: 0.2s
background: transparent
border-color: transparent
border-width: 39px 0
color: transparent
&::-ms-fill-lower,
&::-ms-fill-upper
background: $slider-track-color
border: 0px solid #000101
border-radius: 50px
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
&::-ms-fill-lower
background: $slider-thumb-color
&::-ms-thumb
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
border: 0px solid #000000
width: $slider-thumb-width
height: $slider-thumb-height
border-radius: $slider-thumb-border-radius
background: $main-color
cursor: pointer
&:focus
&::-ms-fill-lower, &::-ms-fill-upper
background: #ac51b5