about web

스크롤로 비디오 제어하기

by_past 2020. 6. 4. 18:44

<!----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);