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

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

ㅐ늑대ㅐ 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.01.21 04:31:48 1004 (119.♡.♡.122)

답변 3

본문

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

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

#그누보드5 #그누보드4 #php

답변 3

웹메이킹 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-01-21 11:53:14 118.♡.♡.157

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


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