TypescriptでYoutube APIを使って遊んだ - 仕事の事やプライベートな事を適当に書いていくブログ

タイトル通りの内容で、かつ簡単なもので申し訳ない( ˘ω˘)oO(しかも今更感)
本実装はまだだけど、お仕事でどうしても使う必要が出てきたので、色々と検証作業（）をしたいなと思いました。
個人的なメモ用に書いた内容なので記事ボリュームはお察し下さい。

当然ながら生で書くと何も問題は無いのですが、typescriptを使うとどうしても怒られます。
怒られるので定義して上げる必要があります。

今回もgoogle先生にお願いして、パｋ……リスペクト致しました*1。

# typescriptに定義してあげる
ひとまず定義ファイルが必要なので、typingsから落とす。

typings install dt~youtube --save --global

でインストールしたら、次はtsファイルに下記のコードを追加してあげる。

interface MyWindow extends Window {
	onYouTubeIframeAPIReady(): void;
}
declare var window: MyWindow;

ひとまず、これでYoutube API周りで怒られる事は無いと思う(´・ω・｀)

#youtube動画を背景全画面のレスポンシブ＋切り替えるようにしたい

今回のサンプルがこちら

少しだけスクロールすると、左下になにやら入力欄と「動画を切り替える」ボタンがあると思います。
この入力欄にyoutubeの動画URLを入れて*2「動画を切り替える」ボタンを押下すると、
背景のyoutubeが*3切り替わって再生されてるかなと思います*4。

さて、実際のコード*5ですが、

HTML

<div id="wrapper">
  <div id="player"></div>
  <div id="player_cover">
    <div id="loader"></div>
  </div>
  <input id="video_id"><a href="#" id="change_v">動画を切り替える</a>
</div>

sass(css)

html,body {background: #000;}
#wrapper {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	#player {
		position: relative;
		z-index: 0;
	}
	#player_cover {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		#loader {
			background:#000 url('http://jsrun.it/assets/K/1/9/U/K19UZ.gif') no-repeat center center;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
	#change_v {
		background: #fff;
		display: inline-block;
		text-decoration: none;
		padding: 5px 5px;
		margin-left: 10px;
		font-size: 1.1rem;
		color: #000;
	}
}

typescript*6

_init() {
	//youtube api load
	$('body').append('<script src="https://www.youtube.com/iframe_api">');
	this.resizeMovie();//リサイズを一度実行
}
resizeMovie() {
	var $w = $(window),
			bw = 1200,
			bh = (bw/16) * 9,
			w = $w.width(),
			h = $w.height(),
			mw = w,
			mh =  Math.round(bh * (mw/bw));

	if ( mh < h ) {
		mh = h;
		mw = Math.round(bw * (mh/bh));
	}

	$('#player').css({
		width: mw,
		height: mh,
		marginTop: (h - mh)/2,
		marginLeft: (w - mw)/2
	});
}

onPlayerReady(event) {
	$('#loader').delay(2500).animate({"opacity":0}, 800, "swing", function() {
		$(this).css('display', 'none');
	});
}
onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.ENDED) {
		player.playVideo();
	}
}

//動画切り替え
change_video(e) {
	e.preventDefault();
	var u:any = $('#video_id').val(),
			id:any = /[/?=]([-\w]{11})/.exec(u);
	id = id[1];

	player.loadVideoById(id);
}

_event() {
	$(window).on( 'resize', $.proxy( this.resizeMovie,this ) );
	$('#player_cover').on( 'click', $.proxy( this.player_cover,this ) );
	$('#change_v').on( 'click', $.proxy( this.change_video,this ) );

	//プレイヤーの定義と設定
	var _this:any = this;
	var onYouTubeIframeAPIReady = function () {
		player = new YT.Player('player', {
			videoId: '',
			playerVars: {
				'autoplay': 1,
				'controls': 0,
				'enablejsapi': 1,
				'iv_load_policy': 3,
				'disablekb':1,
				'showinfo':0,
				'rel':0,
				'start': 5
			},
			events: {
				'onReady': _this.onPlayerReady,
				'onStateChange': _this.onPlayerStateChange
			}
		});
	};
	window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
}