美文网首页
JQuery.media.js

JQuery.media.js

作者: VinSmokeW | 来源:发表于2019-11-27 15:52 被阅读0次

    一个专用于文件预览的库

    /*
     * 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);
    

    相关文章

      网友评论

          本文标题:JQuery.media.js

          本文链接:https://www.haomeiwen.com/subject/kewpwctx.html