[JS]iframeで埋め込んだYouTube動画をjsで操作する

YouTubeのAPIを使って、iframeで埋め込んだYouTube動画を操作(再生・一時停止など)する方法。
詳しくは、https://developers.google.com/youtube/iframe_api_reference?hl=ja

<!DOCTYPE HTML>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8" />
	<title>youtubAPI</title>


	<!-- JS -->
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script>
		//Load player api asynchronously.
		var tag = document.createElement('script');
		tag.src = "//www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		var done = false;
		var player;
		function onYouTubeIframeAPIReady() {
			player = new YT.Player('player', {
				height: '390',
				width: '640',
				videoId: 'rHrrcuvKJ7c',
				events: {
					'onReady': onPlayerReady,
					'onStateChange': onPlayerStateChange
				}
			});
		}

		function onPlayerReady(evt) {
			evt.target.playVideo();
		}

		function onPlayerStateChange(evt) {
//			if (evt.data == YT.PlayerState.PLAYING && !done) {
//				setTimeout(stopVideo, 6000);
//				done = true;
//			}
		}

		function stopVideo() {
			player.stopVideo();
		}

		$(function() {
			$("body").click(function() {
				if (done) {
					done = false;
					player.playVideo();
				} else {
					done = true;
					//player.stopVideo();
					player.pauseVideo()
				}
			});
		});
	</script>
</head>

<body>

	<div id="player"></div>

</body>
</html>

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation