Download: スクリプトのダウンロード
- jquery.playtube.js (16kb) .. 「対象をファイルに保存」で保存してください。
※別途、jQuery が必要です。
Floating(浮き出し型) で使う場合は jQuery UI も必要です。
※呼び出す HTML と JavaScript のソースの書き方は、それぞれの動画の表示形式のサンプルをご覧ください。
inline: 埋め込み型サンプル
Note 解説
「埋め込み型」は、ページの中にリンクした動画を直接埋め込み、主要なコンテンツとして表示します。
- 設定の "target" や "dialog" の項目を指定しない場合、この形式になります。
- 埋め込む場所は、各<A>リンクの前で、<DIV class="playtube inline">が追加されます。
JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。
JavaScript ソース
<script src="jquery.js"></script>
<script src="jquery.playtube.js"></script>
<script>
$(function() {
$("ul.movie a").playTube({
width : 480,
height : 370
});
});
</script>
HTML ソース(変換前)
<ul class="movie">
<li><a href="http://www.youtube.com/watch?v=64mzlKQJf8o">
いきものがかり 『風が吹いている』</a></li>
<li><a href="http://www.nicovideo.jp/watch/sm8628149">
【東方】Bad Apple!! PV【影絵】</a></li>
</ul>
HTML ソース(変換後)
<ul class="movie">
<li class="youtube">
<div id="playtube-0" class="playtube inline">
<iframe src="http://www.youtube.com/embed/64mzlKQJf8o"
width="480" height="370" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></li>
<li class="nicovideo">
<div id="playtube-0" class="playtube inline">
<iframe width="480" height="370" frameborder="0"></iframe></div></li>
</ul>
Replace: 置き換え型サンプル
- Philippe Candeloro - 1998 Olympics Gala - D'Artagnan
- Torino Olympic 2006 Exhibition Evgeni Plushenko Tosca & Encore
- プルシェンコ2001WorldEXアンコール付き
- 鉄拳パラパラマンガ「振り子」
- 【初音ミク】みくみくにしてあげる♪【してやんよ】
- 組曲『ニコニコ動画』
Note 解説
「置き換え型」は、動画のリンクをクリックしたとき、ページの中にある既存の要素の内容を置き換えて、その動画を表示します。
- 設定の "target" の項目で、動画を表示する要素(ターゲット要素)のID等を指定します。(必須)
- 設定で "thumb" を有効にすると、動画の縮小画像(サムネイル)がリンクの中に挿入されます。
- 設定で "autoplay" を有効にすると、動画を表示した際に自動的に再生が始まります。。
- ページを読み込んだとき、最初の動画をターゲット要素に表示させたい場合は、設定で "firstset" を有効にします。
- サムネイル表示した場合でも、リンクのテキストを残しておきたいときは、設定で "keeptext" を有効にしておきます。
JavaScript ソース
<script src="jquery.js"></script>
<script src="jquery.playtube.js"></script>
<script>
$(function() {
$("ul.movie a").playTube({
width : 480,
height : 370,
thumb : true, // insert thumbnail image automatically
target : "#player", // target element to insert movie
autoplay : true, // auto play on call movie
firstset : true, // set first video to target
keeptext : true // keep link text
});
});
</script>
HTML ソース(変換前)
<div id="player" class="player"></div>
<ul class="movie">
<li><a href="http://www.youtube.com/watch?v=jOGoMsYdoi0">
Philippe Candeloro - 1998 Olympics</a></li>
<li><a href="http://www.nicovideo.jp/watch/sm500873">
組曲『ニコニコ動画』</a></li>
</ul>
HTML ソース(変換後)
<div id="player" class="player">
<iframe src="http://www.youtube.com/embed/jOGoMsYdoi0?wmode=transparent&hd=1&rel=0"
width="480" height="370" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<ul class="movie">
<li class="youtube">
<a href="http://www.youtube.com/watch?v=jOGoMsYdoi0">
<img src="http://img.youtube.com/vi/jOGoMsYdoi0/default.jpg" alt="..." title="..." />
Philippe Candeloro - 1998 Olympics</a></li>
<li class="nicovideo">
<a href="http://www.nicovideo.jp/watch/sm500873">
<img src="http://tn-skr1.smilevideo.jp/smile?i=500873" alt="..." title="..." />
組曲『ニコニコ動画』</a></li>
</ul>
Floating: 浮き出し型サンプル
- Kurt Browning - Singin' In The Rain
- Alexei Yagudin 2002 Olympics LP
- プルシェンコ 『ニジンスキーに捧ぐ』 2004 RN
- Philippe Candeloro - 1998 Oly - D'Artagnan
- イリーナ・スルツカヤ 2005 世界選手権 FS.flv
- トリノオリンピック2006 荒川静香
- スターウォーズ (ファンファーレ付き)を弾いてみました
- ビッグブリッヂの死闘 を弾いてみました【おまけつき】
- ドラクエⅨ を弾いてみました
- maru vs.スクリームでパイレーツオブカリビアンを弾いてみた!
- ウサコとmaruでFFXII交響詩「希望」を弾いてみました[reje mix]
Note 解説
「浮き出し型」は、動画のリンクをクリックしたとき、ページ内にポップアップウィンドウを表示し、そのウィンドウに動画を表示します。
- 設定の "dialog" の項目で、動画を表示するポップアップウィンドウのクラス名を指定します。(必須)
- jQuery UI の Dialog が必要です。
- あとは基本的に上記他の形式と同じです。
JavaScript ソース
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<script src="jquery.playtube.js"></script>
<script>
$(function() {
$("ul.movie a").playTube({
width : 720,
height : 480,
thumb : true, // insert thumbnail image automatically
dialog : "dialog-window", // class name if use dialog
autoplay : true, // auto play on call movie
keeptext : true // keep link text
});
});
</script>
HTML ソース(変換前)
<ul class="movie">
<li><a href="http://www.youtube.com/watch?v=P8F5l4_R_38">
Kurt Browning - Singin' In The Rain</a></li>
<li><a href="http://www.nicovideo.jp/watch/sm5281025">
ビッグブリッヂの死闘 を弾いてみました【おまけつき】</a></li>
</ul>
HTML ソース(変換後)
<ul class="movie">
<li class="youtube">
<a href="http://www.youtube.com/watch?v=P8F5l4_R_38">
<img src="http://img.youtube.com/vi/P8F5l4_R_38/default.jpg" alt="..." title="..." />
Kurt Browning - Singin' In The Rain</a></li>
<li class="nicovideo">
<a href="http://www.nicovideo.jp/watch/sm5281025">
<img src="http://tn-skr2.smilevideo.jp/smile?i=5281025" alt="..." title="..." />
ビッグブリッヂの死闘 を弾いてみました【おまけつき】</a></li>
</ul>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all dialog-window ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title" id="ui-dialog-title-playtube-10">Kurt Browning - Singin' In The Rain</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all">
<span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="playtube dialog ui-dialog-content ui-widget-content">
<iframe src="http://www.youtube.com/embed/P8F5l4_R_38"
width="480" height="370" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
...
</div>