frame_api 스크롤 동영상 제어 관련

frame_api 스크롤 동영상 제어 관련

QA

frame_api 스크롤 동영상 제어 관련

본문


<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개일때는 변수추가해도 안되어서 헤매고있습니다. 여러개 제어하려면 어떻게 해야하나요? 도움요청드립니다.  아니면 다른 방법이 있을까요?

이 질문에 댓글 쓰기 :

답변 4

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

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

 

두개 이상 다수의 여러개를 사용해야 한다면 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>
 

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

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

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

 

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

document.querySelector('#player1')
위의 소스를
document.querySelector('.youtube_player')
위의 소스로 바꿔서 해보세요

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

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

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

 

 

 

 

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개이상 하려니 안되네요ㅡㅡ

두 개다 player네요 저장하는 변수를 player1 player2 등으로 해보세요

제어 조건이 어떻게 되나요

화면 안에 있으면  자동 재생되고 화면 밖으로 나가면 뮤트 되는건가요

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT