[youtube] 유튜브 구간 반복 재생 api 삽입

특정 구간에서 반복적으로 재생되어야 하는 유튜브 영상 삽입하기

 

iframe으로 삽입하고 loop를 넣었더니

특정 구간 재생 시작 => 특정 구간 재생 종료까지는 되는데

종료 시점에서 영상이 끝나면 아예 영상 맨처음부터 다시 재생이 됐다

 

구글링을 통해

특정 구간을 반복 재생하려면 유튜브 api를 사용해야 한다는 것을 찾아서 문제 해결

 

// youtube loop play
		var tag = document.createElement('script');

		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

		var section = {
			start: 40, // 반복 시작 시간(초)
			end: 94 // 반복 종료 시간(초)
		};
		var player;

		function onYouTubeIframeAPIReady() {
			player = new YT.Player(
				'player', {
					height: '360',
					width: '640',
					playerVars: { 'autoplay': 1, 'controls': 0, 'mute':1 },
					videoId: '', //해당 영상 ID값
					events: {
						'onReady': onPlayerReady,
						'onStateChange': onPlayerStateChange
					}
				}
			);
		}

		function onPlayerReady(event) {
			player.seekTo(section.start);
			player.playVideo();
		}

		function onPlayerStateChange(event) {
			if (event.data == YT.PlayerState.PLAYING) {
				var duration = section.end - section.start;
				setTimeout(restartVideoSection, duration * 1000);
			}
		}

		function restartVideoSection() {
			player.seekTo(section.start);
		}

 

 

 

*전체 코드

https://lpla.tistory.com/179

유튜브 iframe Player API 구간 반복 재생