jQuery.createvideo Plugin

jquery.createvideoプラグインとは

jquery.createvideoプラグインは各動画サイトの動画を非常に簡単に埋め込む為のスクリプトです。

使い方は簡単で、jQuery本体とjquery.createvideoプラグインをhead要素内に読み込み簡単な設定をし、
表示させたい動画のURL(動画埋め込み用URLではなく、ページのURL(アドレスバーに表示されてるやつですよー。))をa要素のhref属性に設定し、
同じくa要素にrel="video"と記述します。基本設定はコレだけです。
詳しくは下記のサンプルをご覧ください。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.createvideo.js"></script>
<script type="text/javascript">
$(function(){
$("a[rel=video]").createVideo();
});
</script>
</head>
<body>
<div><a rel="video" href="http://www.nicovideo.jp/watch/sm7902754"></a></div>
</body>
</html>
上記ソースの動作を実際に見る

ダウンロード

http://blog.ks-product.com/lib/jquery.createvideo/jquery.createvideo.zip

表示サンプル

続いてjquery.createvideoプラグインを使用した具体的な表示例です。
通常はこれだけの動画を埋め込むとなるとソースが煩雑になりメンテナンス性が低下しますが、
jquery.createvideoプラグインを使用すれば通常のリンクと変わらないので非常に簡潔です。

Case1

width:250、height:170にサイズ指定した場合

Case2

width:500、height:350にサイズ指定した場合

video video

Case3

サイズを省略した場合(630*384に自動的に設定されます)

video

スタイルの変更方法

生成されたプレイヤーはdiv.videoContainerに自動的にラップされるのでスタイルを調整する場合はdiv.videoContainerに対して行ってください。

対応動画サイト

jquery.createvideoプラグインでは
youtube、ニコニコ動画、vimeo、dailymotionの動画埋め込みに対応しています。

既知の不具合

ニコニコ動画のプレイヤーのみ、特殊な方法でプレイヤーを生成している為、画面クリック時のリンク先がフレーム内に表示されます。改善しました。
また、IE9の標準モードでswfの横に隙間が出来る(swf自体が若干縮小され表示される)場合があります。他のブラウザやIE8以前では確認できない現象なのでIE9固有のバグでしょう。
良い解決策がありましたら教えてくださるとありがたいですw

ちなみにIE6でこのページを見た場合表示が崩れますが、CSSの設定の問題でプラグイン自体には問題ありませんのでご安心ください。あえて対応してないだけですよ キリッ

ライセンスとサポート

ライセンスはMITライセンスを適用します。
サポートは行っていません。自己責任でお使いください。

ご感想、バグ報告はtwitterアカウントで受け付けています。返信は保証できませんが…w