| @@ -0,0 +1,511 @@ | |||
| /* | |||
| * 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.99 (05-JUN-2013) | |||
| * @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! | |||
| */ | |||
| /*global SWFObject alert Sys */ | |||
| /*jshint forin:false */ | |||
| ;(function($) { | |||
| "use strict"; | |||
| var mode = document.documentMode || 0; | |||
| var msie = /MSIE/.test(navigator.userAgent); | |||
| var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 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()) || ['']; | |||
| var fn; | |||
| if (o.type) | |||
| m[0] = o.type; | |||
| else | |||
| 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 = $('<div></div>').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: '#ffffff', // 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: {}, // 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: 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 a, n; | |||
| 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),10) || parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0),10); | |||
| var h = meta.height || parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0),10); | |||
| 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++) { | |||
| 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; | |||
| } | |||
| } | |||
| 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) { | |||
| var f, p; | |||
| if (!window.SWFObject && !window.swfobject) { | |||
| // roll our own | |||
| if (opts.flashvars) { | |||
| var a = []; | |||
| for (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 = $('<div' + id + cls + '>'); | |||
| // swfobject v2+ | |||
| if (window.swfobject) { | |||
| $(el).after($div).appendTo($div); | |||
| if (!el.id) el.id = 'movie_player_' + counter++; | |||
| // replace el with swfobject content | |||
| window.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 (p in opts.params) | |||
| if (p != 'bgColor') so.addParam(p, opts.params[p]); | |||
| for (f in opts.flashvars) | |||
| so.addVariable(f, opts.flashvars[f]); | |||
| so.write($div[0]); | |||
| } | |||
| if (opts.caption) $('<div>').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 = $('<div' + id1 + cls + '>'); | |||
| $(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) $('<div>').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]; | |||
| var a, key, v; | |||
| if (player == 'iframe') { | |||
| o = $('<iframe' + ' width="' + opts.width + '" height="' + opts.height + '" >'); | |||
| o.attr('src', opts.src); | |||
| o.css('backgroundColor', o.bgColor); | |||
| } | |||
| else if (player == 'img') { | |||
| o = $('<img>'); | |||
| o.attr('src', opts.src); | |||
| if (opts.width) | |||
| o.attr('width', opts.width); | |||
| if (opts.height) | |||
| o.attr('height', opts.height); | |||
| o.css('backgroundColor', o.bgColor); | |||
| } | |||
| else if (lameIE) { | |||
| a = ['<object width="' + opts.width + '" height="' + opts.height + '" ']; | |||
| for (key in opts.attrs) | |||
| a.push(key + '="'+opts.attrs[key]+'" '); | |||
| for (key in o.ieAttrs || {}) { | |||
| v = o.ieAttrs[key]; | |||
| if (key == 'codebase' && window.location.protocol == 'https:') | |||
| v = v.replace('http','https'); | |||
| a.push(key + '="'+v+'" '); | |||
| } | |||
| a.push('></ob'+'ject'+'>'); | |||
| var p = ['<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">']; | |||
| for (key in opts.params) | |||
| p.push('<param name="'+ key +'" value="' + opts.params[key] + '">'); | |||
| 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 | |||
| a = ['<object type="' + o.mimetype +'" width="' + opts.width + '" height="' + opts.height +'"']; | |||
| if (opts.src) a.push(' data="' + opts.src + '" '); | |||
| if (msie) { | |||
| for (key in o.ieAttrs || {}) { | |||
| v = o.ieAttrs[key]; | |||
| if (key == 'codebase' && window.location.protocol == 'https:') | |||
| v = v.replace('http','https'); | |||
| a.push(key + '="'+v+'" '); | |||
| } | |||
| } | |||
| a.push('>'); | |||
| a.push('<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">'); | |||
| for (key in opts.params) { | |||
| if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode | |||
| continue; | |||
| a.push('<param name="'+ key +'" value="' + opts.params[key] + '">'); | |||
| } | |||
| // Alternate HTML | |||
| 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>'); | |||
| a.push('</ob'+'ject'+'>'); | |||
| } | |||
| else { | |||
| a = ['<embed width="' + opts.width + '" height="' + opts.height + '" style="display:block"']; | |||
| if (opts.src) a.push(' src="' + opts.src + '" '); | |||
| for (key in opts.attrs) | |||
| a.push(key + '="'+opts.attrs[key]+'" '); | |||
| for (key in o.eAttrs || {}) | |||
| a.push(key + '="'+o.eAttrs[key]+'" '); | |||
| for (key in opts.params) { | |||
| if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode | |||
| continue; | |||
| a.push(key + '="'+opts.params[key]+'" '); | |||
| } | |||
| a.push('></em'+'bed'+'>'); | |||
| } | |||
| // convert element to div | |||
| var id = el.id ? (' id="'+el.id+'"') : ''; | |||
| var cls = opts.cls ? (' class="' + opts.cls + '"') : ''; | |||
| var $div = $('<div' + id + cls + '>'); | |||
| $el.after($div).remove(); | |||
| if (lameIE || player == 'iframe' || player == 'img') | |||
| $div.append(o); | |||
| else | |||
| $div.html(a.join('')); | |||
| if (opts.caption) | |||
| $('<div>').appendTo($div).html(opts.caption); | |||
| return $div; | |||
| } | |||
| })(jQuery); | |||