그누보드 QA - frame_api 스크롤 동영상 제어 관련

frame_api 스크롤 동영상 제어 관련

2023.02.02 19:59:47 조회 1002 (222.♡.♡.80)

본문


<script>
        var player;
            function onYouTubeIframeAPIReady() {
              player = new YT.Player(
                 'player1', {
                  videoId: 'Jh4QFaPmdss', // 영상 고유 주소
                  playerVars:{
                        rel:0 //관련영상 표시하지 않기.
                    }
                }
              );
              player = new YT.Player(
                 'player2', {
                  videoId: 'Jh4QFaPmdss', // 영상 고유 주소
                  playerVars:{
                        rel:0 //관련영상 표시하지 않기.
                    }
                }    
              );    
            }
        /* scroll event */
        window.onload = function() {
          var wh = window.innerHeight;
          var htmlTop = document.querySelector('html').scrollTop;
          var youtubeTop = document.querySelector('#player1').offsetTop;
          var youtubeBottom = youtubeTop + wh;
          var youtubeHeight = document.querySelector('#player1').offsetHeight;
          window.addEventListener('scroll', function() {
            htmlTop = document.querySelector('html').scrollTop;
            var htmlBottom = wh + htmlTop;
            youtubeHeight = document.querySelector('#player1').offsetHeight;
            if (htmlBottom > youtubeTop && htmlBottom < youtubeTop + wh + youtubeHeight) {
              // player.unMute();
              player.playVideo();
            } else {
              player.pauseVideo();
            }
          })
          
        }
 </script>


<div id="player1"></div>
<div id="player2"></div>

스크롤로 삽입된 동영상 재생/일시정지를 실행하는 데 1개의 영상일때는되는데 2개일때는 변수추가해도 안되어서 헤매고있습니다. 여러개 제어하려면 어떻게 해야하나요? 도움요청드립니다. 아니면 다른 방법이 있을까요?

#frameapi #스크롤제어

답변 4

예뜨락 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-02-03 14:28:08 58.♡.♡.136

아래의 코드대로 해보세요 직접 해보구 이상 없이 동작해서 올립니다

원본을 통한 구조로 사용해야 이해하시기에 편할듯 해서 붙여 넣기만 했습니다

두개 이상 다수의 여러개를 사용해야 한다면 for문등으로 조금 개조하구 배열등을 사용해서 소스를 줄여

사용하시는게 편할듯 합니다

이하 소스

-------------------------------------------------------------------------------------------------------------


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
</head>
<body>
<style>
body { background: #333; }
.margin { padding: 500px 0; background: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent) center / 50px 50px, linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent) center / 50px 50px; }
#player1 { display: block; margin: 500px auto; }
#player2 { display: block; margin: 500px auto; }
</style>
<script>
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 player1;
var player2;
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player(
        'player1', {
            videoId: 'Jh4QFaPmdss', // 영상 고유 주소
        }
    );
    player2 = new YT.Player(
        'player2', {
            videoId: 'VNYEHXsehTg', // 영상 고유 주소
        }
    ); 
}
/* scroll event */
window.onload = function() {
    var wh             = window.innerHeight;
    var htmlTop        = document.querySelector('html').scrollTop;

    var youtubeTop1    = document.querySelector('#player1').offsetTop;
    var youtubeBottom1 = youtubeTop1 + wh;
    var youtubeHeight1 = document.querySelector('#player1').offsetHeight;
    var youtubeTop2    = document.querySelector('#player2').offsetTop;
    var youtubeBottom2 = youtubeTop2 + wh;
    var youtubeHeight2 = document.querySelector('#player2').offsetHeight;

    window.addEventListener('scroll', function() {
        htmlTop = document.querySelector('html').scrollTop;
        var htmlBottom = wh + htmlTop;
        youtubeHeight1 = document.querySelector('#player1').offsetHeight;
        youtubeHeight2 = document.querySelector('#player2').offsetHeight;
        if (htmlBottom > youtubeTop1 && htmlBottom < youtubeTop1 + wh + youtubeHeight1) {
            // player1.unMute();
            player1.playVideo(); 
        } else {
            player1.pauseVideo();
        }
        if (htmlBottom > youtubeTop2 && htmlBottom < youtubeTop2 + wh + youtubeHeight2) {
            // player1.unMute();
            player2.playVideo(); 
        } else {
            player2.pauseVideo();
        }
    });
}
</script>
<div class="margin">
  <div id="player1"></div> 
  <div id="player2"></div> 
</div>

</body>
</html>

예뜨락 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-02-02 21:55:04 58.♡.♡.136

보통 여러개를 재어할 경우는 아이디 보다는 클래스 또는 name으로 접근하는게 편합니다

<div id="player1" class="youtube_player"></div> <div id="player2" class="youtube_player"></div>

위와 같이 클래스를 추가하고

자바스크립트 소스 안에 들어간


document.querySelector('#player1')

위의 소스를


document.querySelector('.youtube_player')

위의 소스로 바꿔서 해보세요

바로 된다고는 할수 없습니다 직접 소스를 실행해 보지는 않았으니

다만 본문에 쓰신 내용으로는 하나의 아이디만 제어하게 소스가 되어 있으니

클래스로 바꾼 이후에는 일종의 변화는 있을 겁니다

↳ 하로데스 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-02-02 22:46:53222.♡.♡.80

클래스로 바꿔도 변수르 다르게 저장한것 처럼 둘다 안되네요 ㅜㅜ

↳ 하로데스 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-02-02 22:59:43222.♡.♡.80

html
----------------------------
<div class="margin">
<div id="player"></div>
</div>
----------------------------

css
----------------------------
body { background: #333; }
.margin { padding: 4000px 0; background: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent) center / 50px 50px, linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent) center / 50px 50px; }
#player { display: block; margin: auto; }
----------------------------

script
----------------------------
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 player;

function onYouTubeIframeAPIReady() {
player = new YT.Player(
'player', {
videoId: 'Jh4QFaPmdss', // 영상 고유 주소
}
);
}

/* scroll event */
window.onload = function() {
var wh = window.innerHeight;
var htmlTop = document.querySelector('html').scrollTop;
var youtubeTop = document.querySelector('#player').offsetTop;
var youtubeBottom = youtubeTop + wh;
var youtubeHeight = document.querySelector('#player').offsetHeight;

window.addEventListener('scroll', function() {
htmlTop = document.querySelector('html').scrollTop;
var htmlBottom = wh + htmlTop;
youtubeHeight = document.querySelector('#player').offsetHeight;

if (htmlBottom > youtubeTop && htmlBottom < youtubeTop + wh + youtubeHeight) {
// player.unMute();
player.playVideo();
} else {
player.pauseVideo();
}
})
}
----------------------------

원본코드인데 2개이상 하려니 안되네요ㅡㅡ