JQuery multimedia Plugin: jQuery Media Plugin, jqueryplugin

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.