테스트 사이트 - 개발 중인 베타 버전입니다

동영상 2개 연속재생 html 채택완료

동물원 1년 전 조회 4,157

<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개

채택된 답변
+20 포인트
1년 전

</p>

<p><script>

var tag = document.createElement('script');

tag.src = "<a href="https://www.youtube.com/iframe_api";" target="_blank" rel="noopener noreferrer">https://www.youtube.com/iframe_api";</a>

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);</p>

<p> </p>

<p>var players = [];

var player_idx = 0;</p>

<p> </p>

<p>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);

  });

}</p>

<p> </p>

<p>function onPlayerStateChange(event) {

  players.forEach((obj, i) => {

    if (obj == event.target) {

      player_idx = i;

    }

  });</p>

<p>  if (event.data == YT.PlayerState.ENDED) {

    player_idx = ++player_idx % players.length;

    players[player_idx].playVideo();

  }

}

</script>

 </p>

<p><div class="video-container">     

    <iframe id="Jh4QFaPmdss" width="1002" height="564" src="<a href="https://www.youtube.com/embed/Jh4QFaPmdss?enablejsapi=1&mute=1&autoplay=1&origin=http://yourdomain.tld"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/Jh4QFaPmdss?enablejsapi=1&mute=1&autoplay=1&origin=http://yourdomain.tld"</a> 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="<a href="https://www.youtube.com/embed/Amq-qlqbjYA?enablejsapi=1&mute=1&autoplay=0&origin=http://yourdomain.tld"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/Amq-qlqbjYA?enablejsapi=1&mute=1&autoplay=0&origin=http://yourdomain.tld"</a> title="동영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</div></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

동물원
1년 전
정말 감사합니다. 포기하고 있었는데, 이렇게 도움을 주셨네요.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인