bgneal@488: /* bgneal@488: * jPlayerInspector Plugin for jPlayer (2.0.0+) Plugin for jQuery JavaScript Library bgneal@488: * http://www.happyworm.com/jquery/jplayer bgneal@488: * bgneal@488: * Copyright (c) 2009 - 2011 Happyworm Ltd bgneal@488: * Dual licensed under the MIT and GPL licenses. bgneal@488: * - http://www.opensource.org/licenses/mit-license.php bgneal@488: * - http://www.gnu.org/copyleft/gpl.html bgneal@488: * bgneal@488: * Author: Mark J Panaghiston bgneal@488: * Version: 1.0.3 bgneal@488: * Date: 7th August 2011 bgneal@488: * bgneal@488: * For use with jPlayer Version: 2.0.29 bgneal@488: * bgneal@488: * Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense. bgneal@488: */ bgneal@488: bgneal@488: (function($, undefined) { bgneal@488: $.jPlayerInspector = {}; bgneal@488: $.jPlayerInspector.i = 0; bgneal@488: $.jPlayerInspector.defaults = { bgneal@488: jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect. bgneal@488: idPrefix: "jplayer_inspector_", bgneal@488: visible: false bgneal@488: }; bgneal@488: bgneal@488: var methods = { bgneal@488: init: function(options) { bgneal@488: var self = this; bgneal@488: var $this = $(this); bgneal@488: bgneal@488: var config = $.extend({}, $.jPlayerInspector.defaults, options); bgneal@488: $(this).data("jPlayerInspector", config); bgneal@488: bgneal@488: config.id = $(this).attr("id"); bgneal@488: config.jPlayerId = config.jPlayer.attr("id"); bgneal@488: bgneal@488: config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i; bgneal@488: config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i; bgneal@488: config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i; bgneal@488: config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i; bgneal@488: config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i; bgneal@488: config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i; bgneal@488: config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i; bgneal@488: bgneal@488: config.eventId = {}; bgneal@488: config.eventJq = {}; bgneal@488: config.eventTimeout = {}; bgneal@488: config.eventOccurrence = {}; bgneal@488: bgneal@488: $.each($.jPlayer.event, function(eventName,eventType) { bgneal@488: config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i; bgneal@488: config.eventOccurrence[eventType] = 0; bgneal@488: }); bgneal@488: bgneal@488: var structure = bgneal@488: '<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>' bgneal@488: + '<div id="' + config.windowId + '">' bgneal@488: + '<div id="' + config.statusId + '"></div>' bgneal@488: + '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">' bgneal@488: + '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>' bgneal@488: + '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>'; bgneal@488: bgneal@488: // MJP: Would use the next 3 lines for ease, but the events are just slapped on the page. bgneal@488: // $.each($.jPlayer.event, function(eventName,eventType) { bgneal@488: // structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>'; bgneal@488: // }); bgneal@488: bgneal@488: var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;"; bgneal@488: // MJP: Doing it longhand so order and layout easier to control. bgneal@488: structure += bgneal@488: '<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>' bgneal@488: bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>' bgneal@488: bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>' bgneal@488: bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>' bgneal@488: bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>' bgneal@488: + '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>' bgneal@488: bgneal@488: + '<div style="clear:both"></div>'; bgneal@488: bgneal@488: // MJP: Would like a check here in case we missed an event. bgneal@488: bgneal@488: // MJP: Check fails, since it is not on the page yet. bgneal@488: /* $.each($.jPlayer.event, function(eventName,eventType) { bgneal@488: if($("#" + config.eventId[eventType])[0] === undefined) { bgneal@488: structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>'; bgneal@488: } bgneal@488: }); bgneal@488: */ bgneal@488: structure += bgneal@488: '</div>' bgneal@488: + '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>' bgneal@488: + '<div id="' + config.configId + '"></div>' bgneal@488: + '</div>'; bgneal@488: $(this).html(structure); bgneal@488: bgneal@488: config.windowJq = $("#" + config.windowId); bgneal@488: config.statusJq = $("#" + config.statusId); bgneal@488: config.configJq = $("#" + config.configId); bgneal@488: config.toggleJq = $("#" + config.toggleId); bgneal@488: config.eventResetJq = $("#" + config.eventResetId); bgneal@488: config.updateJq = $("#" + config.updateId); bgneal@488: bgneal@488: $.each($.jPlayer.event, function(eventName,eventType) { bgneal@488: config.eventJq[eventType] = $("#" + config.eventId[eventType]); bgneal@488: config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0); bgneal@488: bgneal@488: config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) { bgneal@488: config.eventOccurrence[e.type]++; bgneal@488: if(config.eventOccurrence[e.type] > 1) { bgneal@488: config.eventJq[e.type].css("background-color","#ff9"); bgneal@488: } else { bgneal@488: config.eventJq[e.type].css("background-color","#9f9"); bgneal@488: } bgneal@488: config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")"); bgneal@488: // The timer to handle the color bgneal@488: clearTimeout(config.eventTimeout[e.type]); bgneal@488: config.eventTimeout[e.type] = setTimeout(function() { bgneal@488: config.eventJq[e.type].css("background-color","#fff"); bgneal@488: }, 1000); bgneal@488: // The timer to handle the occurences. bgneal@488: setTimeout(function() { bgneal@488: config.eventOccurrence[e.type]--; bgneal@488: config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")"); bgneal@488: }, 1000); bgneal@488: if(config.visible) { // Update the status, if inspector open. bgneal@488: $this.jPlayerInspector("updateStatus"); bgneal@488: } bgneal@488: }); bgneal@488: }); bgneal@488: bgneal@488: config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) { bgneal@488: $this.jPlayerInspector("updateConfig"); bgneal@488: }); bgneal@488: bgneal@488: config.toggleJq.click(function() { bgneal@488: if(config.visible) { bgneal@488: $(this).text("Show"); bgneal@488: config.windowJq.hide(); bgneal@488: config.statusJq.empty(); bgneal@488: config.configJq.empty(); bgneal@488: } else { bgneal@488: $(this).text("Hide"); bgneal@488: config.windowJq.show(); bgneal@488: config.updateJq.click(); bgneal@488: } bgneal@488: config.visible = !config.visible; bgneal@488: $(this).blur(); bgneal@488: return false; bgneal@488: }); bgneal@488: bgneal@488: config.eventResetJq.click(function() { bgneal@488: $.each($.jPlayer.event, function(eventName,eventType) { bgneal@488: config.eventJq[eventType].css("background-color","#eee"); bgneal@488: }); bgneal@488: $(this).blur(); bgneal@488: return false; bgneal@488: }); bgneal@488: bgneal@488: config.updateJq.click(function() { bgneal@488: $this.jPlayerInspector("updateStatus"); bgneal@488: $this.jPlayerInspector("updateConfig"); bgneal@488: return false; bgneal@488: }); bgneal@488: bgneal@488: if(!config.visible) { bgneal@488: config.windowJq.hide(); bgneal@488: } else { bgneal@488: // config.updateJq.click(); bgneal@488: } bgneal@488: bgneal@488: $.jPlayerInspector.i++; bgneal@488: bgneal@488: return this; bgneal@488: }, bgneal@488: destroy: function() { bgneal@488: $(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector"); bgneal@488: $(this).empty(); bgneal@488: }, bgneal@488: updateConfig: function() { // This displays information about jPlayer's configuration in inspector bgneal@488: bgneal@488: var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />" bgneal@488: bgneal@488: for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) { bgneal@488: var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i]; bgneal@488: jPlayerInfo += " jPlayer's <strong>" + solution + "</strong> solution is"; bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) { bgneal@488: jPlayerInfo += " being <strong>used</strong> and will support:<strong>"; bgneal@488: for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) { bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) { bgneal@488: jPlayerInfo += " " + format; bgneal@488: } bgneal@488: } bgneal@488: jPlayerInfo += "</strong><br />"; bgneal@488: } else { bgneal@488: jPlayerInfo += " <strong>not required</strong><br />"; bgneal@488: } bgneal@488: } bgneal@488: jPlayerInfo += "</p>"; bgneal@488: bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) { bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) { bgneal@488: jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>"; bgneal@488: } else { bgneal@488: jPlayerInfo += "The <strong>HTML5 is active</strong>."; bgneal@488: } bgneal@488: } else { bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) { bgneal@488: jPlayerInfo += "The <strong>Flash is active</strong>."; bgneal@488: } else { bgneal@488: jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia()."; bgneal@488: } bgneal@488: } bgneal@488: jPlayerInfo += "</p>"; bgneal@488: bgneal@488: var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType; bgneal@488: jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />"; bgneal@488: if(formatType) { bgneal@488: jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>"; bgneal@488: } else { bgneal@488: jPlayerInfo += "</p>"; bgneal@488: } bgneal@488: bgneal@488: jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>"; bgneal@488: bgneal@488: jPlayerInfo += "<p><code>status.media = {<br />"; bgneal@488: for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) { bgneal@488: jPlayerInfo += " " + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings bgneal@488: } bgneal@488: jPlayerInfo += "};</code></p>" bgneal@488: bgneal@488: + "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />"; bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) { bgneal@488: jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />" bgneal@488: } bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) { bgneal@488: jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>"; bgneal@488: } bgneal@488: jPlayerInfo += "</p>"; bgneal@488: bgneal@488: jPlayerInfo += "<p>This instance is using the constructor options:<br />" bgneal@488: + "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />" bgneal@488: bgneal@488: + " swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />" bgneal@488: bgneal@488: + " solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />" bgneal@488: bgneal@488: + " supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />" bgneal@488: bgneal@488: + " preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />" bgneal@488: bgneal@488: + " volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />" bgneal@488: bgneal@488: + " muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />" bgneal@488: bgneal@488: + " backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />" bgneal@488: bgneal@488: + " cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />" bgneal@488: bgneal@488: + " cssSelector: {"; bgneal@488: bgneal@488: var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector"); bgneal@488: for(prop in cssSelector) { bgneal@488: bgneal@488: // jPlayerInfo += "<br /> " + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys. bgneal@488: jPlayerInfo += "<br /> " + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "'," bgneal@488: } bgneal@488: bgneal@488: jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me. bgneal@488: bgneal@488: jPlayerInfo += "<br /> },<br />" bgneal@488: bgneal@488: + " errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />" bgneal@488: bgneal@488: + " warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />" bgneal@488: bgneal@488: + "});</code></p>"; bgneal@488: $(this).data("jPlayerInspector").configJq.html(jPlayerInfo); bgneal@488: return this; bgneal@488: }, bgneal@488: updateStatus: function() { // This displays information about jPlayer's status in the inspector bgneal@488: $(this).data("jPlayerInspector").statusJq.html( bgneal@488: "<p>jPlayer is " + bgneal@488: ($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") + bgneal@488: " at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." + bgneal@488: " (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" + bgneal@488: ", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" + bgneal@488: ", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" + bgneal@488: ", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>" bgneal@488: ); bgneal@488: return this; bgneal@488: } bgneal@488: }; bgneal@488: $.fn.jPlayerInspector = function( method ) { bgneal@488: // Method calling logic bgneal@488: if ( methods[method] ) { bgneal@488: return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); bgneal@488: } else if ( typeof method === 'object' || ! method ) { bgneal@488: return methods.init.apply( this, arguments ); bgneal@488: } else { bgneal@488: $.error( 'Method ' + method + ' does not exist on jQuery.jPlayerInspector' ); bgneal@488: } bgneal@488: }; bgneal@488: })(jQuery);