ultimix

- Main Page
- Data Structures
- Files
- Examples

- File List
- Globals

jquery.media.js
Go to the documentation of this file.
1 /*
2 * jQuery Media Plugin for converting elements into rich media content.
3 *
4 * Examples and documentation at: http://malsup.com/jquery/media/
5 * Copyright (c) 2007-2010 M. Alsup
6 * Dual licensed under the MIT and GPL licenses:
7 * http://www.opensource.org/licenses/mit-license.php
8 * http://www.gnu.org/licenses/gpl.html
9 *
10 * @author: M. Alsup
11 * @version: 0.97 (20-MAY-2011)
12 * @requires jQuery v1.1.2 or later
13 * $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $
14 *
15 * Supported Media Players:
16 * - Flash
17 * - Quicktime
18 * - Real Player
19 * - Silverlight
20 * - Windows Media Player
21 * - iframe
22 *
23 * Supported Media Formats:
24 * Any types supported by the above players, such as:
25 * Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
26 * Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
27 * Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml
28 *
29 * Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac!
30 * Thanks to Dan Rossi for numerous bug reports and code bits!
31 * Thanks to Skye Giordano for several great suggestions!
32 * Thanks to Richard Connamacher for excellent improvements to the non-IE behavior!
33 */
34 ;(function($) {
35
36 var lameIE = $.browser.msie && $.browser.version < 9;
37
45 $.fn.media = function(options, f1, f2) {
46 if (options == 'undo') {
47 return this.each(function() {
48 var $this = $(this);
49 var html = $this.data('media.origHTML');
50 if (html)
51 $this.replaceWith(html);
52 });
53 }
54
55 return this.each(function() {
56 if (typeof options == 'function') {
57 f2 = f1;
58 f1 = options;
59 options = {};
60 }
61 var o = getSettings(this, options);
62 // pre-conversion callback, passes original element and fully populated options
63 if (typeof f1 == 'function') f1(this, o);
64
65 var r = getTypesRegExp();
66 var m = r.exec(o.src.toLowerCase()) || [''];
67
68 o.type ? m[0] = o.type : m.shift();
69 for (var i=0; i < m.length; i++) {
70 fn = m[i].toLowerCase();
71 if (isDigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbers
72 if (!$.fn.media[fn])
73 continue; // unrecognized media type
74 // normalize autoplay settings
75 var player = $.fn.media[fn+'_player'];
76 if (!o.params) o.params = {};
77 if (player) {
78 var num = player.autoplayAttr == 'autostart';
79 o.params[player.autoplayAttr || 'autoplay'] = num ? (o.autoplay ? 1 : 0) : o.autoplay ? true : false;
80 }
81 var $div = $.fn.media[fn](this, o);
82
83 $div.css('backgroundColor', o.bgColor).width(o.width);
84
85 if (o.canUndo) {
86 var $temp = $('<div></div>').append(this);
87 $div.data('media.origHTML', $temp.html()); // store original markup
88 }
89
90 // post-conversion callback, passes original element, new div element and fully populated options
91 if (typeof f2 == 'function') f2(this, $div[0], o, player.name);
92 break;
93 }
94 });
95 };
96
103 $.fn.media.mapFormat = function(format, player) {
104 if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalid
105 format = format.toLowerCase();
106 if (isDigit(format[0])) format = 'fn' + format;
107 $.fn.media[format] = $.fn.media[player];
108 $.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
109 };
110
111 // global defautls; override as needed
112 $.fn.media.defaults = {
113 standards: true, // use object tags only (no embeds for non-IE browsers)
114 canUndo: true, // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
115 width: 400,
116 height: 400,
117 autoplay: 0, // normalized cross-player setting
118 bgColor: '#ffffff', // background color
119 params: { wmode: 'transparent'}, // added to object element as param elements; added to embed element as attrs
120 attrs: {}, // added to object and embed elements as attrs
121 flvKeyName: 'file', // key used for object src param (thanks to Andrea Ercolino)
122 flashvars: {}, // added to flash content as flashvars param/attr
123 flashVersion: '7', // required flash version
124 expressInstaller: null, // src for express installer
125
126 // default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
127 flvPlayer: 'mediaplayer.swf',
128 mp3Player: 'mediaplayer.swf',
129
130 // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
131 silverlight: {
132 inplaceInstallPrompt: 'true', // display in-place install prompt?
133 isWindowless: 'true', // windowless mode (false for wrapping markup)
134 framerate: '24', // maximum framerate
135 version: '0.9', // Silverlight version
136 onError: null, // onError callback
137 onLoad: null, // onLoad callback
138 initParams: null, // object init params
139 userContext: null // callback arg passed to the load callback
140 }
141 };
142
143 // Media Players; think twice before overriding
144 $.fn.media.defaults.players = {
145 flash: {
146 name: 'flash',
147 title: 'Flash',
148 types: 'flv,mp3,swf',
149 mimetype: 'application/x-shockwave-flash',
150 pluginspage: 'http://www.adobe.com/go/getflashplayer',
151 ieAttrs: {
152 classid: 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
153 type: 'application/x-oleobject',
154 codebase: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashVersion
155 }
156 },
157 quicktime: {
158 name: 'quicktime',
159 title: 'QuickTime',
160 mimetype: 'video/quicktime',
161 pluginspage: 'http://www.apple.com/quicktime/download/',
162 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',
163 ieAttrs: {
164 classid: 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
165 codebase: 'http://www.apple.com/qtactivex/qtplugin.cab'
166 }
167 },
168 realplayer: {
169 name: 'real',
170 title: 'RealPlayer',
171 types: 'ra,ram,rm,rpm,rv,smi,smil',
172 mimetype: 'audio/x-pn-realaudio-plugin',
173 pluginspage: 'http://www.real.com/player/',
174 autoplayAttr: 'autostart',
175 ieAttrs: {
176 classid: 'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
177 }
178 },
179 winmedia: {
180 name: 'winmedia',
181 title: 'Windows Media',
182 types: 'asx,asf,avi,wma,wmv',
183 mimetype: $.browser.mozilla && isFirefoxWMPPluginInstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2',
184 pluginspage: 'http://www.microsoft.com/Windows/MediaPlayer/',
185 autoplayAttr: 'autostart',
186 oUrl: 'url',
187 ieAttrs: {
188 classid: 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',
189 type: 'application/x-oleobject'
190 }
191 },
192 // special cases
193 img: {
194 name: 'img',
195 title: 'Image',
196 types: 'gif,png,jpg'
197 },
198 iframe: {
199 name: 'iframe',
200 types: 'html,pdf'
201 },
202 silverlight: {
203 name: 'silverlight',
204 types: 'xaml'
205 }
206 };
207
208 //
209 // everything below here is private
210 //
211
212
213 // detection script for FF WMP plugin (http://www.therossman.org/experiments/wmp_play.html)
214 // (hat tip to Mark Ross for this script)
215 function isFirefoxWMPPluginInstalled() {
216 var plugs = navigator.plugins;
217 for (var i = 0; i < plugs.length; i++) {
218 var plugin = plugs[i];
219 if (plugin['filename'] == 'np-mswmp.dll')
220 return true;
221 }
222 return false;
223 }
224
225 var counter = 1;
226
227 for (var player in $.fn.media.defaults.players) {
228 var types = $.fn.media.defaults.players[player].types;
229 $.each(types.split(','), function(i,o) {
230 if (isDigit(o[0])) o = 'fn' + o;
231 $.fn.media[o] = $.fn.media[player] = getGenerator(player);
232 $.fn.media[o+'_player'] = $.fn.media.defaults.players[player];
233 });
234 };
235
236 function getTypesRegExp() {
237 var types = '';
238 for (var player in $.fn.media.defaults.players) {
239 if (types.length) types += ',';
240 types += $.fn.media.defaults.players[player].types;
241 };
242 return new RegExp('\\.(' + types.replace(/,/ig,'|') + ')\\b');
243 };
244
245 function getGenerator(player) {
246 return function(el, options) {
247 return generate(el, options, player);
248 };
249 };
250
251 function isDigit(c) {
252 return '0123456789'.indexOf(c) > -1;
253 };
254
255 // flatten all possible options: global defaults, meta, option obj
256 function getSettings(el, options) {
257 options = options || {};
258 var $el = $(el);
259 var cls = el.className || '';
260 // support metadata plugin (v1.0 and v2.0)
261 var meta = $.metadata ? $el.metadata() : $.meta ? $el.data() : {};
262 meta = meta || {};
263 var w = meta.width || parseInt(((cls.match(/\bw:(\d+)/)||[])[1]||0)) || parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0));
264 var h = meta.height || parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0)) || parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0))
265
266 if (w) meta.width = w;
267 if (h) meta.height = h;
268 if (cls) meta.cls = cls;
269
270 // crank html5 style data attributes
271 var dataName = 'data-';
272 for (var i=0; i < el.attributes.length; i++) {
273 var a = el.attributes[i], n = $.trim(a.name);
274 var index = n.indexOf(dataName);
275 if (index === 0) {
276 n = n.substring(dataName.length);
277 meta[n] = a.value;
278 }
279 }
280
281 var a = $.fn.media.defaults;
282 var b = options;
283 var c = meta;
284
285 var p = { params: { bgColor: options.bgColor || $.fn.media.defaults.bgColor } };
286 var opts = $.extend({}, a, b, c);
287 $.each(['attrs','params','flashvars','silverlight'], function(i,o) {
288 opts[o] = $.extend({}, p[o] || {}, a[o] || {}, b[o] || {}, c[o] || {});
289 });
290
291 if (typeof opts.caption == 'undefined') opts.caption = $el.text();
292
293 // make sure we have a source!
294 opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown';
295 return opts;
296 };
297
298 //
299 // Flash Player
300 //
301
302 // generate flash using SWFObject library if possible
303 $.fn.media.swf = function(el, opts) {
304 if (!window.SWFObject && !window.swfobject) {
305 // roll our own
306 if (opts.flashvars) {
307 var a = [];
308 for (var f in opts.flashvars)
309 a.push(f + '=' + opts.flashvars[f]);
310 if (!opts.params) opts.params = {};
311 opts.params.flashvars = a.join('&');
312 }
313 return generate(el, opts, 'flash');
314 }
315
316 var id = el.id ? (' id="'+el.id+'"') : '';
317 var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
318 var $div = $('<div' + id + cls + '>');
319
320 // swfobject v2+
321 if (window.swfobject) {
322 $(el).after($div).appendTo($div);
323 if (!el.id) el.id = 'movie_player_' + counter++;
324
325 // replace el with swfobject content
326 swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,
327 opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);
328 }
329 // swfobject < v2
330 else {
331 $(el).after($div).remove();
332 var so = new SWFObject(opts.src, 'movie_player_' + counter++, opts.width, opts.height, opts.flashVersion, opts.bgColor);
333 if (opts.expressInstaller) so.useExpressInstall(opts.expressInstaller);
334
335 for (var p in opts.params)
336 if (p != 'bgColor') so.addParam(p, opts.params[p]);
337 for (var f in opts.flashvars)
338 so.addVariable(f, opts.flashvars[f]);
339 so.write($div[0]);
340 }
341
342 if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
343 return $div;
344 };
345
346 // map flv and mp3 files to the swf player by default
347 $.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
348 var src = opts.src;
349 var player = /\.mp3\b/i.test(src) ? opts.mp3Player : opts.flvPlayer;
350 var key = opts.flvKeyName;
351 src = encodeURIComponent(src);
352 opts.src = player;
353 opts.src = opts.src + '?'+key+'=' + (src);
354 var srcObj = {};
355 srcObj[key] = src;
356 opts.flashvars = $.extend({}, srcObj, opts.flashvars );
357 return $.fn.media.swf(el, opts);
358 };
359
360 //
361 // Silverlight
362 //
363 $.fn.media.xaml = function(el, opts) {
364 if (!window.Sys || !window.Sys.Silverlight) {
365 if ($.fn.media.xaml.warning) return;
366 $.fn.media.xaml.warning = 1;
367 alert('You must include the Silverlight.js script.');
368 return;
369 }
370
371 var props = {
372 width: opts.width,
373 height: opts.height,
374 background: opts.bgColor,
375 inplaceInstallPrompt: opts.silverlight.inplaceInstallPrompt,
376 isWindowless: opts.silverlight.isWindowless,
377 framerate: opts.silverlight.framerate,
378 version: opts.silverlight.version
379 };
380 var events = {
381 onError: opts.silverlight.onError,
382 onLoad: opts.silverlight.onLoad
383 };
384
385 var id1 = el.id ? (' id="'+el.id+'"') : '';
386 var id2 = opts.id || 'AG' + counter++;
387 // convert element to div
388 var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
389 var $div = $('<div' + id1 + cls + '>');
390 $(el).after($div).remove();
391
392 Sys.Silverlight.createObjectEx({
393 source: opts.src,
394 initParams: opts.silverlight.initParams,
395 userContext: opts.silverlight.userContext,
396 id: id2,
397 parentElement: $div[0],
398 properties: props,
399 events: events
400 });
401
402 if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
403 return $div;
404 };
405
406 //
407 // generate object/embed markup
408 //
409 function generate(el, opts, player) {
410 var $el = $(el);
411 var o = $.fn.media.defaults.players[player];
412
413 if (player == 'iframe') {
414 o = $('<iframe' + ' width="' + opts.width + '" height="' + opts.height + '" >');
415 o.attr('src', opts.src);
416 o.css('backgroundColor', o.bgColor);
417 }
418 else if (player == 'img') {
419 o = $('<img>');
420 o.attr('src', opts.src);
421 opts.width && o.attr('width', opts.width);
422 opts.height && o.attr('height', opts.height);
423 o.css('backgroundColor', o.bgColor);
424 }
425 else if (lameIE) {
426 var a = ['<object width="' + opts.width + '" height="' + opts.height + '" '];
427 for (var key in opts.attrs)
428 a.push(key + '="'+opts.attrs[key]+'" ');
429 for (var key in o.ieAttrs || {}) {
430 var v = o.ieAttrs[key];
431 if (key == 'codebase' && window.location.protocol == 'https:')
432 v = v.replace('http','https');
433 a.push(key + '="'+v+'" ');
434 }
435 a.push('></ob'+'ject'+'>');
436 var p = ['<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">'];
437 for (var key in opts.params)
438 p.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
439 var o = document.createElement(a.join(''));
440 for (var i=0; i < p.length; i++)
441 o.appendChild(document.createElement(p[i]));
442 }
443 else if (opts.standards) {
444 // Rewritten to be standards compliant by Richard Connamacher
445 var a = ['<object type="' + o.mimetype +'" width="' + opts.width + '" height="' + opts.height +'"'];
446 if (opts.src) a.push(' data="' + opts.src + '" ');
447 if ($.browser.msie) {
448 for (var key in o.ieAttrs || {}) {
449 var v = o.ieAttrs[key];
450 if (key == 'codebase' && window.location.protocol == 'https:')
451 v = v.replace('http','https');
452 a.push(key + '="'+v+'" ');
453 }
454 }
455 a.push('>');
456 a.push('<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">');
457 for (var key in opts.params) {
458 if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
459 continue;
460 a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
461 }
462 // Alternate HTML
463 a.push('<div><p><strong>'+o.title+' Required</strong></p><p>'+o.title+' is required to view this media. <a href="'+o.pluginspage+'">Download Here</a>.</p></div>');
464 a.push('</ob'+'ject'+'>');
465 }
466 else {
467 var a = ['<embed width="' + opts.width + '" height="' + opts.height + '" style="display:block"'];
468 if (opts.src) a.push(' src="' + opts.src + '" ');
469 for (var key in opts.attrs)
470 a.push(key + '="'+opts.attrs[key]+'" ');
471 for (var key in o.eAttrs || {})
472 a.push(key + '="'+o.eAttrs[key]+'" ');
473 for (var key in opts.params) {
474 if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
475 continue;
476 a.push(key + '="'+opts.params[key]+'" ');
477 }
478 a.push('></em'+'bed'+'>');
479 }
480 // convert element to div
481 var id = el.id ? (' id="'+el.id+'"') : '';
482 var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
483 var $div = $('<div' + id + cls + '>');
484 $el.after($div).remove();
485 (lameIE || player == 'iframe' || player == 'img') ? $div.append(o) : $div.html(a.join(''));
486 if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
487 return $div;
488 };
489
490 })(jQuery);