ニコニコ動画を同時に見れるページを作ってみた

ニコニコ動画 javascript jquery

なんで作ったかっていうと、ニコニコ動画の外部プレーヤは未だに特定のブログでしか見れないものだと思っていたけど、
実はそうではないことを知ったからです（今さら・・・）

見れるページ

http://voidy21.appspot.com/nico_view/index.html

こんな感じになる

f:id:voidy21:20100705010634p:image:w600

注意！！

同時に開くととんでもなく重くなるので注意！！
ベンチマークにはなるかな・・・

ソース

<html>
<head>
<title>ニコニコ動画を同時に見る系</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script tyep="text/javascript">
$(document).ready(function(){
  $("textarea").change(function(){
    var nico_ids = $("textarea").val();
    var matches = nico_ids.match(/sm\d+/g);
    var nico = new Nico();
    $("#preview").empty();
    for (var i=0,length=matches.length; i <length; i++) {
        var dom = $("<div/>").attr("id","sm_"+i).css("float","left").text("Now Loading...");
        $("#preview").append(dom);
        nico.append(matches[i]);
    }
    nico.exec();
  });
});

function Nico() {
    this.initialize.apply(this, arguments);
}

Nico.prototype = {
  initialize : function() {
      this.params = [];
      this.count = 0;
  },

  get_id : function(nico_url) {
    return nico_url.replace("http://www.nicovideo.co.jp/watch/","");
  },

  append : function(nico_video_id) {
    this.params.push(this.get_id(nico_video_id));
    this.count++;
  },

  show_nico_thumbnail : function(count) {
    var _this = this;
    var alts = [];
    var d = document;
    d._write = document.write;
    document.write = function(s){ alts.push(s);};
    var src = "http://ext.nicovideo.jp/thumb_watch/" + this.params[count];
    $.getScript(src,function(){
        var write = alts.join("");
        $("#sm_"+count).html(write);
        document.write = d._write;
        count++;          
        if (count < _this.count) {
            _this.show_nico_thumbnail(count);
        }
    });
  },

  exec : function() {
    this.show_nico_thumbnail(0);
  }
};
</script>
</head>
<body>
<h3>ニコニコ動画を同時に見る系</h3>
動画URLを貼り付けてテキストエリアのフォーカスを外してみると見れます
<form>
  <textarea cols="40" rows="5"></textarea>
</form>
<div id="preview"></div>

</body>
</html>