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

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

ㅐ늑대ㅐ 1년 전 조회 3,477

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개

채택된 답변
+20 포인트

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

 

</p>

<p><div>

    <div>

        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="<a href="https://www.youtube.com/embed/t9weuifsIaU?enablejsapi=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/t9weuifsIaU?enablejsapi=1"</a> style="height:100%;"></iframe>

    </div>

    <div>

        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="<a href="https://www.youtube.com/embed/hTphOKyfc9E?enablejsapi=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/hTphOKyfc9E?enablejsapi=1"</a> style="height:100%;"></iframe>

    </div>

    <div>

        <iframe class="video" scrolling="no" frameborder="0" width="100%" src="<a href="https://www.youtube.com/embed/JiuCxkA2B_I?enablejsapi=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/JiuCxkA2B_I?enablejsapi=1"</a> style="height:100%;"></iframe>

    </div>

</div></p>

<p><script>

document.addEventListener("DOMContentLoaded", function () {

    var videos = document.getElementsByClassName("video");

    var currentPlayer;</p>

<p>    // 각 동영상 iframe에 이벤트 리스너 추가

    for (var i = 0; i < videos.length; i++) {

        videos[i].addEventListener("load", function () {

            var player = new YT.Player(this, {

                events: {

                    'onStateChange': onPlayerStateChange

                }

            });

        });

    }</p>

<p>    function onPlayerStateChange(event) {

        // 동영상이 재생 중이면

        if (event.data == YT.PlayerState.PLAYING) {

            // 현재 재생 중인 동영상이 있으면 중지

            if (currentPlayer && currentPlayer != event.target) {

                currentPlayer.stopVideo();

            }

            currentPlayer = event.target;

        }

    }

});

</script>

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

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

1년 전

https://developers.google.com/youtube/iframe_api_reference?hl=ko 해당을 참고해서 api로 만들면 가능하실겁니다. 

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

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

덜덜렁이

src="https://youtu.be/t9weuifsIaU?si=FKS23j0F6KqJ4LTJ?autoplay=1&mute=1&loop=1"

autoplay = 자동 재생

mute = 소리

loop = 반복

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

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

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

로그인