youtube 用の swfobject プラグイン

swfobject v2.0で youtube の動画を貼り付けるためのプラグインを作ってみました。

例えば、swfobject のみを利用して youtube の動画を貼り付ける場合、以下のような長ったらしいコードになってしまいます。しかも、毎回動画を貼り付ける時は ID 以外の引数の値が同じになっています。それなら、最小限の引数で貼り付けられるようなプラグインが欲しいなーと思って作ってみました。また、このプラグインを使うことで一度に複数の動画を貼り付けることもできます。

swfobject.embedSWF("http://www.youtube.com/v/yNdsv08JWnc&rel=1", "myContent", "425", "355", "7.0.0", null, null, {wmode:"transparent"});

Download

以下のリンクからダウンロードして下さい（MIT License の下で配布しますのでご自由に）。

• swfobjectYoutube ver 0.2

var swfobjectYoutube = {
    target: null,
    parent: null,
    
    config: {
        wrapperTag: true,
        wrapperTagName: "p",
        wrapperClassName: "",
        altVideoList: true,
        altVideoListComment: "Sorry, but please access videos from the following links."
    },
    
    embedSWF: function(targetElementId, videoIdList) {
        var flag = true;
        this.target = document.getElementById(targetElementId);
        if(this.target != null) {
            if(swfobject.getFlashPlayerVersion().major >= 7) {
                this.parent = this.target.parentNode;
                if(typeof videoIdList == "object") {
                    for (var i in videoIdList) {
                        this.createEmbedSWF(targetElementId + i, videoIdList[i]);
                    }
                }
                this.parent.removeChild(this.target);
            } else if(this.config.altVideoList) {
                this.addCommentForAlternativeVideoList();
                this.createAlternativeVideoList(videoIdList);
            }
        }
    },
    
    createEmbedSWF: function(videoName, videoId) {
        var url = "http://www.youtube.com/v/" + videoId + "&rel=1";
        var box = document.createElement("div");
        box.setAttribute("id", videoName);
        if(this.config.wrapperTag) {
            var wrap = document.createElement(this.config.wrapperTagName);
            if(this.config.wrapperClassName) {
                wrap.setAttribute("class", this.config.wrapperClassName);
            }
            this.parent.insertBefore(wrap, this.target);
            wrap.appendChild(box);
        } else {
            this.parent.insertBefore(box, this.target);
        }
        swfobject.embedSWF(url, videoName, "425", "355", "7.0.0", null, null, {wmode:"transparent"});
    },
    
    createAlternativeVideoList: function(videoIdList) {
        var u = document.createElement("ul");
        var url = "";
        for (var i in videoIdList) {
            url = "http://www.youtube.com/watch?v=" + videoIdList[i];
            var l = document.createElement("li");
            var a = document.createElement("a");
            a.setAttribute("href", url);
            a.innerHTML = url;
            u.appendChild(l).appendChild(a);
        }
        this.target.appendChild(u);
    },
    
    addCommentForAlternativeVideoList: function() {
        if(this.config.altVideoListComment) {
            var p = document.createElement("p");
            p.innerHTML = this.config.altVideoListComment;
            this.target.appendChild(p);
        }
    }
}

プラグインの初期設定

swfobject によって書き出された object 要素を、指定した要素の内包要素にすることができます（初期値では p 要素）。wrapperTag は設定の On, Off の切り替えを（true, flase）、wrapperTagName はその要素名を指定（" で囲む）できます。また、wrapperTagName で指定した要素に class 属性を追加する場合は、wrapperClassName で class名を指定して下さい（" で囲む）。

代替コンテンツボックスに、指定された動画リンクリストとリンクへの誘導コメントを追加することができます（初期設定は On）。altVideoList で代替テキストに動画リンクリストを追加するかどうか（true, false）を指定し、altVideoListComment で動画リンクへの誘導コメントを指定します（" で囲む）。

config: {
    wrapperTag: true, //wrapperTagNameで指定したタグの内包要素とする
    wrapperTagName: "p",
    wrapperClassName: "youtube",
    altVideoList: true, //代替テキストに動画リンクリストを追加する
    altVideoListComment: "Sorry, but please access videos from the following links."
},

以下 wrapperTag を指定した場合の出力例（見やすくするために改行とスペースを入れていますが、実際の出力では入りません）。

<p class="youtube">
    <object width="425" height="355" type="application/x-shockwave-flash" data="http://www.youtube.com/v/QCVxQ_3Ejkg&amp;rel=1">
        <param name="wmode" value="transparent"/>
    </object>
</p>

閲覧者が Flash Player の古いバージョンを使用している場合の出力例（見やすくするために改行とスペースを入れていますが、実際の出力では一部入りません）。

<div id="myContnet">
    <p>Alternative content</p>
    <p>Sorry, but please access videos from the following links.</p>
    <ul>
        <li><a href="http://www.youtube.com/watch?v=QCVxQ_3Ejkg">http://www.youtube.com/watch?v=QCVxQ_3Ejkg</a></li>
    </ul>
</div>

プラグインの使い方

swfobject.embedSWF() を swfobjectYoutube.embedSWF() に置き換えて使います。swfobjectYoutube.embedSWF() の引数は以下の通り。

1. 代替コンテンツボックスの ID
2. 動画の ID を配列形式で指定（複数指定可）

<!-- swfobject と plugin を読み込む -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfobject_youtube.js"></script>

<div id="myContent"> <!-- 代替コンテンツボックス -->
    <p>Alternative content</p>
</div>
<script type="text/javascript">
// <![CDATA[
    swfobjectYoutube.embedSWF("myContent", ["QCVxQ_3Ejkg", "yNdsv08JWnc"]);
// ]]>
</script>

使用例の実行サンプル。Youtube が Google に売却されて Happy になっている2人と、Jake Shimabukuro さんの華麗なるウクレレ演奏を貼っています。

• swfobjectYoutube サンプル - nondelion.com

• Newer: fotologue の RSS からサムネイル画像を読み込む
• Older: MT4.01 から MT4.1 へ