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

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

QA

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

본문

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>
답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT