jQueryマルチメディアプラグインの詳しい説明 jQuery Media Plugin_jquery

jQuery Media Plugin は、jQuery に基づく Web メディア プレーヤー プラグインで、Flash、Windows Media Player、Real Player、Quicktime、MP3、Silverlight、PDF など、ほとんどのオンライン マルチメディア プレーヤーとマルチメディア形式をサポートします。現在のスクリプト設定に基づいて a タグを div に自動的に置き換え、オブジェクト、埋め込み、さらには iframe コードを生成します。オブジェクトを生成するか埋め込むかについては、jQuery Media が現在のプラットフォームに基づいて自動的に決定するため、互換性はありません。素晴らしい。次のコードは、jQuery Media によって生成された結果です:

コードをコピーします コードは次のとおりです:

<div class="メディア"> <オブジェクト幅="450" 高さ="250" attr1="attrValue1" attr2="attrValue2"
codebase="
http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
＆lt; param name = "src" <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> </オブジェクト>
</div>


具体的な使用方法

HTML マークアップ コード

コードをコピーします

コードは次のとおりです: <a class="media" href="sample.mov">私の Quicktime ムービー</a> <a class="media" href="sample.swf">私の Flash ムービー</a> <a class="media" href="sample.wma">私のオーディオ ファイル</a>

初期化スクリプト:

コードをコピーします

コードは次のとおりです: $('.media').media();

オプション

パラメータは、スクリプト オブジェクトまたは jQuery メタデータ プラグインを通じて設定できます。

グローバルデフォルト:

コードをコピーします

コードは次のとおりです: $.fn.media.defaults = { preferMeta: 1, // true の場合、タグのメタ値がスクリプト オブジェクトより優先されます autoplay: 0, // 標準化されたクロスプレイヤー設定 bgColor: '#ffffff', // 背景色

params: {}, // オブジェクトタグに param 要素として追加し、埋め込みタグに属性

として追加します。 attrs: {}, // オブジェクトに追加し、属性として埋め込みます
flashvars: {}, // flashvars パラメータまたは属性としてフラッシュに追加
flashVersion: '7', // 必要なフラッシュの最小バージョン
// デフォルトの Flash ビデオおよび MP3 プレーヤー // @see:
http://jeroenwijering.com/?item=Flash_Media_Player

flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight オプション // @see
http://msdn2.microsoft.com/en-us/library/bb412401.aspx シルバーライト: {
inplaceInstallPrompt: 'true', // 適切な場所にインストール プロンプトを表示します
isWindowless: 'true', // ウィンドウレスモード
Framerate: '24', // 最大フレームレート version: '0.9', // Silverlight バージョン onError: null, // onError コールバック関数 onLoad: null, // onLoad コールバック関数
initParams: null, // オブジェクトの初期化パラメータ
userContext: null // ロード コールバック関数に渡されるパラメータ
}
};

次のコードに示すように、初期化スクリプトの実行時にいくつかのオプション パラメーターを渡すこともできます。

コードをコピーします コードは次のとおりです:

$('.media').media( { 幅: 400、高さ: 300、自動再生: true } );

もう 1 つの例は次のコードです:

コードをコピーします コードは次のとおりです:

$('.media').media({
幅: 450、
身長: 250、
自動再生: true、
src: 'myBetterMovie.mov',
attrs: { attr1: 'attrValue1', attr2: 'attrValue2' }, // object/embed attrs
params: { param1: 'paramValue1', param2: 'paramValue2' }, // オブジェクト params/embed attrs
caption: false // キャプションテキストを抑制します
});

のsrc'オプション

src オプションはメディア ファイルのアドレスを指定します。グローバルなデフォルト値はありません。指定された src オプションの値が表示されない場合、jQuery メディア プラグインは代わりに href または src 属性の値を使用します。

プレーヤーとフォーマット

jQuery メディア プラグインのデフォルトは、次の表に示すプレーヤーと形式になります。

プレイヤー	ファイル形式
クイックタイム	aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav, 3g2,3pg
フラッシュ	flv、mp3、swf
Windows Media Player	asx、asf、avi、wma、wmv
リアルプレイヤー	ra、ram、rm、rpm、rv、smi、smil
シルバーライト	xaml
iframe	html、pdf

上の表は、mp3 形式が Flash プレーヤーに自動的にマッピングされることを示しています。グローバル設定の $.fn.media.defaults.mp3Player は、MP3 メディアが mediaplayer.swf ファイルによって再生されることを指定します。 swf ファイルは、小さな MP3 および Flash ビデオ プレーヤーであり、ここからダウンロードできます: http://www.longtailvideo.com/players/jw-flv-player/

SWFオブジェクト

このスクリプトは非常に一般的で、Web ページに Flash コンテンツを埋め込むために使用されます。さまざまなプラットフォームの Flash 埋め込み方法を考慮する必要はありません。ただし、このファイルは必須ではありません。ロードされている場合、jQuery メディア プラグインはそれを使用します。ロードされていない場合、jQuery メディア プラグインは独自のデフォルトの方法でオブジェクト/埋め込みタグを生成します。詳細については、http://code.google.com/p/swfobject/

を参照してください。

iframe プレーヤー

デフォルトでは、PDF および HTML 形式は iframe にマップされます。これらは、object/embed タグではなく iframe に表示されます。

形式の関連付けを追加または変更します

この操作は、

などのプラグインの mapFormat メソッドで実装できます。

$.fn.media.mapFormat('mp3','quicktime');
利用可能なプレーヤーは、uicktime、flash、realplayer、winmedia、silverlight、および iframe です。プレーヤーが関連付けられたファイル形式を再生できることを確認してください。

ダウンロード

jquery.media.js ファイルを直接ダウンロードするか、Github

で過去のバージョンをダウンロードします。

注:

このプラグインは、<a> を <div> に変換してマルチメディア コンテンツを埋め込みます。このプラグインは、他の Jquery プラグインと同様にシンプルで使いやすいです。