Added support for multiple instances

assets/js/docs.js

@@ -4,14 +4,9 @@
 
 /*global simpleMedia, templates */
 
-// Register a callback
+// Setup the player
-simpleMedia.on("setup", function() {
-	//console.log(this);
-});
-
-//execute shout
 simpleMedia.setup({
-	//debug: 	true,
+	debug: 	true,
 	title: 	"Video demo",
 	html: 	templates.controls.render({})
 });

assets/js/simple-media.js

@@ -14,9 +14,6 @@
 	// Globals
 	var fullscreen, config;
 
-	// Object cache
-	var player = {};
-
 	// Handler cache
 	var handlers = {};
 
@@ -69,7 +66,7 @@
 
 	// Credits: http://paypal.github.io/accessible-html5-video-player/
 	// Unfortunately, due to scattered support, browser sniffing is required
-	function browserSniff() {
+	function _browserSniff() {
 		var nAgt = navigator.userAgent,
 			browserName = navigator.appName,
 			fullVersion = ""+parseFloat(navigator.appVersion),
@@ -130,60 +127,14 @@
 		// Return data
 		return [browserName, majorVersion];
 	}
-	// Utilities for caption time codes
-	function video_timecode_min(tc) {
-		var tcpair = [];
-		tcpair = tc.split(" --> ");
-		return videosub_tcsecs(tcpair[0]);
-	}
-	function video_timecode_max(tc) {
-		var tcpair = [];
-		tcpair = tc.split(" --> ");
-		return videosub_tcsecs(tcpair[1]);
-	}
-	function videosub_tcsecs(tc) {
-		if (tc === null || tc === undefined) {
-			return 0;
-		}
-		else {
-			var tc1 = [],
-				tc2 = [],
-				seconds;
-			tc1 = tc.split(",");
-			tc2 = tc1[0].split(":");
-			seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
-			return seconds;
-		}
-	}
-	// For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
-	// http://paypal.github.io/accessible-html5-video-player/
-	function adjustManualCaptions(player) {
-		player.subcount = 0;
-		while (video_timecode_max(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
-			player.subcount++;
-			if (player.subcount > player.captions.length-1) {
-				player.subcount = player.captions.length-1;
-				break;
-			}
-		}
-	}
-	// Display captions container and button (for initialization)
-	function showCaptions(player) {
-		player.container.className += " " + config.classes.captions.enabled;
-
-		if (config.captions.defaultActive) {
-			player.container.className += " " + config.classes.captions.active;
-			player.buttons.captions.setAttribute("checked", "checked");
-		}
-	}
 	
 	// Replace all
-	function replaceAll(string, find, replace) {
+	function _replaceAll(string, find, replace) {
 		return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
 	}
 
 	// Wrap an element
-	function wrap(elements, wrapper) {
+	function _wrap(elements, wrapper) {
 	    // Convert `elms` to an array, if necessary.
 	    if (!elements.length) {
 	    	elements = [elements];
@@ -214,6 +165,24 @@
 	    }
 	}
 
+	// Toggle class on an element
+	function _toggleClass(element, name, state) {
+		if(element){
+			if(element.classList) {
+				element.classList[state ? "add" : "remove"](name);
+			}
+			else {
+				var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", "");
+				element.className = className + (state ? " " + name : "")
+			}
+		}
+	}
+
+	// Bind event
+	function _on(element, event, callback) {
+		element.addEventListener(event, callback, false);
+	}
+
 	// Get click position relative to parent
 	// http://www.kirupa.com/html5/getting_mouse_click_position.htm
 	function _getClickPosition(event) {
@@ -321,23 +290,72 @@
 		return fullscreen;
 	}
 
-	// Our internal function that executes handlers with a given name
+	// Player instance
-	function executeHandlers(eventName){
+	function Player(container) {
-		// Get all handlers with the selected name
+		var player = this;
-		var handler = handlers[eventName] || [], 
+		player.container = container;
-			len = handler.length, 
-			i;
 
-		// Execute each
+		// Captions functions
-		for(i = 0; i< len; i++){
+		// Credits: http://paypal.github.io/accessible-html5-video-player/
-			// You can use apply to specify what "this" and parameters the callback gets
+
-			handler[i].apply(player.media,[]);
+		// For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
+		function _adjustManualCaptions() {
+			player.subcount = 0;
+			while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
+				player.subcount++;
+				if (player.subcount > player.captions.length-1) {
+					player.subcount = player.captions.length-1;
+					break;
+				}
+			}
+		}
+		// Display captions container and button (for initialization)
+		function _showCaptions() {
+			_toggleClass(player.container, config.classes.captions.enabled, true);
+
+			if (config.captions.defaultActive) {
+				_toggleClass(player.container, config.classes.captions.active, true);
+				player.buttons.captions.setAttribute("checked", "checked");
+			}
+		}
+		// Utilities for caption time codes
+		function _timecodeMin(tc) {
+			var tcpair = [];
+			tcpair = tc.split(" --> ");
+			return _subTcSecs(tcpair[0]);
+		}
+		function _timecodeMax(tc) {
+			var tcpair = [];
+			tcpair = tc.split(" --> ");
+			return _subTcSecs(tcpair[1]);
+		}
+		function _subTcSecs(tc) {
+			if (tc === null || tc === undefined) {
+				return 0;
+			}
+			else {
+				var tc1 = [],
+					tc2 = [],
+					seconds;
+				tc1 = tc.split(",");
+				tc2 = tc1[0].split(":");
+				seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
+				return seconds;
 			}
 		}
 
+		// Find all elements
+		function _getElements(selector) {
+			return player.container.querySelectorAll(selector);
+		}
+
+		// Find a single element
+		function _getElement(selector) {
+			return _getElements(selector)[0];
+		}
 
 		// Insert controls
-	function injectControls() {
+		function _injectControls() {
 			// Insert custom video controls
 			if (config.debug) {
 				console.log("Injecting custom controls");
@@ -348,98 +366,45 @@
 			var html = config.html;
 
 			// Replace aria label instances
-		html = replaceAll(html, "{aria-label}", config.playAriaLabel);
+			html = _replaceAll(html, "{aria-label}", config.playAriaLabel);
 
 			// Replace all id references
-		html = replaceAll(html, "{id}", player.random);
+			html = _replaceAll(html, "{id}", player.random);
 
 			// Inject into the container
 			player.container.insertAdjacentHTML("beforeend", html);
 		}
 
-	// Find all elements
-	function getElements(selector) {
-		return player.container.querySelectorAll(selector);
-	}
-
-	// Find a single element
-	function getElement(selector) {
-		return getElements(selector)[0];
-	}
-
 		// Find the UI controls and store references
-	function findElements() {
+		function _findElements() {
-		player.controls 			= getElement(config.selectors.controls);
+			player.controls 			= _getElement(config.selectors.controls);
 
 			// Buttons
 			player.buttons = {};
-		player.buttons.play 		= getElement(config.selectors.buttons.play);
+			player.buttons.play 		= _getElement(config.selectors.buttons.play);
-		player.buttons.pause 		= getElement(config.selectors.buttons.pause);
+			player.buttons.pause 		= _getElement(config.selectors.buttons.pause);
-		player.buttons.restart 		= getElement(config.selectors.buttons.restart);
+			player.buttons.restart 		= _getElement(config.selectors.buttons.restart);
-		player.buttons.rewind 		= getElement(config.selectors.buttons.rewind);
+			player.buttons.rewind 		= _getElement(config.selectors.buttons.rewind);
-		player.buttons.forward 		= getElement(config.selectors.buttons.forward);
+			player.buttons.forward 		= _getElement(config.selectors.buttons.forward);
-		player.buttons.mute 		= getElement(config.selectors.buttons.mute);
+			player.buttons.mute 		= _getElement(config.selectors.buttons.mute);
-		player.buttons.captions		= getElement(config.selectors.buttons.captions);
+			player.buttons.captions		= _getElement(config.selectors.buttons.captions);
-		player.buttons.fullscreen 	= getElement(config.selectors.buttons.fullscreen);
+			player.buttons.fullscreen 	= _getElement(config.selectors.buttons.fullscreen);
 
 			// Progress
 			player.progress = {};
-		player.progress.bar			= getElement(config.selectors.progress);
+			player.progress.bar			= _getElement(config.selectors.progress);
 			player.progress.text 		= player.progress.bar.getElementsByTagName("span")[0];
 
 			// Volume
-		player.volume 				= getElement(config.selectors.buttons.volume);
+			player.volume 				= _getElement(config.selectors.buttons.volume);
 
 			// Timing
-		player.duration 			= getElement(config.selectors.duration);
+			player.duration 			= _getElement(config.selectors.duration);
-		player.seekTime 			= getElements(config.selectors.seekTime);
+			player.seekTime 			= _getElements(config.selectors.seekTime);
-	}
-
-	// Play media
-	function play() {
-		player.media.play();
-		player.container.className = player.container.className.replace(config.classes.stopped, config.classes.playing);
-	}
-
-	// Pause media
-	function pause() {
-		player.media.pause(); 
-		player.container.className = player.container.className.replace(config.classes.playing, config.classes.stopped);
-	}
-
-	// Restart playback
-	function restart() {
-		// Move to beginning
-		player.media.currentTime = 0;
-
-		// Special handling for "manual" captions
-		if (!player.isTextTracks) {
-			player.subcount = 0;
-		}
-
-		// Play and ensure the play button is in correct state
-		play();
-	}
-
-	// Set volume
-	function setVolume() {
-		player.volume.value = config.volume;
-		player.media.volume = parseFloat(config.volume / 10);
-		checkMute();
-	}
-
-	// Check mute state
-	function checkMute() {
-		if(player.media.volume === 0 || player.media.muted) {
-			player.container.className += " " + config.classes.muted;
-		}
-		else {
-			player.container.className = player.container.className.replace(config.classes.muted, "");
-		}
 		}
 
 		// Setup media
-	function setupMedia() {
+		function _setupMedia() {
 			player.media = player.container.querySelectorAll("audio, video")[0];
 
 			// If there's no media, bail
@@ -449,9 +414,7 @@
 			}
 
 			// If there's no autoplay attribute, assume the video is stopped
-		if(player.media.getAttribute("autoplay") === null) {
+			_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
-			player.container.className += " " + config.classes.stopped;
-		}
 
 			// Remove native video controls
 			player.media.removeAttribute("controls");
@@ -466,7 +429,7 @@
 				wrapper.setAttribute("class", config.classes.videoContainer);
 
 				// Wrap the video in a container
-			wrap(player.media, wrapper);
+				_wrap(player.media, wrapper);
 
 				// Cache the container
 				player.videoContainer = wrapper;
@@ -474,13 +437,13 @@
 		}
 
 		// Setup captions
-	function setupCaptions() {
+		function _setupCaptions() {
 			if(player.type === "video") {
 				// Inject the container
 				player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>");
 
 				// Cache selector
-			player.captionsContainer = getElement(config.selectors.captions);
+				player.captionsContainer = _getElement(config.selectors.captions);
 
 				// Determine if HTML5 textTracks is supported
 				player.isTextTracks = false;
@@ -518,9 +481,8 @@
 
 				// If no caption file exists, hide container for caption text
 				if (!player.captionExists) {
-				player.container.className = player.container.className.replace(config.classes.captions.enabled, "");
+					_toggleClass(player.container, config.classes.captions.enabled);
 				}
-
 				// If caption file exists, process captions
 				else {
 					var track = {}, tracks, j;
@@ -550,7 +512,7 @@
 						if (config.debug) {
 							console.log("textTracks supported");
 						}
-					showCaptions(player);
+						_showCaptions(player);
 
 						track = {};
 						tracks = player.media.textTracks;
@@ -558,13 +520,13 @@
 							track = player.media.textTracks[j];
 							track.mode = "hidden";
 							if (track.kind === "captions") {
-							track.addEventListener("cuechange",function() {
+								_on(track, "cuechange",function() {
 									if (this.activeCues[0]) {
 										if (this.activeCues[0].hasOwnProperty("text")) {
 											player.captionsContainer.innerHTML = this.activeCues[0].text;
 										}
 									}
-							},false);
+								});
 							}
 						}
 					}
@@ -573,27 +535,27 @@
 						if (config.debug) {
 							console.log("textTracks not supported so rendering captions manually");
 						}
-					showCaptions(player);
+						_showCaptions(player);
 
 						// Render captions from array at appropriate time
 						player.currentCaption = "";
 						player.subcount = 0;
 						player.captions = [];
 
-					player.media.addEventListener("timeupdate", function() {
+						_on(player.media, "timeupdate", function() {
 							// Check if the next caption is in the current time range
-						if (player.media.currentTime.toFixed(1) > video_timecode_min(player.captions[player.subcount][0]) && 
+							if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && 
-							player.media.currentTime.toFixed(1) < video_timecode_max(player.captions[player.subcount][0])) {
+								player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) {
 									player.currentCaption = player.captions[player.subcount][1];
 							}
 							// Is there a next timecode?
-						if (player.media.currentTime.toFixed(1) > video_timecode_max(player.captions[player.subcount][0]) && 
+							if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && 
 								player.subcount < (player.captions.length-1)) {
 									player.subcount++;
 							}
 							// Render the caption
 							player.captionsContainer.innerHTML = player.currentCaption;
-					}, false);
+						});
 
 						if (captionSrc !== "") {
 							// Create XMLHttpRequest Object
@@ -627,7 +589,8 @@
 										if (config.debug) {
 											console.log("Successfully loaded the caption file via ajax.");
 										}
-								} else {
+									} 
+									else {
 										if (config.debug) {
 											console.log("There was a problem loading the caption file via ajax.");
 										}
@@ -652,14 +615,14 @@
 		}
 
 		// Setup seeking
-	function setupSeeking() {
+		function _setupSeeking() {
 			// Update number of seconds in rewind and fast forward buttons
 			player.seekTime[0].innerHTML = config.seekInterval;
 			player.seekTime[1].innerHTML = config.seekInterval;
 		}
 
 		// Setup fullscreen
-	function setupFullscreen() {
+		function _setupFullscreen() {
 			if(player.type === "video" && config.fullscreen.enabled) {
 				
 				if(config.debug) {
@@ -670,7 +633,7 @@
 						console.log("Fullscreen enabled");
 					}
 
-				player.container.className += " " + config.classes.fullscreen.enabled;
+					_toggleClass(player.container, config.classes.fullscreen.enabled, true);
 				}
 				else if(config.debug) {
 					console.warn("Fullscreen not supported");
@@ -678,50 +641,38 @@
 			}	
 		}
 
-	// Listen for events
+		// Play media
-	function listeners() {
+		function _play() {
-		// Fullscreen
+			player.media.play();
-		player.buttons.fullscreen.addEventListener("click", function() {
-			if(!fullscreen.isFullScreen()) {
-				fullscreen.requestFullScreen(player.container);
-			}
-			else {
-				fullscreen.cancelFullScreen();
-			}
-		}, false);
 
-		// Click video
+			_toggleClass(player.container, config.classes.stopped);
-		if(player.type === "video" && config.clickToPause) {
+			_toggleClass(player.container, config.classes.playing, true);
-			player.videoContainer.addEventListener("click", function() {
-				if(player.media.paused) {
-					play();
-				}
-				else if(player.media.ended) {
-					restart();
-				}
-				else {
-					pause();
-				}
-			}, false);
 		}
 
-		// Play
+		// Pause media
-		player.buttons.play.addEventListener("click", function() { 
+		function _pause() {
-			play(); 
+			player.media.pause(); 
-			player.buttons.pause.focus(); 
-		}, false);
 
-		// Pause
+			_toggleClass(player.container, config.classes.playing);
-		player.buttons.pause.addEventListener("click", function() { 
+			_toggleClass(player.container, config.classes.stopped, true);
-			pause(); 
+		}
-			player.buttons.play.focus(); 
-		}, false);
 
-		// Restart
+		// Restart playback
-		player.buttons.restart.addEventListener("click", restart, false);
+		function _restart() {
+			// Move to beginning
+			player.media.currentTime = 0;
+
+			// Special handling for "manual" captions
+			if (!player.isTextTracks) {
+				player.subcount = 0;
+			}
+
+			// Play and ensure the play button is in correct state
+			_play();
+		}
 
 		// Rewind
-		player.buttons.rewind.addEventListener("click", function() {
+		function _rewind() {
 			var targetTime = player.media.currentTime - config.seekInterval;
 
 			if (targetTime < 0) {
@@ -732,12 +683,12 @@
 			}
 			// Special handling for "manual" captions
 			if (!player.isTextTracks && player.type === "video") {
-				adjustManualCaptions(player);
+				_adjustManualCaptions(player);
+			}
 		}
-		}, false);
 
 		// Fast forward
-		player.buttons.forward.addEventListener("click", function() {
+		function _forward() {
 			var targetTime = player.media.currentTime + config.seekInterval;
 
 			if (targetTime > player.media.duration) {
@@ -748,29 +699,113 @@
 			}
 			// Special handling for "manual" captions
 			if (!player.isTextTracks && player.type === "video") {
-				adjustManualCaptions(player);
+				_adjustManualCaptions(player);
+			}
 		}
-		}, false);
 
-		// Get the HTML5 range input element and append audio volume adjustment on change
+		// Toggle fullscreen
-		player.volume.addEventListener("change", function() {
+		function _toggleFullscreen() {
-			config.volume = this.value;
+			if(!fullscreen.isFullScreen()) {
-			setVolume();
+				fullscreen.requestFullScreen(player.container);
-		}, false);
-
-		// Mute
-		player.buttons.mute.addEventListener("click", function() {
-			if (player.media.muted === true) {
-				player.media.muted = false;
 			}
 			else {
-				player.media.muted = true;
+				fullscreen.cancelFullScreen();
 			}
-			checkMute();
+		}
-		}, false);
+
+		// Set volume
+		function _setVolume(volume) {
+			player.volume.value = volume;
+			player.media.volume = parseFloat(volume / 10);
+			_checkMute();
+		}
+
+		// Mute
+		function _toggleMute(muted) {
+			// If the method is called without parameter, toggle based on current value
+			if(typeof active === "undefined") {
+				muted = !player.media.muted;
+				player.buttons.mute.checked = muted;
+			}
+
+			player.media.muted = muted;
+			_checkMute();
+		}
+
+		// Toggle captions
+		function _toggleCaptions(active) { 
+			// If the method is called without parameter, toggle based on current value
+			if(typeof active === "undefined") {
+				active = (player.container.className.indexOf(config.classes.captions.active) === -1);
+				player.buttons.captions.checked = active;
+			}
+
+			if (active) {
+				_toggleClass(player.container, config.classes.captions.active, true);
+			} 
+			else {
+				_toggleClass(player.container, config.classes.captions.active);
+			}
+		}
+
+		// Check mute state
+		function _checkMute() {
+			_toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
+		}
+
+		// Listen for events
+		function _listeners() {
+			// Fullscreen
+			_on(player.buttons.fullscreen, "click", _toggleFullscreen);
+
+			// Click video
+			if(player.type === "video" && config.clickToPause) {
+				_on(player.videoContainer, "click", function() {
+					if(player.media.paused) {
+						_play();
+					}
+					else if(player.media.ended) {
+						_restart();
+					}
+					else {
+						_pause();
+					}
+				});
+			}
+
+			// Play
+			_on(player.buttons.play, "click", function() { 
+				_play(); 
+				player.buttons.pause.focus(); 
+			});
+
+			// Pause
+			_on(player.buttons.pause, "click", function() { 
+				_pause(); 
+				player.buttons.play.focus(); 
+			});
+
+			// Restart
+			_on(player.buttons.restart, "click", _restart);
+
+			// Rewind
+			_on(player.buttons.rewind, "click", _rewind);
+
+			// Fast forward
+			_on(player.buttons.forward, "click", _forward);
+
+			// Get the HTML5 range input element and append audio volume adjustment on change
+			_on(player.volume, "change", function() {
+				_setVolume(this.value);
+			});
+
+			// Mute
+			_on(player.buttons.mute, "change", function() {
+				_toggleMute(this.checked);
+			});
 			
 			// Duration
-		player.media.addEventListener("timeupdate", function() {
+			_on(player.media, "timeupdate", function() {
 				player.secs = parseInt(player.media.currentTime % 60);
 				player.mins = parseInt((player.media.currentTime / 60) % 60);
 				
@@ -780,103 +815,50 @@
 
 				// Render
 				player.duration.innerHTML = player.mins + ":" + player.secs;
-		}, false);
+			});
 
 			// Progress bar
-		player.media.addEventListener("timeupdate", function() {
+			_on(player.media, "timeupdate", function() {
 				player.percent = (100 / player.media.duration) * player.media.currentTime;
 
 				if (player.percent > 0) {
 					player.progress.bar.value = player.percent;
 					player.progress.text.innerHTML = player.percent;
 				}
-		}, false);
+			});
 
 			// Skip when clicking progress bar
-		player.progress.bar.addEventListener("click", function(event) {
+			_on(player.progress.bar, "click", function(event) {
 				player.pos = _getClickPosition(event).x / this.offsetWidth;
 				player.media.currentTime = player.pos * player.media.duration;
 				
 				// Special handling for "manual" captions
 				if (!player.isTextTracks && player.type === "video") {
-				adjustManualCaptions(player);
+					_adjustManualCaptions(player);
 				}
 			});
 
 			// Captions
-		player.buttons.captions.addEventListener("click", function() { 
+			_on(player.buttons.captions, "click", function() { 
-			if (this.checked) {
+				_toggleCaptions(this.checked);
-				player.container.className += " " + config.classes.captions.active;
+			});
-			} 
-			else {
-				player.container.className = player.container.className.replace(config.classes.captions.active, "");
-			}
-		}, false);
 
 			// Clear captions at end of video
-		player.media.addEventListener("ended", function() {
+			_on(player.media, "ended", function() {
 				if(player.type === "video") {
 					player.captionsContainer.innerHTML = "";
 				}
-			player.container.className = player.container.className.replace(config.classes.playing, config.classes.stopped);
+				_toggleClass(player.container, config.classes.stopped, true);
+				_toggleClass(player.container, config.classes.playing);
 			});
 		}
 
-	function setupPlayer(element) {
+		function _init() {
-		player.container = element;
-		
-		// Setup media
-		setupMedia();
-
-		// Generate random number for id/for attribute values for controls
-		player.random = Math.floor(Math.random() * (10000));
-
-		// Inject custom controls
-		injectControls();
-
-		// Find the elements
-		findElements();
-
-		// Set volume
-		setVolume();
-
-		// Setup fullscreen
-		setupFullscreen();
-
-		// Captions
-		setupCaptions();
-
-		// Seeking
-		setupSeeking();
-
-		// Listeners
-		listeners();
-	}
-
-	// Our "on" function which collects handlers
-	api.on = function(eventName, handler){
-		// If no handler collection exists, create one
-		if(!handlers[eventName]){
-			handlers[eventName] = [];
-		}
-		handlers[eventName].push(handler);
-	}
-
-	// Expose setup function
-	api.setup = function(options){
-		// Extend the default options with user specified
-		config = _extend(defaults, options);
-
-		// If enabled carry on
-		if(!config.enabled) {
-			return false;
-		}
-
 			// Setup the fullscreen api 
 			fullscreen = _fullscreen();
 
 			// Sniff 
-		player.browserInfo = browserSniff();
+			player.browserInfo = _browserSniff();
 			player.browserName = player.browserInfo[0];
 			player.browserMajorVersion = player.browserInfo[1];
 
@@ -902,24 +884,73 @@
 				config.playAriaLabel = "Play " + config.title;
 			}
 
-		// Get the container and video container
+			// Setup media
-		var element = document.querySelector(config.selectors.container);
+			_setupMedia();
-		if(element === null) {
+
-			if(config.debug) {
+			// Generate random number for id/for attribute values for controls
-				console.error("Selector " + config.selectors.container + " not found!");
+			player.random = Math.floor(Math.random() * (10000));
+
+			// Inject custom controls
+			_injectControls();
+
+			// Find the elements
+			_findElements();
+
+			// Set volume
+			_setVolume(config.volume);
+
+			// Setup fullscreen
+			_setupFullscreen();
+
+			// Captions
+			_setupCaptions();
+
+			// Seeking
+			_setupSeeking();
+
+			// Listeners
+			_listeners();
 		}
+
+		_init();
+
+		return {
+			media: 				player.media,
+			play: 				_play,
+			pause: 				_pause,
+			restart: 			_restart,
+			rewind: 			_rewind,
+			forward: 			_forward,
+			setVolume: 			_setVolume,
+			toggleMute: 		_toggleMute,
+			toggleCaptions: 	_toggleCaptions
+		}
+	}
+
+	// Expose setup function
+	api.setup = function(options){
+		// Extend the default options with user specified
+		config = _extend(defaults, options);
+
+		// If enabled carry on
+		// You may want to disable certain UAs etc
+		if(!config.enabled) {
 			return false;
 		}
-		setupPlayer(element);
 
-		/*var elements = document.querySelectorAll(config.selectors.container);
+		// Get the players 
+		var elements = document.querySelectorAll(config.selectors.container);
 
+		// Create a player instance for each element
 		for (var i = elements.length - 1; i >= 0; i--) {
-			setupPlayer(elements[i]);
+			// Get the current element
-		}*/
+			var element = elements[i];
 			
-		// Trigger the setup event
+			// Setup a player instance
-		executeHandlers("setup");
+			var player = new Player(element);
+
+			// Add the player object to the element
+			element.player = player;
+		}
 	}
-
 }(this.simpleMedia = this.simpleMedia || {}));

assets/less/docs.less

@@ -35,14 +35,14 @@ html {
 }
 body {
 	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	.font-size(18);
-	color: #6D797F;
-	line-height: 1.5;
 	background: #fff;
+	.font-size(16);
+	line-height: 1.5;
 	text-align: center;
+	color: #6D797F;
 }
-h1 {
+h1,
-	.font-size(48);
+h2 {
 	letter-spacing: -.025em;
 	color: #2E3C44;
 	margin: 0 0 10px;
@@ -50,16 +50,27 @@ h1 {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
+h1 {
+	.font-size(48);
+}
+h2 {
+	.font-size(32);
+	margin: 0 0 20px;
+}
 p {
 	margin: 0 0 20px;
 }
 header {
 	margin: 40px 0;
+
+	p {
+		.font-size(18);
+	}
 }
 
 .example-audio .player,
 .example-video .player {
-	margin: 0 auto;
+	margin: 0 auto 40px;
 
 	&:fullscreen {
 		max-width: none;

dist/css/docs.css

@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;font-size:1.8rem;color:#6D797F;line-height:1.5;background:#fff;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin:0 0 20px}header{margin:40px 0}.example-audio .player,.example-video .player{margin:0 auto}.example-audio .player:-webkit-full-screen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player:-moz-full-screen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player:-ms-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player:fullscreen,.example-video .player:fullscreen{max-width:none}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:48px;font-size:4.8rem}h2{font-size:32px;font-size:3.2rem;margin:0 0 20px}p{margin:0 0 20px}header{margin:40px 0}header p{font-size:18px;font-size:1.8rem}.example-audio .player,.example-video .player{margin:0 auto 40px}.example-audio .player:-webkit-full-screen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player:-moz-full-screen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player:-ms-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player:fullscreen,.example-video .player:fullscreen{max-width:none}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}

docs/audio.html

@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="en" class="example-audio">
-	<head>
-		<meta charset="utf-8" />
-		<title>Simple Media</title>
-		<meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
-		<meta name="author" content="Sam Potts">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-
-		<!-- Styles -->
-		<link rel="stylesheet" href="../dist/css/simple-media.css">
-		<link rel="stylesheet" href="../dist/css/docs.css">
-	</head>
-	<body>
-		<header>
-			<h1>Simple Media</h1>
-			<p>A simple HTML5 media player</p>
-		</header>
-
-		<div class="player">
-			<audio controls>
-				<!-- Audio files -->
-				<source src="../media/Covox_-_Switchblade_Squadron.mp3" type="audio/mp3">
-				
-				<!-- Fallback for browsers that don't support the <audio> element -->
-				<div>
-					<a href="../media/Covox_-_Switchblade_Squadron.mp3">Download it</a>
-				</div>
-			</video>
-		</div>
-
-		<!-- Load SVG defs -->
-		<script>(function(d,p){var a=new XMLHttpRequest(),b=d.body; a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/svg/sprite.svg");</script>
-
-		<!-- Core player -->
-		<script src="../dist/js/simple-media.js"></script>
-
-		<!-- Docs setup -->
-		<script src="../dist/js/docs.js"></script>
-	</body>
-</html>

docs/index.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Simple Media</title>
+		<meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
+		<meta name="author" content="Sam Potts">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<!-- Styles -->
+		<link rel="stylesheet" href="../dist/css/simple-media.css">
+		<link rel="stylesheet" href="../dist/css/docs.css">
+	</head>
+	<body>
+		<header>
+			<h1>Simple Media</h1>
+			<p>A simple HTML5 media player</p>
+		</header>
+
+		<section class="example-video">
+			<h2>Video</h2>
+			<p>Using the native &lt;video&gt; element.</p>
+			<div class="player">
+				<video poster="../media/poster_PayPal_Austin2.jpg" controls>
+					<!-- Video files -->
+					<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4">
+					<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.webm" type="video/webm">
+					
+					<!-- Text track file -->
+					<track kind="captions" label="English captions" src="../media/captions_PayPal_Austin_en.vtt" srclang="en" default>
+					
+					<!-- Fallback for browsers that don't support the <video> element -->
+					<div>
+						<a href="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4">
+							<img src="../media/poster_PayPal_Austin2.jpg" width="640" height="360" alt="download video">
+						</a>
+					</div>
+				</video>
+			</div>
+		</section>
+
+		<section class="example-audio">
+			<h2>Audio</h2>
+			<p>Yep, it does &lt;audio&gt; too.</p>
+			<div class="player">
+				<audio controls>
+					<!-- Audio files -->
+					<source src="../media/Covox_-_Switchblade_Squadron.mp3" type="audio/mp3">
+					
+					<!-- Fallback for browsers that don't support the <audio> element -->
+					<div>
+						<a href="../media/Covox_-_Switchblade_Squadron.mp3">Download it</a>
+					</div>
+				</audio>
+			</div>
+		</section>
+
+		<!-- Load SVG defs -->
+		<script>(function(d,p){var a=new XMLHttpRequest(),b=d.body; a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/svg/sprite.svg");</script>
+
+		<!-- Core player -->
+		<script src="../dist/js/simple-media.js"></script>
+
+		<!-- Docs setup -->
+		<script src="../dist/js/docs.js"></script>
+	</body>
+</html>

docs/video.html

@@ -1,47 +0,0 @@
-<!doctype html>
-<html lang="en" class="example-video">
-	<head>
-		<meta charset="utf-8" />
-		<title>Simple Media</title>
-		<meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
-		<meta name="author" content="Sam Potts">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-
-		<!-- Styles -->
-		<link rel="stylesheet" href="../dist/css/simple-media.css">
-		<link rel="stylesheet" href="../dist/css/docs.css">
-	</head>
-	<body>
-		<header>
-			<h1>Simple Media</h1>
-			<p>A simple HTML5 media player</p>
-		</header>
-
-		<div class="player">
-			<video poster="../media/poster_PayPal_Austin2.jpg" controls>
-				<!-- Video files -->
-				<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4">
-				<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.webm" type="video/webm">
-				
-				<!-- Text track file -->
-				<track kind="captions" label="English captions" src="../media/captions_PayPal_Austin_en.vtt" srclang="en" default>
-				
-				<!-- Fallback for browsers that don't support the <video> element -->
-				<div>
-					<a href="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4">
-						<img src="../media/poster_PayPal_Austin2.jpg" width="640" height="360" alt="download video">
-					</a>
-				</div>
-			</video>
-		</div>
-
-		<!-- Load SVG defs -->
-		<script>(function(d,p){var a=new XMLHttpRequest(),b=d.body; a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/svg/sprite.svg");</script>
-
-		<!-- Core player -->
-		<script src="../dist/js/simple-media.js"></script>
-
-		<!-- Docs setup -->
-		<script src="../dist/js/docs.js"></script>
-	</body>
-</html>