Endキー押下で、通常サイズ動画⇔おっきい動画でトグルするようにするjavascript

とりあえず作ってみました。
bookmarkletでなければ、GreasemonkeySeaHorseのuser.jsでもありません。
jashで流し込んで、動かしてみただけです。
Firefox対応もまだです。
ほんと、とりあえずです。
ちゃんと出来たらuser.jsにして公開します。


何が出来るかというと、これを実行すると、
Endキー押下で動画のサイズを画面いっぱいにしたり戻したりできるようになります。

  • 画面いっぱいのとき:動画鑑賞
  • 通常サイズのとき:投稿者コメント閲覧、タグ編集、マイリスト編集

という用途を想定しているので、以下のようにスクロールをさせています。

  • 画面いっぱいのとき:動画の一番上がウィンドウの一番上
  • 通常サイズのとき:広告バナーの下、"SMILEVIDEO"等動画サイトの名前が出ている箇所が、ウィンドウの一番上


playerのどこかをクリックするとキー押下のイベントが、
playerに奪われて、Endキーによる切り替えが効かなくなるので、
すぐにplayer外をクリックして切り替えが聞くように出来るよう、
playerの下に少しスキマが空くようにサイズを調整しておきました。


以下ソース

(function(){
	var isZoomed=false;  // 現在拡大しているか
	var originalWidth;  // 拡大前のnico nico playerの横幅
	var originalHeight;  // 拡大前のnico nico playerの高さ

	var toggle=function(){
		var pl=document.getElementById('flvplayer');  // nico nico player
		var div=document.getElementById('flvplayer_container');  // nico nico playerが入ってるdiv
		if(!isZoomed){
			var mul=document.documentElement.clientHeight/pl.height*1.18;
			originalWidth=pl.width;
			originalHeight=pl.height;
			pl.width=pl.width*mul;
			pl.height=pl.height*mul;
			div.style.setAttribute('width',pl.width);
			div.style.setAttribute('height',pl.height);
			document.documentElement.scrollTop=div.offsetTop+pl.height*0.19;
		}else{
			pl.width=originalWidth;
			pl.height=originalHeight;
			div.style.setAttribute('width',pl.width);
			div.style.setAttribute('height',pl.height);
			upScroll();
		}

		// 状態の反転
		isZoomed=!isZoomed;
	}
	window.document.onkeydown = function(evt){
		var kc=evt?evt.keyCode:event.keyCode;
		if(kc==35){
		toggle();
		return false;
		}
	}

	// 広告バナーより下だけが表示される位置にスクロールさせる
	var upScroll = function(){
		var dummyButton=document.getElementById('dummyButtonForScroll');
		dummyButton.style.setAttribute('display','');
		dummyButton.focus();
		dummyButton.style.setAttribute('display','none');
	}

	// upScroll用の事前処理
	// ダミーのボタンを作成し、WATCHHEADERの直前に配置する。

	var dummyButton = document.createElement('input');
	dummyButton.setAttribute('type','button');
	dummyButton.setAttribute('value','');
	dummyButton.setAttribute('id','dummyButtonForScroll');
	dummyButton.style.setAttribute('display','none');

	var dummyForm = document.createElement('form');
	dummyForm.appendChild(dummyButton);
	dummyForm.setAttribute('onClick','return false;');

	var watchHeader=document.getElementById('WATCHHEADER');
	watchHeader.parentNode.insertBefore(dummyForm, watchHeader);
})()