<!----CSS---->
<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>
<!----HTML---->
<body>
<video class="sample-video" src="../video/test.mp4" muted></video>
</body>
<!----JAVASCRIPT : <body></body>안에 <script></script>로 넣어줍니다.---->
const videoElem = document.querySelector('.sample-video');
let progress-ratio;
let currentFrame;
function init() {
document.body.classList.remove('before-load');
window.addEventListener('scroll', function () {
progress-ratio = pageYOffset / (document.body.offsetHeight - window.innerHeight);
console.log(progress-ratio);
if (progress-ratio < 0) progress-ratio = 0;
if (progress-ratio > 1) progress-ratio = 1 ;
videoElem.currentTime = videoElem.duration * progress-ratio;
});
}
window.addEventListener('load', init);
'about web' 카테고리의 다른 글
| [홈페이지구축시] 자주사용하는 툴 (0) | 2020.06.24 |
|---|---|
| 오픈소스 플레이어 VLC로 프레임 추출하기 (0) | 2020.06.24 |
| 홈페이지 최적화하기 (0) | 2020.06.23 |
| [JavaScript] 옛날 영화상영을 연상케하는 '고화질' 비디오 재생하기 (0) | 2020.06.09 |
| [JavaScript] Babel - 자바스크립트 컴파일러 사용법 (0) | 2020.05.22 |