메뉴 건너뛰기

프로그래밍


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

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

스크롤을 통해 특정 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" 오류 날때... [20] 파이팅건맨 2016.02.20 51414
공지 [TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 파이팅건맨 2015.04.03 8120
공지 [TIP] php로 기상청에서 제공하는 기상정보 API 호출하기 파이팅건맨 2017.01.17 5132
167 [TIP] gcc 빌드중에 /usr/bin/ld: errno: TLS definition in /lib64/libc.so.6 section .tbss mismatches non-TLS reference in ... 와 같은 오류를 만났을 때 파이팅건맨 2019.11.25 9
166 [TIP] Windows UWP에서 시리얼 포트가 열리지 않을때 파이팅건맨 2019.11.08 133
» [TIP] 화면 스크롤시 HTML Element가 화면의 중간에 위치하면 감지하기 파이팅건맨 2019.10.03 153
164 [TIP] Visual Studio 2019 에서 (배포용)설치파일 만들기 파이팅건맨 2019.09.30 302
163 [TIP] Android에서 MS의 Face Rest API사용하기 (How to use the MS Face API on Android) 파이팅건맨 2019.07.16 198
162 [TIP] Xcode에서 boost 사용하는 방법 파이팅건맨 2019.06.28 102
161 [TIP] 아두이노에서 두근두근 Open API 호출하기 파이팅건맨 2019.06.04 183
160 [TIP] AWS Lambda, API Gateway 를 이용하여 S3에 파일 업로드 하기 파이팅건맨 2018.06.12 792
159 [TIP] 파이선에서 AWS Lambda API 호출시 Cognito 사용자 토큰으로 권한 확인하기 파이팅건맨 2018.06.11 475
158 [TIP] 파이선에서 AWS Cognito 에 Sign-up, Sign-in 하는 예제 파이팅건맨 2018.06.08 483
157 [TIP] Ajax에서 AWS Lambda Rest API CALL 하기 (How to call AWS Lambda API from Ajax) 파이팅건맨 2018.02.12 614
156 [TIP] 나만의 OpenAPI 배포 플랫폼 만들기 [6] 파이팅건맨 2018.01.30 794
155 [TIP] 파이선에서 AWS Lambda로 만든 Restful API 호출하기 (How to call AWS Lambda Restful API from Python) 파이팅건맨 2018.01.23 444
154 [TIP] 파이선에서 서브프로세스를 실행시키고 출력되는 내용을 얻어오기 파이팅건맨 2018.01.22 1681
153 [TIP] 아두이노에서 AWS Lambda로 제작한 Restful API 호출하기 (The way how to call AWS Lambda Restful API from Arduino) 파이팅건맨 2018.01.18 560
152 [TIP] 파이선에서 Redis 이벤트 받기 파이팅건맨 2017.10.12 597
151 [TIP] 파이선에서 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position ... 오류 해결 방법 파이팅건맨 2017.09.29 1382
150 [TIP] The function size must be used with a prefix when a default namespace is not specified 오류 해결하기 파이팅건맨 2017.08.02 1347
149 [TIP] 페이스북 개인 담벼락의 좋아요수 크롤링하기 파이팅건맨 2017.07.15 1086
148 [TIP] 자바스크립트와 PHP코드간에 암호화 통신하기 (Encrypt with Javascript, Decrypt with PHP) [2] 파이팅건맨 2017.03.16 2549
위로