jQueryプラグイン Text on YouTube　デモページ２

　このページではプラグインに必要なjQueryライブラリの他、Prototype.jsとscript.aculo.usを読み込んでいます。 ご存じのとおり、jQueryとPrototype.jsはショートカットに同じ$を使用しているのでこのままではライブラリ同士衝突してしまいます。 しかし、Text on YouTubeプラグインはコード中で一切ショートカットの$を使用していないので、 jQuery.noConflictメソッドを利用して衝突を回避できます。このメソッドを呼び出すと、以降はjQueryやプラグインのメソッド群を呼び出すのに、 $ではなくjQueryを使用することになります。

プラグインのドキュメントページ作りました。
⇒Text on YouTube - YouTube動画上にテキストを表示するプラグイン

画面サイズ320*180

画面サイズ480*270

画面サイズ640*360

　jQuery.noConflictメソッドでライブラリ間の競合を回避する例 <script type="text/javascript"> //<![CDATA[ /* このメソッドを呼び出すと、以降jQueryとそのプラグインのメソッド/プロパティには$のショートカットは使えなくなる */ jQuery.noConflict(); /* ユーザー側のスクリプトでも当然、$のショートカットを使ってはいけない */ jQuery(function() { jQuery('.video_frame').textOnYoutube('2Op3EBgik9s'); }); /* これはPrototype.jsとscript.aculo.usのコードなので、$のショートカットを使用できる。ページのロードが終了すると、動画が次々にフェードアウトする */ document.observe('dom:loaded', function(e) { $('v1').fade({ delay: 2 }); $('v2').fade({ delay: 4 }); $('v3').fade({ delay: 6 }); }); //]]> </script>

動作確認：　Firefox3.6 Chrome7.0 IE8