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