메뉴 건너뛰기

프로그래밍


유튜브앱에서 영상들을 스크롤하다 보면 화면의 중간에 위치했을 때 영상이 자동으로 재생됩니다.

이를 웹페이지에서 구현하기 위한 방법입니다.

스크롤을 통해 특정 HTML Element가 화면의 중간에 위치하면 이를 감지하는 방법입니다.


$(window).on('scroll', function() {
	var scrollTop = window.innerHeight / 2;
	var eleTop = $('#myElement')[0].getBoundingClientRect().top;
	if(eleTop < scrollTop) {
	    // 화면 중간에 위치 되었음!
	}
    });

아래는 유튜브 iframe API를 이용해서 영상이 화면의 중간에 위치하면 자동으로 영상을 Play 하는 풀 코드 입니다.


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/player_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var youTubePlayerObject;

	function onYouTubeIframeAPIReady() {
    		youTubePlayerObject = new YT.Player('youTubePlayerDiv', {
        			width: '640',
        			height: '480',
        			playerVars: {rel: 0},
			videoId: 'kabyoDokrkw',
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
	}

	function onPlayerStateChange(event) {
    		if (event.data == YT.PlayerState.PLAYING) { }		
	}

	function onPlayerReady(event) {
    		event.target.stopVideo();   
	}

 
	$(document).ready(function () {

		$(window).on('scroll', function() {
			var scrollTop = window.innerHeight / 2;
			var videoTop = $('#youTubePlayerDiv')[0].getBoundingClientRect().top;
			if(videoTop < scrollTop) {
				youTubePlayerObject.playVideo(); //재생
			}
		});
	});


</script>
<h1>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>

<div id="youTubePlayerDiv"></div>

AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
</h1>
</body>
</html>


건투를 빕니다!






번호 제목 글쓴이 날짜 조회 수
공지 [TIP] PYTHON 에서 "UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 6987: illegal multibyte sequence" 오류 날때... [50] 파이팅건맨 2016.02.20 127621
공지 [TIP] R에서 페이스북 페이지 정보 크롤링 하기 [6] 파이팅건맨 2017.02.11 17055
공지 [TIP] TensorFlow를 윈도우에서 사용하기 (A way to use TensorFlow on Windows) [3] 파이팅건맨 2016.04.16 14899
13 [TIP] Node.js 에서 현재 기상정보 API 호출하기 파이팅건맨 2020.02.22 1929
12 [TIP] Windows UWP에서 시리얼 포트가 열리지 않을때 파이팅건맨 2019.11.08 990
» [TIP] 화면 스크롤시 HTML Element가 화면의 중간에 위치하면 감지하기 파이팅건맨 2019.10.03 1640
10 [TIP] Android에서 MS의 Face Rest API사용하기 (How to use the MS Face API on Android) 파이팅건맨 2019.07.16 614
9 [TIP] 아두이노에서 두근두근 Open API 호출하기 파이팅건맨 2019.06.04 1819
8 [TIP] 파이선에서 AWS Lambda API 호출시 Cognito 사용자 토큰으로 권한 확인하기 파이팅건맨 2018.06.11 1384
7 [TIP] Ajax에서 AWS Lambda Rest API CALL 하기 (How to call AWS Lambda API from Ajax) 파이팅건맨 2018.02.12 1008
6 [TIP] 각종 OAuth 로그인 예제 [6] 파이팅건맨 2018.01.30 1147
5 [TIP] 파이선에서 AWS Lambda로 만든 Restful API 호출하기 (How to call AWS Lambda Restful API from Python) 파이팅건맨 2018.01.23 739
4 [TIP] 아두이노에서 AWS Lambda로 제작한 Restful API 호출하기 (The way how to call AWS Lambda Restful API from Arduino) 파이팅건맨 2018.01.18 880
3 [TIP] 네이버 영화 정보와 전문가 평점 얻어오기 파이팅건맨 2017.02.10 6475
2 [TIP] 네이버 오픈 API를 로컬 PC에서 호출하기 파이팅건맨 2017.02.01 2940
1 [TIP] php로 기상청에서 제공하는 기상정보 API 호출하기 파이팅건맨 2017.01.17 8713
위로