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개
자바스크립트를 사용해서 제어하는 방법도 있으니 참고해 보세요
</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 = 반복
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인