728x90
728x90
개요
웹사이트를 개발하다 보면 인트로나 페이지내부에 동영상을 넣는 경우가 있습니다.
영상이 끝난 후 이벤트가 발생했으면 할 때가 종종 있습니다.
그런 경우에 사용할 수 있는 방법입니다.
*youtube로 임베딩해온 영상은 해당이 되지 않습니다
HTML
- 동영상이 자동재생될 수 있도록 autoplay, muted 추가합니다.
<div class="wrap">
<div class="video-wrap">
<video id="video" autoplay controls muted playsinline class="normal-video">
<source id="normalloop1" src="main01.mp4" type='video/mp4'/>
</video>
</div>
</div>
CSS
- 비디오의 스타일을 적용시켜 줍니다.
.wrap {position:absolute;top:0;left:0;width:100%;height:100%;}
.video-wrap {position:relative;height:100%;background:#000;overflow:hidden;}
.video-wrap video {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;}
@media all and (max-width:1199px){
.video-wrap video {width:100%;height:auto;top:50%;left:0;transform:translate(0,-50%);}
}
JAVASCRIPT
- 비디오를 자동재생시켜주고 영상이 끝나고 어떤 행동을 할지 적어줍니다.
$(window).on("load",function(){
//윈도우 로드 시 비디오 플레이
$("#video").get(0).play();
//작동하는지 콘솔창에서 확인
console.log("test");
})
setInterval(function(){
if($("#video").prop("ended")){
//영상종료 후 어떤행동을 할건지 작성
location.href="/html/index/index.php";
}
},200);
반응형
'Code > Html' 카테고리의 다른 글
확장자 .htm과 .html의 차이점 (0) | 2023.01.04 |
---|---|
유튜브 썸네일 이미지 가져오기 (0) | 2022.12.08 |
리다이렉트(Redirect)의 다양한 사용법과 정의 (0) | 2022.11.15 |
버튼 이벤트 없애기 (0) | 2022.11.14 |
기본적인 모달창 만들기 (1) | 2022.11.09 |