스크롤로 비디오 제어하기
- video 화질 - 용량에 따라 자연스러운 애니메이션에 영향을 많이 끼친다.
- video scroll 예시 저화질
- video scroll 예시 고화질
인터넷 동영상에 스크롤에 의한 비디오 인터렉션 코드가 올라와 있는 것들이 있는데, 이는 대부분 저화질 비디오만을 대상으로 한다.
고화질 비디오는 버벅거림이 심하다.
loadeddata: 해당 엘리먼트가loadeddata이벤트를 발생시킬 때까지 기다린다.
비디오가 플레이 준비가 된 상태에서 발생하는 이벤트라고 생각하면 된다.
다른 이벤트로canplaythrough이벤트가 있다.
그런데canplaythrough같은 경우는 비디오의 현재진행시간을 조정하면, 그때마다 계속 발생하는 이벤트라서 딱 한번만 이벤트를 걸기 위해선loadeddata이벤트가 좋다.- video 객체의
duration속성 : 해당 영상의 전체 재생시간을 뜻한다. (초단위) - video 객체의
currentTime속성 : 해당 영상의 현재 재생시점을 뜻한다. (초단위)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 500vh;
}
body.before-load {
overflow-y: hidden;
}
.sample-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body class="before-load">
<!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video>-->
<video class="sample-video" src="../video/sample-high.mp4" muted></video>
<script>
const videoElem = document.querySelector('.sample-video');
let progress;
let currentFrame;
function init() {
document.body.classList.remove('before-load');
window.addEventListener('scroll', function () {
progress = pageYOffset / (document.body.offsetHeight - window.innerHeight);
console.log(progress);
// 바운스 현상을 대비한 안전장치
if (progress < 0) progress = 0;
if (progress > 1) progress = 1;
// videoElem.duration 비디오 전체 재생시간 : 초단위
videoElem.currentTime = videoElem.duration * progress;
});
}
window.addEventListener('load', init);
</script>
</body>
</html>