diff --git a/src/coffee/player.coffee b/src/coffee/player.coffee new file mode 100644 index 0000000..c0f6a96 --- /dev/null +++ b/src/coffee/player.coffee @@ -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 = $('', + 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', pauseVideo) + + # 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 + playButton = $('', + 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 \ No newline at end of file