티스토리 뷰

반응형

video tag scroll play 비디오 태그 사용시 스크롤로 플레이 제어 !! 

var videos = document.getElementsByTagName("video");
 
 var fraction = 0.4;
 function checkScroll() {

     for(var i = 0; i < videos.length; i++) {

         var video = videos[i];
   
         var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
             b = y + h, //bottom
             visibleX, visibleY, visible;

             visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
             visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

             visible = visibleX * visibleY / (w * h);
    
             if (visible > fraction) {              
                 video.play();
             } else {
                 video.pause();
             }

     }

 }

 window.addEventListener('scroll', checkScroll, false);
 window.addEventListener('resize', checkScroll, false);
 

반응형