また用途不明のjQueryプラグインを作ってしまいました。
普通の画像を動画っぽくできるプラグインです。

使ってみればどういうものかすぐわかると思います。
怒らないでくださいね。。

もし気に入ったら、ご自分のサイトとかで使ってみてください。
あと、ブックマークレットにもしてみたので、よそのサイトの画像を動画っぽくしたい時は使ってください。

利用方法

動画っぽくしたい画像があるWebサイトのHTMLファイルに少しコードを書くだけで使えます。

最初にjQueryと、
jquery.bitfaketube.js
をUTF-8で読み込みます。次のような感じ。

<script type="text/javascript" src="http://labs.bitmeister.jp/bitfaketube/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://labs.bitmeister.jp/bitfaketube/js/jquery.bitfaketube.js" charset="utf-8"></script>

※jsファイルはこのように当社のサイトにあるものを直接呼び出しても構いませんが、いつでもアクセスできる保証はできません。


利用シーン１


対象となる画像のimgタグにbitfaketubeクラスを指定すれば、はじめからその画像は動画っぽくなっています。


<img src="xxxx" class="bitfaketube">





利用シーン２


最初にご覧いただいた例のように、ボタンを押してから動画っぽくしたいのであれば、クリックしたらbitfaketube()を呼ぶようにしてください。


<img src="xxxx" id="target">
...略...
<button onclick="$('#target').bitfaketube();">おす</button>



なお、対象となる画像は、幅200ピクセル以上かつ高さ100ピクセル以上のものを指定してください。

そうでない画像は動画っぽくしない仕様になっています。（変えたい方はソースをいじってください。）
応用
再生ボタンのイメージですが、明示的に指定しない場合は当社のサイトにある画像ファイルをさしています。（なので、そのまま使うと当社のサイトへアクセスが発生することになります。）

ただ、対象となるimgタグにbft_play属性を追加することで、再生ボタンのイメージへのURLを個別に指定することもできますので、好きな画像を指定してください。（サイズによってはうまくいかないかもしれません。）

それと、タイトルの下にある評価の星の数はbft_stars属性に数値で(0～5まで)指定できます。明示的に指定していない場合は5つ星です。


ブックマークレット
ブックマークレットにもしてみました。以下のリンクをブックマークに登録したりして使ってみてください。ブックマークを実行すると、ブラウザに表示されているWebサイトにある、ある程度大きい画像がすべて動画っぽくなるはずです。

ただし、スクリプトやCSSの関係で表示が乱れたりすることがありますので、ご了承ください。

こちらのようなWikipediaの画像は比較的うまく動きます。


ブックマークレットはこちら



画像を動画っぽい感じで


参考：ブックマークレットのソース（つくりはだいたいこちらと同じです。）

javascript:
(function(){
  // config
  var jq_url = 'http://labs.bitmeister.jp/bitfaketube/js/jquery-1.3.2.min.js';
  var bft_url = 'http://labs.bitmeister.jp/bitfaketube/js/jquery.bitfaketube.js';

  // jQuery loading
  var jq=document.createElement('script');
  jq.setAttribute('src',jq_url);
  if (!window['jQuery']){
    document.getElementsByTagName('head')[0].appendChild(jq);
  }
  var bft=document.createElement('script');
  bft.setAttribute('src',bft_url);
  bft.setAttribute('charset','utf-8');
  var isJQ = false;
  var id = window.setInterval(function(){
    if (window['jQuery'] &&
      window['jQuery']['fn'] && 
      window['jQuery']['fn']['offset']
    ){
      isJQ = true;
      // jQueryが読み込み終わったら、bitfaketubeを読み込む
      if (!window['jQuery']['fn']['bitfaketube'])
        document.getElementsByTagName('head')[0].appendChild(bft);
    }
    if (isJQ == true &&
      window['jQuery']['fn']['bitfaketube'] &&
      window['jQuery']['fn']['bitfaketube']['key_class']
    ){
      window.clearInterval(id);
      jQuery('img').bitfaketube();
    }
  },100);
})();



補足
ファイル圧縮や効率化のための努力も何もしていない（そういう知識もない）ので、ソースコードを積極的に見せることはしませんが、自由にお使いいただいて結構です。MITライセンスです。

いつか、ちゃんとリファクタリングをした後にオープンソースとしてしかるべき場所におこうと思います。

（jQueryの本家にプラグインの登録は、、しない気がします。）
ちなみに、こちらにインスパイアされて作りました。

私の方が道具＆撮影不要でしかも動きます！