/* * jquery media plugin for converting elements into rich media content. * * examples and documentation at: http://malsup.com/jquery/media/ * copyright (c) 2007-2010 m. alsup * dual licensed under the mit and gpl licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * @author: m. alsup * @version: 0.97 (20-may-2011) * @requires jquery v1.1.2 or later * $id: jquery.media.js 2460 2007-07-23 02:53:15z malsup $ * * supported media players: * - flash * - quicktime * - real player * - silverlight * - windows media player * - iframe * * supported media formats: * any types supported by the above players, such as: * video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp * audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma * other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml * * thanks to mark hicken and brent pedersen for helping me debug this on the mac! * thanks to dan rossi for numerous bug reports and code bits! * thanks to skye giordano for several great suggestions! * thanks to richard connamacher for excellent improvements to the non-ie behavior! */ ;(function($) { var lameie = $.browser.msie && $.browser.version < 9; /** * chainable method for converting elements into rich media. * * @param options * @param callback fn invoked for each matched element before conversion * @param callback fn invoked for each matched element after conversion */ $.fn.media = function(options, f1, f2) { if (options == 'undo') { return this.each(function() { var $this = $(this); var html = $this.data('media.orightml'); if (html) $this.replacewith(html); }); } return this.each(function() { if (typeof options == 'function') { f2 = f1; f1 = options; options = {}; } var o = getsettings(this, options); // pre-conversion callback, passes original element and fully populated options if (typeof f1 == 'function') f1(this, o); var r = gettypesregexp(); var m = r.exec(o.src.tolowercase()) || ['']; o.type ? m[0] = o.type : m.shift(); for (var i=0; i < m.length; i++) { fn = m[i].tolowercase(); if (isdigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbers if (!$.fn.media[fn]) continue; // unrecognized media type // normalize autoplay settings var player = $.fn.media[fn+'_player']; if (!o.params) o.params = {}; if (player) { var num = player.autoplayattr == 'autostart'; o.params[player.autoplayattr || 'autoplay'] = num ? (o.autoplay ? 1 : 0) : o.autoplay ? true : false; } var $div = $.fn.media[fn](this, o); $div.css('backgroundcolor', o.bgcolor).width(o.width); if (o.canundo) { var $temp = $('
').append(this); $div.data('media.orightml', $temp.html()); // store original markup } // post-conversion callback, passes original element, new div element and fully populated options if (typeof f2 == 'function') f2(this, $div[0], o, player.name); break; } }); }; /** * non-chainable method for adding or changing file format / player mapping * @name mapformat * @param string format file format extension (ie: mov, wav, mp3) * @param string player player name to use for the format (one of: flash, quicktime, realplayer, winmedia, silverlight or iframe */ $.fn.media.mapformat = function(format, player) { if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalid format = format.tolowercase(); if (isdigit(format[0])) format = 'fn' + format; $.fn.media[format] = $.fn.media[player]; $.fn.media[format+'_player'] = $.fn.media.defaults.players[player]; }; // global defautls; override as needed $.fn.media.defaults = { standards: true, // use object tags only (no embeds for non-ie browsers) canundo: true, // tells plugin to store the original markup so it can be reverted via: $(sel).mediaundo() width: 400, height: 400, autoplay: 0, // normalized cross-player setting bgcolor: 'black', // background color params: { wmode: 'transparent'}, // added to object element as param elements; added to embed element as attrs attrs: {}, // added to object and embed elements as attrs flvkeyname: 'file', // key used for object src param (thanks to andrea ercolino) flashvars: {autostart:true}, // added to flash content as flashvars param/attr flashversion: '7', // required flash version expressinstaller: null, // src for express installer // default flash video and mp3 player (@see: http://jeroenwijering.com/?item=flash_media_player) flvplayer: 'mediaplayer.swf', mp3player: 'mediaplayer.swf', // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx silverlight: { inplaceinstallprompt: 'true', // display in-place install prompt? iswindowless: 'true', // windowless mode (false for wrapping markup) framerate: '24', // maximum framerate version: '0.9', // silverlight version onerror: null, // onerror callback onload: null, // onload callback initparams: null, // object init params usercontext: null // callback arg passed to the load callback } }; // media players; think twice before overriding $.fn.media.defaults.players = { flash: { name: 'flash', title: 'flash', types: 'flv,mp3,swf', mimetype: 'application/x-shockwave-flash', pluginspage: 'http://www.adobe.com/go/getflashplayer', ieattrs: { classid: 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000', type: 'application/x-oleobject', codebase: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashversion } }, quicktime: { name: 'quicktime', title: 'quicktime', mimetype: 'video/quicktime', pluginspage: 'http://www.apple.com/quicktime/download/', types: 'aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp', ieattrs: { classid: 'clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b', codebase: 'http://www.apple.com/qtactivex/qtplugin.cab' } }, realplayer: { name: 'real', title: 'realplayer', types: 'ra,ram,rm,rpm,rv,smi,smil', mimetype: 'audio/x-pn-realaudio-plugin', pluginspage: 'http://www.real.com/player/', autoplayattr: 'autostart', ieattrs: { classid: 'clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa' } }, winmedia: { name: 'winmedia', title: 'windows media', types: 'asx,asf,avi,wma,wmv', mimetype: $.browser.mozilla && isfirefoxwmpplugininstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2', pluginspage: 'http://www.microsoft.com/windows/mediaplayer/', autoplayattr: 'autostart', ourl: 'url', ieattrs: { classid: 'clsid:6bf52a52-394a-11d3-b153-00c04f79faa6', type: 'application/x-oleobject' } }, // special cases img: { name: 'img', title: 'image', types: 'gif,png,jpg' }, iframe: { name: 'iframe', types: 'html,pdf' }, silverlight: { name: 'silverlight', types: 'xaml' } }; // // everything below here is private // // detection script for ff wmp plugin (http://www.therossman.org/experiments/wmp_play.html) // (hat tip to mark ross for this script) function isfirefoxwmpplugininstalled() { var plugs = navigator.plugins; for (var i = 0; i < plugs.length; i++) { var plugin = plugs[i]; if (plugin['filename'] == 'np-mswmp.dll') return true; } return false; } var counter = 1; for (var player in $.fn.media.defaults.players) { var types = $.fn.media.defaults.players[player].types; $.each(types.split(','), function(i,o) { if (isdigit(o[0])) o = 'fn' + o; $.fn.media[o] = $.fn.media[player] = getgenerator(player); $.fn.media[o+'_player'] = $.fn.media.defaults.players[player]; }); }; function gettypesregexp() { var types = ''; for (var player in $.fn.media.defaults.players) { if (types.length) types += ','; types += $.fn.media.defaults.players[player].types; }; return new regexp('\\.(' + types.replace(/,/ig,'|') + ')\\b'); }; function getgenerator(player) { return function(el, options) { return generate(el, options, player); }; }; function isdigit(c) { return '0123456789'.indexof(c) > -1; }; // flatten all possible options: global defaults, meta, option obj function getsettings(el, options) { options = options || {}; var $el = $(el); var cls = el.classname || ''; // support metadata plugin (v1.0 and v2.0) var meta = $.metadata ? $el.metadata() : $.meta ? $el.data() : {}; meta = meta || {}; var w = meta.width || parseint(((cls.match(/\bw:(\d+)/)||[])[1]||0)) || parseint(((cls.match(/\bwidth:(\d+)/)||[])[1]||0)); var h = meta.height || parseint(((cls.match(/\bh:(\d+)/)||[])[1]||0)) || parseint(((cls.match(/\bheight:(\d+)/)||[])[1]||0)) if (w) meta.width = w; if (h) meta.height = h; if (cls) meta.cls = cls; // crank html5 style data attributes var dataname = 'data-'; for (var i=0; i < el.attributes.length; i++) { var a = el.attributes[i], n = $.trim(a.name); var index = n.indexof(dataname); if (index === 0) { n = n.substring(dataname.length); meta[n] = a.value; } } var a = $.fn.media.defaults; var b = options; var c = meta; var p = { params: { bgcolor: options.bgcolor || $.fn.media.defaults.bgcolor } }; var opts = $.extend({}, a, b, c); $.each(['attrs','params','flashvars','silverlight'], function(i,o) { opts[o] = $.extend({}, p[o] || {}, a[o] || {}, b[o] || {}, c[o] || {}); }); if (typeof opts.caption == 'undefined') opts.caption = $el.text(); // make sure we have a source! opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown'; return opts; }; // // flash player // // generate flash using swfobject library if possible $.fn.media.swf = function(el, opts) { if (!window.swfobject && !window.swfobject) { // roll our own if (opts.flashvars) { var a = []; for (var f in opts.flashvars) a.push(f + '=' + opts.flashvars[f]); if (!opts.params) opts.params = {}; opts.params.flashvars = a.join('&'); } return generate(el, opts, 'flash'); } var id = el.id ? (' id="'+el.id+'"') : ''; var cls = opts.cls ? (' class="' + opts.cls + '"') : ''; var $div = $(''); // swfobject v2+ if (window.swfobject) { $(el).after($div).appendto($div); if (!el.id) el.id = 'movie_player_' + counter++; // replace el with swfobject content swfobject.embedswf(opts.src, el.id, opts.width, opts.height, opts.flashversion, opts.expressinstaller, opts.flashvars, opts.params, opts.attrs); } // swfobject < v2 else { $(el).after($div).remove(); var so = new swfobject(opts.src, 'movie_player_' + counter++, opts.width, opts.height, opts.flashversion, opts.bgcolor); if (opts.expressinstaller) so.useexpressinstall(opts.expressinstaller); for (var p in opts.params) if (p != 'bgcolor') so.addparam(p, opts.params[p]); for (var f in opts.flashvars) so.addvariable(f, opts.flashvars[f]); so.write($div[0]); } if (opts.caption) $('
').appendto($div).html(opts.caption); return $div; }; // map flv and mp3 files to the swf player by default $.fn.media.flv = $.fn.media.mp3 = function(el, opts) { var src = opts.src; var player = /\.mp3\b/i.test(src) ? opts.mp3player : opts.flvplayer; var key = opts.flvkeyname; src = encodeuricomponent(src); opts.src = player; opts.src = opts.src + '?'+key+'=' + (src); var srcobj = {}; srcobj[key] = src; opts.flashvars = $.extend({}, srcobj, opts.flashvars ); return $.fn.media.swf(el, opts); }; // // silverlight // $.fn.media.xaml = function(el, opts) { if (!window.sys || !window.sys.silverlight) { if ($.fn.media.xaml.warning) return; $.fn.media.xaml.warning = 1; alert('you must include the silverlight.js script.'); return; } var props = { width: opts.width, height: opts.height, background: opts.bgcolor, inplaceinstallprompt: opts.silverlight.inplaceinstallprompt, iswindowless: opts.silverlight.iswindowless, framerate: opts.silverlight.framerate, version: opts.silverlight.version }; var events = { onerror: opts.silverlight.onerror, onload: opts.silverlight.onload }; var id1 = el.id ? (' id="'+el.id+'"') : ''; var id2 = opts.id || 'ag' + counter++; // convert element to div var cls = opts.cls ? (' class="' + opts.cls + '"') : ''; var $div = $(''); $(el).after($div).remove(); sys.silverlight.createobjectex({ source: opts.src, initparams: opts.silverlight.initparams, usercontext: opts.silverlight.usercontext, id: id2, parentelement: $div[0], properties: props, events: events }); if (opts.caption) $('
').appendto($div).html(opts.caption); return $div; }; // // generate object/embed markup // function generate(el, opts, player) { var $el = $(el); var o = $.fn.media.defaults.players[player]; if (player == 'iframe') { o = $(''); o.attr('src', opts.src); o.css('backgroundcolor', o.bgcolor); } else if (player == 'img') { o = $(''); o.attr('src', opts.src); opts.width && o.attr('width', opts.width); opts.height && o.attr('height', opts.height); o.css('backgroundcolor', o.bgcolor); } else if (lameie) { var a = [''); var p = ['']; for (var key in opts.params) p.push(''); p.push(''); p.push(''); var o = document.createelement(a.join('')); for (var i=0; i < p.length; i++) o.appendchild(document.createelement(p[i])); } else if (opts.standards) { // rewritten to be standards compliant by richard connamacher var a = [''); a.push(''); for (var key in opts.params) { if (key == 'wmode' && player != 'flash') // ff3/quicktime borks on wmode continue; a.push(''); } a.push(''); a.push(''); // alternate html a.push('

'+o.title+' required

'+o.title+' is required to view this media. download here.

'); a.push(''); } else { var a = [''); } // convert element to div var id = el.id ? (' id="'+el.id+'"') : ''; var cls = opts.cls ? (' class="' + opts.cls + '"') : ''; var $div = $(''); $el.after($div).remove(); (lameie || player == 'iframe' || player == 'img') ? $div.append(o) : $div.html(a.join('')); if (opts.caption) $('
').appendto($div).html(opts.caption); return $div; }; })(jquery);