jQuery Playtube

Youtube や ニコニコ動画、自サイトにアップした動画などをWebページに簡単に埋め込むための jQueryプラグイン です。
動画のURLアドレスへのリンクを貼るだけで、動画をページ内に埋め込むことができるようになります。
まずは下記サンプルをご覧ください。

※環境によっては、 ↑ブラウザ上部に「○○○を実行するにはユーザーの許可が必要です。」 という確認バーが出ることがあります。
　これは、自サイトにアップした動画をページ内で再生するときに使われることがあるプラグインです。
※Youtube や ニコニコ動画 のみの場合は発生しません。

Download: スクリプトのダウンロード

※別途、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!!　ＰＶ【影絵】</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: 置き換え型サンプル

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: 浮き出し型サンプル

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>

Extension: 動画形式別サンプル

<video> (.mp4 .webm .ogv)

.mp4

.flv

.wmv .asf .wmx

.mov .qt

.avi .divx

.mkv

.rmvb .rm

.ogm

.mpeg .ts