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: '' + (config.visible ? "Hide" : "Show") + ' jPlayer Inspector
'
bgneal@488: + ''
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
jPlayer events that have occurred over the past 1 second:'
bgneal@488: + '
(Backgrounds: Never occurred Occurred before Occurred Multiple occurrences reset)
';
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 += '
' + eventName + '
';
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: '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488:
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488:
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488:
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488:
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488: + '
'
bgneal@488:
bgneal@488: + '
';
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 += '
' + eventName + '
';
bgneal@488: }
bgneal@488: });
bgneal@488: */
bgneal@488: structure +=
bgneal@488: '
'
bgneal@488: + '
Update jPlayer Inspector
'
bgneal@488: + '
'
bgneal@488: + '
This jPlayer instance is running in your browser where:
"
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 " + solution + " solution is";
bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
bgneal@488: jPlayerInfo += " being used and will support:";
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 += "
";
bgneal@488: } else {
bgneal@488: jPlayerInfo += " not required
";
bgneal@488: }
bgneal@488: }
bgneal@488: jPlayerInfo += "
";
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 += "Problem with jPlayer since both HTML5 and Flash are active.";
bgneal@488: } else {
bgneal@488: jPlayerInfo += "The HTML5 is active.";
bgneal@488: }
bgneal@488: } else {
bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
bgneal@488: jPlayerInfo += "The Flash is active.";
bgneal@488: } else {
bgneal@488: jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
bgneal@488: }
bgneal@488: }
bgneal@488: jPlayerInfo += "";
bgneal@488:
bgneal@488: var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
bgneal@488: jPlayerInfo += "status.formatType = '" + formatType + "'
";
bgneal@488: if(formatType) {
bgneal@488: jPlayerInfo += "Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')";
bgneal@488: } else {
bgneal@488: jPlayerInfo += "
";
bgneal@488: }
bgneal@488:
bgneal@488: jPlayerInfo += "status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'
";
bgneal@488:
bgneal@488: jPlayerInfo += "status.media = {
";
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] + "
"; // Some are strings
bgneal@488: }
bgneal@488: jPlayerInfo += "};
"
bgneal@488:
bgneal@488: + "Raw browser test for HTML5 support. Should equal a function if HTML5 is available.
";
bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
bgneal@488: jPlayerInfo += "htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"
"
bgneal@488: }
bgneal@488: if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
bgneal@488: jPlayerInfo += "htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"";
bgneal@488: }
bgneal@488: jPlayerInfo += "
";
bgneal@488:
bgneal@488: jPlayerInfo += "This instance is using the constructor options:
"
bgneal@488: + "$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({
"
bgneal@488:
bgneal@488: + " swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',
"
bgneal@488:
bgneal@488: + " solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',
"
bgneal@488:
bgneal@488: + " supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',
"
bgneal@488:
bgneal@488: + " preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',
"
bgneal@488:
bgneal@488: + " volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",
"
bgneal@488:
bgneal@488: + " muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",
"
bgneal@488:
bgneal@488: + " backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',
"
bgneal@488:
bgneal@488: + " cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',
"
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 += "
" + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
bgneal@488: jPlayerInfo += "
" + 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 += "
},
"
bgneal@488:
bgneal@488: + " errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",
"
bgneal@488:
bgneal@488: + " warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "
"
bgneal@488:
bgneal@488: + "});
";
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: "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) + "%)
"
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);