JAVASCRIPT|jQuery JavaScript로 동영상을 연속 재생하는 배너 (onended 이벤트)
페이지 정보
조회 193회
작성일 20-04-29 09:40
여러 개의 동영상을 순서대로 연속 재생하는 메인 배너 구현 예제다. video 태그의 onended 이벤트로 현재 영상이 끝나면 다음 영상이 자동 재생되도록 하고, 하단 닷(dot) 버튼을 클릭하면 해당 영상으로 이동해 재생한다. 배너 레이아웃 CSS와 jQuery 제어 코드를 포함한 전체 예제를 제공한다.
<style>
#video-box {min-width:1200px; position:relative;}
#video-box .main-banner {display:none; width:100%; height:750px; overflow:hidden;position:relative; background-color:#000;}
#video-box .main-banner.open{display:block;}
#video-box .main-banner video {position:absolute;width:100%;top:50%; left:50%;transform:translate(-50%,-50%);border:0;}
#video-box .dot-box {position:absolute; width:100%; bottom:0; text-align:center;}
#video-box .dot-box a{display:inline-block; margin:0.5em; width:20px;height:20px; border-radius:50%; background-color:#06F;text-indent:-9999px;}
#video-box .dot-box a.open{background-color:yellowgreen;}
@media screen and (max-width:1400px) { #video-box .main-banner {height:550px;} }
</style>
<div id="video-box">
<div class="main-banner open">
<video autoplay muted>
<source src="https://www.bodyfriend.co.kr/video/1.mp4" type="video/mp4">
</video>
</div>
<div class="main-banner">
<video muted>
<source src="https://www.bodyfriend.co.kr/video/main02.mp4" type="video/mp4">
</video>
</div>
<div class="main-banner">
<video muted>
<source src="https://www.bodyfriend.co.kr/video/main03.mp4" type="video/mp4">
</video>
</div>
<div class="dot-box"></div>
</div>
<script>
$(function() {
var len = $('.main-banner').length
$('.main-banner').each(function(index, element) {
$(this).addClass('v' + index);
var video = $(this).find('video')[0];
video.onended = function(e) {
$('.main-banner').removeClass('open');
$('.main-banner.v'+((index+1) % len)).addClass('open');
$('.main-banner.v'+((index+1) % len)).find('video')[0].play();
$('#video-box a.dot').removeClass('open');
$('#video-box a.dot.v'+((index+1) % len)).addClass('open');
};
$('#video-box .dot-box').append('<a href="#" class="dot v'+index+'" data-idx="'+index+'">'+(index+1)+'번째 비디오</a>');
});
$('#video-box a.dot').click(function(e) {
var idx = $(this).data('idx');
$('.main-banner.open').find('video')[0].pause();
$('.main-banner').removeClass('open');
$('.main-banner.v'+(idx % len)).addClass('open');
$('.main-banner.v'+(idx % len)).find('video')[0].play();
$('#video-box a.dot').removeClass('open');
$('#video-box a.dot.v'+(idx % len)).addClass('open');
});
$('#video-box a.dot.v0').addClass('open');
});
</script>