jquery.media.js 16 KB

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