[TIL] 23.10.12

video태그

// 소스 2개이상
<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>

// 소스 한개
<video src="/media/cc0-videos/flower.webm" controls width="250" />

태그 안의 순서대로 우선순위로 보여준다

• src: 여러개면 태그로, 한 개면 그냥 속성으로
• autoplay: 자동재생
• controls: 비디오 제어 컨트롤 제공
• loop: 반복 재생
• muted: 음소거 설정

webkit-mask-image

.camera .stage video {
  position: absolute;
  top: 36px;
  left: 76px;
  /* 비디오 기울어짐 표현을 위해 가려지는 부분적용 호환성을 위해 webkit도 작성 */
  -webkit-mask-image: url('../images/camera_video_mask.png');
  mask-image: url('../images/camera_video_mask.png');
}

js 재생 조절

play, pause로 재생조절 가능

const video = document.querySelector('.stage video')
const playBtn = document.querySelector('.stage .controller--play')
const pauseBtn = document.querySelector('.stage .controller--pause')

playBtn.addEventListener('click', () => {
  video.play() //비디오 태그는 play, pause로 재생조절 가능
  playBtn.classList.add('hide')
  pauseBtn.classList.remove('hide')
})
pauseBtn.addEventListener('click', () => {
  video.play()
  playBtn.classList.remove('hide')
  pauseBtn.classList.add('hide')
})

IntersectionObserver

화면 나가거나 들어올 때마다 콜백함수 실행한다

속성으로 target, isIntersecting있으며 관찰대상과 교차되는지를 보여준다.

// 요소의 가시성 관찰 로직(어떤 요소가 화면에 나오고 들어가는지)
//Intersection(교차)Observer(관찰): 화면 나가거나 들어올 때마다 콜백함수실행
// 관찰요소가 교차범위 변화가 있으면 안으로 들어오는 나가는지 확인해 show 클래스 붙여줌
//target은 관찰 대상이고, isIntersecting이 T면 화면 안, F면 화면 밖
const io = new IntersectionObserver(entries => {
  // entries는 `io.observe(el)`로 등록된 모든 관찰 대상 배열.
  entries.forEach(entry => {
    // 사라질 때.
    if (!entry.isIntersecting) {
      return
    }
    entry.target.classList.add('show')
  })
})
// 관찰할 요소들 검색
const infoEls = document.querySelectorAll('.info')
// 관찰 시작 IntersectionObserver.observe() 메서드는 주시대상 목록에 요소를 추가한다
infoEls.forEach(el => io.observe(el

class show를 사용해 화면에 교차할 때 애니메이션

.info {
  max-width: 330px;
  margin-bottom: 24px;
  transition: 1s;
  transform: translate(0, 100px);
  opacity: 0;
}
.info.show {
  transform: translate(0, 0);
  opacity: 1;
}