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 settings = undefined # settings objects
videoElem = undefined videoElem = undefined
videoControls = undefined videoControls = undefined
volumeDragging = false
# combine user settings with defaults # combine user settings with defaults
settings = $.extend({ settings = $.extend({
@ -68,6 +69,7 @@
videoElem.on('ended', resetVideo) videoElem.on('ended', resetVideo)
videoElem.on('timeupdate', updateProgress) videoElem.on('timeupdate', updateProgress)
videoElem.on('loadedmetadata', updateDuration) videoElem.on('loadedmetadata', updateDuration)
videoElem.on('click', toggleIsPlaying)
# loop through the video sources # loop through the video sources
for source in settings.video_sources for source in settings.video_sources
@ -91,20 +93,37 @@
class: settings.class_prefix + 'control' + ' ' + class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-fill').appendTo(progressBar) 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/>', playButton = $('<button/>',
class: settings.class_prefix + 'control' + ' ' + class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button' settings.class_prefix + 'play-button'
text: '>').appendTo(videoControls) text: '>').appendTo(videoControlsLeft)
playButton.on('click', (e) -> playButton.on('click', (e) ->
e.preventDefault() e.preventDefault()
toggleIsPlaying(this)) toggleIsPlaying())
progressTime = $('<div/>', progressTime = $('<div/>',
class: settings.class_prefix + 'control' + ' ' + 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> / ' + progressTime.html('<span class="currentTime">' + msToTime(videoElem.get(0).currentTime) + '</span> / ' +
'<span class="totalTime">' + msToTime(videoElem.get(0).duration) + '</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 # add the elements to the player
$(wrapperElem).append(videoElem) $(wrapperElem).append(videoElem)
$(wrapperElem).append(videoControls) $(wrapperElem).append(videoControls)
@ -115,7 +134,7 @@
# playVideo - start playing video # playVideo - start playing video
playVideo = -> playVideo = ->
videoElem.get(0).play() videoElem.get(0).play()
videoControls.children('.' + settings.class_prefix + 'play-button').text('||') videoControls.find('.' + settings.class_prefix + 'play-button').text('||')
isPlaying = true isPlaying = true
# end playVideo function # end playVideo function
@ -124,7 +143,7 @@
# 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.find('.' + settings.class_prefix + 'play-button').text('>')
isPlaying = false isPlaying = false
# end pauseVideo function # end pauseVideo function
@ -145,6 +164,10 @@
# end toggleIsPlaying function # end toggleIsPlaying function
return 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 - perform actions when the video's progress updates
updateProgress = (setProgress = false) -> updateProgress = (setProgress = false) ->
# get the progress bar element # 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 .mup-video
vertical-align: top vertical-align: top
width: 100% width: 100%
@ -9,9 +21,24 @@
white-space: nowrap white-space: nowrap
padding: 5px padding: 5px
background: #212121 background: #212121
overflow: auto
.mup-controls-left
float: left
margin: 0
padding: 0
.mup-controls-right
float: right
margin: 0
padding: 0
.mup-control .mup-control
display: inline-block display: inline-block
color: $text-color
&:focus
outline: none
&:not(:last-child) &:not(:last-child)
margin-right: 10px margin-right: 10px
@ -23,10 +50,10 @@
.mup-control.mup-progress-bar .mup-control.mup-progress-bar
display: block display: block
height: 20px height: 8px
margin: 0 0 5px margin: 0 0 5px
padding: 0 padding: 0
background: grey background: $slider-track-color
.mup-progress-fill .mup-progress-fill
display: block display: block
@ -34,7 +61,7 @@
height: 100% height: 100%
margin: 0 margin: 0
padding: 0 padding: 0
background: green background: $main-color
button.mup-control button.mup-control
margin: 0 margin: 0
@ -43,11 +70,92 @@ button.mup-control
border: none border: none
color: #000 color: #000
font-size: 16px font-size: 16px
font-weight: bold
transition: all 200ms ease-in-out transition: all 200ms ease-in-out
&:hover &:hover
background: #fff background: #fff
color: #212121 color: #212121
cursor: pointer cursor: pointer
.mup-control .mup-volume-slider
color: white 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