유튜브앱에서 영상들을 스크롤하다 보면 화면의 중간에 위치했을 때 영상이 자동으로 재생됩니다.
이를 웹페이지에서 구현하기 위한 방법입니다.
스크롤을 통해 특정 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>
건투를 빕니다!
이 게시물이 | |
AiRPAGE가 |