frame_api 스크롤 동영상 제어 관련

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    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개일때는 변수추가해도 안되어서 헤매고있습니다. 여러개 제어하려면 어떻게 해야하나요? 도움요청드립니다.  아니면 다른 방법이 있을까요?

    #frameapi #스크롤제어

    이 질문에 댓글 쓰기 :

    답변 4

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

    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>
     

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

    58.♡.♡.136

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

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

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

     

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

    

    document.querySelector('#player1')
    

위의 소스를

    

    document.querySelector('.youtube_player')
    

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

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

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

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

     

     

     

     

    하로데스님의 댓글
    ↳ 하로데스 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색
    222.♡.♡.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개이상 하려니 안되네요ㅡㅡ

    블랙캣77 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    121.♡.♡.209

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

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

    58.♡.♡.136

    제어 조건이 어떻게 되나요

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

    답변을 작성하시기 전에 로그인 해주세요.
    전체 123,499 | RSS
    QA 내용 검색

    회원로그인

    인기태그
    #그누보드5(59493) #영카트5(16774) #php(14946) #그누보드4(10631) #게시판(3154) #javascript(2632) #그누보드(2343) #css(2042) #mysql(1505) #모바일(1271) #영카트(1270) #그누커머스(1178) #html(1098) #jquery(1012) #자바스크립트(935) #최신글(930) #DB(818) #로그인(791) #이미지(762) #여분필드(736)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT