동영상 2개 연속재생 html

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
동영상 2개 연속재생 html

QA

동영상 2개 연속재생 html

답변 1

본문

<div class="video-container">     
    <iframe width="1002" height="564" src="https://www.youtube.com/embed/동영상ID" title="동영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div> 

 

위의 소스를 활용해서 메인페이지에서 동영상을 보이게 하고 있는데요.

동영상을 2개 넣고 싶은 경우 (2개가 순차적으로 반복재생 / A-B-A-B 이렇게요.) 

 

어떻게 적용하면 될까요?

 

 

이 질문에 댓글 쓰기 :

답변 1


<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 players = [];
var player_idx = 0;
 
function onYouTubeIframeAPIReady() {
  document.querySelectorAll('.video-container iframe').forEach((el, i) => {
    var ytplayer = new YT.Player(el.id, {
      videoId: el.id,
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
    players.push(ytplayer);
  });
}
 
function onPlayerStateChange(event) {
  players.forEach((obj, i) => {
    if (obj == event.target) {
      player_idx = i;
    }
  });
  if (event.data == YT.PlayerState.ENDED) {
    player_idx = ++player_idx % players.length;
    players[player_idx].playVideo();
  }
}
</script>
 
<div class="video-container">     
    <iframe id="Jh4QFaPmdss" width="1002" height="564" src="https://www.youtube.com/embed/Jh4QFaPmdss?enablejsapi=1&mute=1&autoplay=1&origin=http://yourdomain.tld" title="동영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <iframe id="Amq-qlqbjYA" width="1002" height="564" src="https://www.youtube.com/embed/Amq-qlqbjYA?enablejsapi=1&mute=1&autoplay=0&origin=http://yourdomain.tld" title="동영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로