Added basic video playback to player (play/pause)
This commit is contained in:
parent
8f5876a4a7
commit
5460d47159
121
src/coffee/player.coffee
Normal file
121
src/coffee/player.coffee
Normal file
@ -0,0 +1,121 @@
|
||||
(($) ->
|
||||
|
||||
$.fn.MUPlayer = (opt) ->
|
||||
# define global variables
|
||||
settings = undefined # settings objects
|
||||
videoElem = undefined
|
||||
videoControls = undefined
|
||||
|
||||
# combine user settings with defaults
|
||||
settings = $.extend({
|
||||
'use_default_css': false
|
||||
'class_prefix': 'mup-'
|
||||
'default_volume': 50
|
||||
'default_position': 0
|
||||
'video_sources': []
|
||||
}, 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')
|
||||
|
||||
# create the video player
|
||||
createPlayer(wrapperElem)
|
||||
|
||||
# end setup function
|
||||
return
|
||||
|
||||
# addStylesheet - adds a stylesheet to the head element
|
||||
addStylesheet = (filename) ->
|
||||
# create link element
|
||||
cssElem = $('<link/>',
|
||||
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 = $('<video/>',
|
||||
class: settings.class_prefix + 'video')
|
||||
videoElem.on('ended', pauseVideo)
|
||||
|
||||
# loop through the video sources
|
||||
for source in settings.video_sources
|
||||
# create new source element
|
||||
newSrc = $('<source/>',
|
||||
src: source.link
|
||||
type: source.type)
|
||||
# append source element to the newly created video element
|
||||
videoElem.append(newSrc)
|
||||
|
||||
# create video controls wrapper
|
||||
videoControls = $('<div/>',
|
||||
class: settings.class_prefix + 'controls')
|
||||
|
||||
# create control elements
|
||||
playButton = $('<button/>',
|
||||
class: settings.class_prefix + 'button' + ' ' +
|
||||
settings.class_prefix + 'play-button'
|
||||
text: '>').appendTo(videoControls)
|
||||
playButton.on('click', (e) ->
|
||||
e.preventDefault()
|
||||
toggleIsPlaying(this)
|
||||
)
|
||||
|
||||
# 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.children('.' + settings.class_prefix + 'play-button').text('||')
|
||||
isPlaying = true
|
||||
|
||||
# pauseVideo - pause video
|
||||
pauseVideo = ->
|
||||
videoElem.get(0).pause()
|
||||
videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
|
||||
isPlaying = false
|
||||
|
||||
# toggleIsPlaying - toggle between play and pause
|
||||
toggleIsPlaying = () ->
|
||||
if !videoElem.get(0).paused
|
||||
pauseVideo()
|
||||
else
|
||||
playVideo()
|
||||
|
||||
# end toggleIsPlaying function
|
||||
return
|
||||
|
||||
# run the setup function
|
||||
setup(this)
|
||||
|
||||
# end MUPlayer function
|
||||
return
|
||||
|
||||
return
|
||||
) jQuery
|
Loading…
Reference in New Issue
Block a user