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

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

WBOY

リリース： 2016-05-16 16:25:32

オリジナル

3533 人が閲覧しました

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

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

<オブジェクト幅="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"

attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2"
pluginspage="
http://www.apple.com/quicktime/download/
" >/embed>

具体的な使用方法

HTML マークアップコード

コードをコピーします

コードは次のとおりです: 私の Quicktime ムービー私の Flash ムービー私のオーディオファイル

初期化スクリプト:

コードをコピーします

コードは次のとおりです: $('.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

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

注:

このプラグインは、を

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