iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게 할방법 있나요?

iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게 할방법 있나요?

QA

iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게 할방법 있나요?

답변 3

본문

iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게하려고 합니다

 

동영상1 재생중일대 동영상2를 재생클릭 하면은 동여상1은 중지 되고 동영상2만 재생 되게 하고십습니다

 

<div>
    <div>
        <iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/t9weuifsIaU?si=FKS23j0F6KqJ4LTJ" style="height:100%;"></iframe>
    </div>
    <div>
        <iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/hTphOKyfc9E?si=NYU4fDAWGmVQGCWX" style="height:100%;"></iframe>
    </div>
    <div>
        <iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/JiuCxkA2B_I?si=gRSaqYBzF7lGXhdI" style="height:100%;"></iframe>
    </div>
</div>

이 질문에 댓글 쓰기 :

답변 3

자바스크립트를 사용해서 제어하는 방법도 있으니 참고해 보세요

 


<div>
    <div>
        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/t9weuifsIaU?enablejsapi=1" style="height:100%;"></iframe>
    </div>
    <div>
        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/hTphOKyfc9E?enablejsapi=1" style="height:100%;"></iframe>
    </div>
    <div>
        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/JiuCxkA2B_I?enablejsapi=1" style="height:100%;"></iframe>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    var videos = document.getElementsByClassName("video");
    var currentPlayer;
    // 각 동영상 iframe에 이벤트 리스너 추가
    for (var i = 0; i < videos.length; i++) {
        videos[i].addEventListener("load", function () {
            var player = new YT.Player(this, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        });
    }
    function onPlayerStateChange(event) {
        // 동영상이 재생 중이면
        if (event.data == YT.PlayerState.PLAYING) {
            // 현재 재생 중인 동영상이 있으면 중지
            if (currentPlayer && currentPlayer != event.target) {
                currentPlayer.stopVideo();
            }
            currentPlayer = event.target;
        }
    }
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 10,639
© SIRSOFT
현재 페이지 제일 처음으로