동영상 2개 연속재생 html
본문
<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>
정말 감사합니다. 포기하고 있었는데, 이렇게 도움을 주셨네요.
답변을 작성하시기 전에 로그인 해주세요.