Added basic video playback to player (play/pause)
This commit is contained in:
		
							
								
								
									
										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 | ||||||
		Reference in New Issue
	
	Block a user