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