JQuery multimedia Plugin: jQuery Media Plugin, jqueryplugin

JQuery multimedia Plugin: jQuery Media Plugin, jqueryplugin

JQuery Media Plugin is a jQuery-based webpage Media Player Plug-in that supports most network multimedia players and multimedia formats, such as Flash, Windows Media Player, Real Player, Quicktime, MP3, silverlight, PDF. Based on the current script configuration, it automatically replaces the tag with a div and generates the object, embed, and even iframe code. As for whether to generate an object or embed, jQuery Media will automatically determine based on the current platform, therefore, the compatibility is excellent. The following code is the result generated by jQuery Media:

Copy codeThe Code is as follows:
<Div class = "media">
<Object width = "450" height = "250" attr1 = "attrValue1" attr2 = "attrValue2"
Codebase = "http://www.apple.com/qtactivex/qtplugin.cab"
Classid = "clsid: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<Param name = "src" value = "myBetterMovie. mov">
<Param name = "autoplay" value = "true">
<Param name = "param1" value = "paramValue1">
<Param name = "param2" value = "paramValue2">
<Embed width = "450" height = "250" src = "myBetterMovie. mov" autoplay = "true"
Attr1 = "attrValue1" attr2 = "attrValue2" param1 = "paramValue1" param2 = "paramValue2"
Pluginspage = "http://www.apple.com/quicktime/download/"> </embed>
</Object>
</Div>

Usage

Html Tag code

Copy codeThe Code is as follows:
<A class = "media" href = "sample. mov"> My Quicktime Movie </a>
<A class = "media" href = "sample.swf"> My Flash Movie </a>
<A class = "media" href = "sample.wma"> My Audio File </a>

Initialization Script:

Copy codeThe Code is as follows:
$ ('. Media'). media ();

Option

You can configure parameters through the script object or jQuery Metadata Plugin.

Global default value:

Copy codeThe Code is as follows:
$. Fn. media. defaults = {
PreferMeta: 1, // if true, the marked meta value takes precedence over the script object
Autoplay: 0, // standardized cross-player settings
BgColor: '# ffff', // background color
Params: {}, // Add it to the object tag as the param element; add it to the embed tag as an attribute
Attrs :{}, // Add to object and embed as attributes
Flashvars :{}, // Add to flash as a flashvars parameter or attribute
FlashVersion: '7', // The minimum flash version required
// Default flash video and mp3 player // @ see: http://jeroenwijering.com /? Item = Flash_Media_Player
FlvPlayer: 'mediaplayer.swf ',
Mp3Player: 'mediaplayer.swf ',
// Silverlight options // @ see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
Silverlight :{
InplaceInstallPrompt: 'true', // The installation prompt is displayed at the appropriate position.
IsWindowless: 'true', // windowless Mode
Framerate: '24', // maximum Frame Rate
Version: '0. 9', // Silverlight version onError: null, // onError callback function
OnLoad: null, // onLoad callback function
InitParams: null, // object initialization parameter
UserContext: null // parameters uploaded to the load callback function
}
};

You can also input some option parameters when executing the initialization script, as shown in the following code:

Copy codeThe Code is as follows:
$ ('. Media'). media ({width: 400, height: 300, autoplay: true });

Another example is code:

Copy codeThe Code is as follows:
$ ('. Media'). media ({
Width: 450,
Height: 250,
Autoplay: true,
Src: 'mybettermovie. mov ',
Attrs: {attr1: 'attrvalue1 ', attr2: 'attrvalue2'}, // object/embed attrs
Params: {param1: 'paramvalue1 ', param2: 'paramvalue2'}, // object params/embed attrs
Caption: false // supress caption text
});

'Src' Option

The src option specifies the address of the media file. It has no global default value. If the value of the specified src option is not displayed, jQuery Media Plugin will be replaced by the value of the href or src attribute.

Player and format

The default format of jQuery Media Plugin is as follows:

Player	File Format
Quicktime	Aif, aiff, aac, au, bmp, gsm, mov, mid, midi, mpg, mpeg, mp4, m4a, psd, qt, qtif, qif, qti, snd, tif, tiff, wav, 3g2, 3pg
Flash	Flv, mp3, swf
Windows Media Player	Asx, asf, avi, wma, wmv
Real Player	Ra, ram, rm, rpm, rv, smi, smil
Silverlight	Xaml
Iframe	Html, pdf

The above table shows that the mp3 format is automatically mapped to the Flash Player. In the configuration, the Player .fn.media.defaults.mp3 Player specifies that the MP3 media is played by the mediaplayer.swf file. The swf file is a small mp3 and flash video player, which can be downloaded from: http://www.longtailvideo.com/players/jw-flv-player/

SWFObject

This script is very common and used to embed Flash content into webpages. You do not need to consider the Flash embedding methods on different platforms. But this file is not required. If it is loaded, jQuery Media Plugin will use it. Otherwise, jQuery Media Plugin will generate the object/embed tag by default. For more information, see: http://code.google.com/p/swfobject/

Iframe Player

By default, the PDF and HTML formats are mapped to iframe. They will be displayed in iframe rather than in the object/embed tag.

Add or modify format Association

This operation can be implemented by the mapFormat method of the plug-in, as shown in figure

$. Fn. media. mapFormat ('mp3', 'quicktime ');
Available players include uicktime, flash, realplayer, winmedia, silverlight, and iframe. This ensures that the player can be associated with the file format.

Download

Directly download the jquery. media. js file, or download the previous version on Github.

Note:

This plug-in converts <a> to <div> to nest multimedia content. This plug-in is as easy to use as other Jquery plug-ins.