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

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

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

 

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

 

   
            
   
            
   
            

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

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

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

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

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 = 반복

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

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

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

로그인

전체 질문 목록

🐛 버그신고