(($) ->
$.fn.MUPlayer = (opt) ->
# define global variables
settings = undefined # settings objects
videoElem = undefined
videoControls = undefined
volumeDragging = false
# combine user settings with defaults
settings = $.extend({
'use_default_css': false
'class_prefix': 'mup-'
'default_volume': 50
'default_position': 0
'video_sources': []
'video_width': false
}, opt)
## Functions
# setup - performs initial setup of the MUPlayer element
setup = (wrapperElem) ->
# add default CSS if needed
if settings.use_default_css
addStylesheet('build/css/mup.css')
# set player width
if typeof settings.video_width == 'string'
wrapperElem.width(settings.video_width)
# create the video player
createPlayer(wrapperElem)
# load the video now
videoElem.get(0).load()
# end setup function
return
# addStylesheet - adds a stylesheet to the head element
addStylesheet = (filename) ->
# create link element
cssElem = $('',
rel: 'stylesheet'
type: 'text/css'
href: filename)
# find stylesheet links
loadedStylesheets = $('head link[rel=stylesheet]')
# check if there are any loaded stylesheets
if loadedStylesheets.length > 0
# get last stylesheet
lastStylesheet = loadedStylesheets[loadedStylesheets.length - 1]
# append new stylesheet after the last one
lastStylesheet.after(cssElem)
else
# append the new element to the head element
$('head').append(cssElem)
# end addStylesheet function
return
# createPlayer - add HTML elements for the video player
createPlayer = (wrapperElem) ->
# create video element
videoElem = $('',
class: settings.class_prefix + 'video')
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
# create new source element
newSrc = $('',
src: source.link
type: source.type)
# append source element to the newly created video element
videoElem.append(newSrc)
# create video controls wrapper
videoControls = $('
',
class: settings.class_prefix + 'controls')
# create control elements
progressBar = $('',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-bar').appendTo(videoControls)
progressFill = $('',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progress-fill').appendTo(progressBar)
videoControlsLeft = $('',
class: settings.class_prefix + 'controls-left').appendTo(videoControls)
videoControlsRight = $('',
class: settings.class_prefix + 'controls-right').appendTo(videoControls)
playButton = $('',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'play-button'
text: '>').appendTo(videoControlsLeft)
playButton.on('click', (e) ->
e.preventDefault()
toggleIsPlaying())
progressTime = $('',
class: settings.class_prefix + 'control' + ' ' +
settings.class_prefix + 'progressTime').appendTo(videoControlsLeft)
progressTime.html('' + msToTime(videoElem.get(0).currentTime) + ' / ' +
'' + msToTime(videoElem.get(0).duration) + '')
volumeSlider = $('',
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)
# end createPlayer function
return
# playVideo - start playing video
playVideo = ->
videoElem.get(0).play()
videoControls.find('.' + settings.class_prefix + 'play-button').text('||')
isPlaying = true
# end playVideo function
return
# pauseVideo - pause video
pauseVideo = ->
videoElem.get(0).pause()
videoControls.find('.' + settings.class_prefix + 'play-button').text('>')
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 = ->
if !videoElem.get(0).paused
pauseVideo()
else
playVideo()
# 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
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
else
progress = setProgress
# calculate width for the progress fill
progressWidth = (progress / videoElem.get(0).duration) * progressBar.width()
# set the width on the progress foreground element
progressFill.css('width', progressWidth + 'px')
# update the progress time while we're at it
videoControls.find('.currentTime').text(msToTime(progress))
# end updateProgress function
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
setup(this)
# end MUPlayer function
return
return
) jQuery