Auto-pause video IntersectionObserver

by hohoya33

HTML

<div class="slide slide--intro">
<h1>Autoplay Muted Videos Demo</h1>
</div>


    <h2>autoplay 있음, muted 있음</h2>
    <video controls autoplay muted poster="http://ucc.ssgcdn.com/company/201902/856/6603786870549669401786_1024x570.jpg"><source src="http://ucc.ssgcdn.com/company/201902/856/6603786870549669401786_h.m4v" type="video/mp4"></video>

    <div class="video_post_title">보다 보면 흥이 쓱 날 걸 <br>섯씨구~</div>
    <div class="video_post_caption">섯씨구~ [얼씨구] 를 뜻하는 SSG語 <br> 최초로 9개 쇼핑몰이 한 곳에 모이자<br> 사람들은 자유롭게 넘나들며 방대한 혜택에 흥겨워 했다<br> SSG.COM의 넘치는 흥을 표현할 말이 현실에 없어<br> 새로 말을 만들다</div>



    <h2>autoplay 있음, muted 없음</h2>
    <video controls autoplay poster="http://ucc.ssgcdn.com/company/201902/666/2696730775349669485770_1024x570.jpg"><source src="http://ucc.ssgcdn.com/company/201902/666/2696730775349669485770_h.m4v" type="video/mp4"></video>

    <div class="video_post_title">일단 쓱 믿고 봐야 할걸 <br>싯슷기 솩~ 가세</div>
    <div class="video_post_caption">싯슷기 솩~ 가세? [믿음이 확 가네] 를 뜻하는 SSG語 <br> 백화점 상품은 비싸다는 편견  <br> 온라인 상품은 신뢰하기 힘들다는 편견
    <br> 이 모두를 깨뜨리는 SSG.COM의 용기를 칭송할 말이 없어<br> 새로 말을 만들다</div>

    <h2>playsinline있음, autoplay 있음, muted 있음</h2>

    <video playsinline controls autoplay muted poster="http://ucc.ssgcdn.com/company/201902/717/2793270227449669497220_1024x570.jpg"><source src="http://ucc.ssgcdn.com/company/201902/717/2793270227449669497220_h.m4v" type="video/mp4"></video>
    <div class="video_post_title">보고 나면 쓱 빠져들 걸 <br>식석갓세?</div>
    <div class="video_post_caption">식석갓세? [신선한데]를 뜻하는 SSG語 <br> 두부 한 모, 고기 한 근도 온도 맞춰 시간 맞춰 <br> 문 앞까지 정성껏 가져다 주는 쓱배송 <br> SSG.COM의 신선한 감동을 담을 감탄사가 세상에 없어 <br> 새로 말을 만들다</div>

    <h2>playsinline있음, autoplay 있음, muted 있음</h2>
    <video playsinline controls autoplay muted poster="http://ucc.ssgcdn.com/company/201902/764/8150562197249669477912_1024x570.jpg"><source src="http://ucc.ssgcdn.com/company/201902/764/8150562197249669477912_h.m4v" type="video/mp4"></video>

    <div class="video_post_title">보는 순간 소름이 쓱 돋을 걸! <br> 석! 새각,...

CSS

body{
    text-align: center;
    height: 2000px;
}

.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.slide--intro {
  flex-direction: column;
}


video{ width: 600px; margin-top: 50px; }
@media(max-width:620px){ video { width: 90vw; } }

JavaScript

let observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
  	let video =  entry.target;
 		//요소가 화면에 보이면
    if(entry.isIntersecting){
    	video.play();
    } else {
      video.pause(); 
    }
  });
}, {threshold: 1});


document.querySelectorAll('video').forEach(video => {
  observer.observe(video) 
});