Le repo des sources pour le site web des JM2L
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

512 lines
16 KiB

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