Added a volume slider and added play/pause to clicking on the video
This commit is contained in:
Gregory Ballantine
parent
9d60a382ca
commit
cdef253874
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user