메뉴 건너뛰기

프로그래밍


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

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

스크롤을 통해 특정 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" 오류 날때... [34] 파이팅건맨 2016.02.20 69514
공지 [TIP] TensorFlow를 윈도우에서 사용하기 (A way to use TensorFlow on Windows) [3] 파이팅건맨 2016.04.16 11184
공지 [TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 파이팅건맨 2015.04.03 9426
164 [TIP] 외부 (PHP)코드에서 XE에 게시물 등록하기 파이팅건맨 2020.05.30 18
163 [TIP] Node.js 에서 현재 기상정보 API 호출하기 파이팅건맨 2020.02.22 106
162 [TIP] gcc 빌드중에 /usr/bin/ld: errno: TLS definition in /lib64/libc.so.6 section .tbss mismatches non-TLS reference in ... 와 같은 오류를 만났을 때 파이팅건맨 2019.11.25 260
161 [TIP] Windows UWP에서 시리얼 포트가 열리지 않을때 파이팅건맨 2019.11.08 600
» [TIP] 화면 스크롤시 HTML Element가 화면의 중간에 위치하면 감지하기 파이팅건맨 2019.10.03 466
159 [TIP] Visual Studio 2019 에서 (배포용)설치파일 만들기 파이팅건맨 2019.09.30 1879
158 [TIP] Android에서 MS의 Face Rest API사용하기 (How to use the MS Face API on Android) 파이팅건맨 2019.07.16 401
157 [TIP] Xcode에서 boost 사용하는 방법 파이팅건맨 2019.06.28 161
156 [TIP] 아두이노에서 두근두근 Open API 호출하기 파이팅건맨 2019.06.04 602
155 [TIP] AWS Lambda, API Gateway 를 이용하여 S3에 파일 업로드 하기 파이팅건맨 2018.06.12 1679
154 [TIP] 파이선에서 AWS Lambda API 호출시 Cognito 사용자 토큰으로 권한 확인하기 파이팅건맨 2018.06.11 957
153 [TIP] 파이선에서 AWS Cognito 에 Sign-up, Sign-in 하는 예제 파이팅건맨 2018.06.08 652
152 [TIP] Ajax에서 AWS Lambda Rest API CALL 하기 (How to call AWS Lambda API from Ajax) 파이팅건맨 2018.02.12 779
151 [TIP] 나만의 OpenAPI 배포 플랫폼 만들기 [6] 파이팅건맨 2018.01.30 1034
150 [TIP] 파이선에서 AWS Lambda로 만든 Restful API 호출하기 (How to call AWS Lambda Restful API from Python) 파이팅건맨 2018.01.23 555
149 [TIP] 파이선에서 서브프로세스를 실행시키고 출력되는 내용을 얻어오기 파이팅건맨 2018.01.22 3348
148 [TIP] 아두이노에서 AWS Lambda로 제작한 Restful API 호출하기 (The way how to call AWS Lambda Restful API from Arduino) 파이팅건맨 2018.01.18 682
147 [TIP] 파이선에서 Redis 이벤트 받기 파이팅건맨 2017.10.12 708
146 [TIP] 파이선에서 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position ... 오류 해결 방법 파이팅건맨 2017.09.29 1681
145 [TIP] The function size must be used with a prefix when a default namespace is not specified 오류 해결하기 파이팅건맨 2017.08.02 1791
위로