Chrome의 자동 재생성(EOTD No.8)

이거 아메타!이번에는 EOTD(Error Of The Day)의Numero8이다.

오늘의 잘못

장면

오늘의 오류는 비디오를 배경에 삽입할 때 발생한 것입니다.
HTML에 비디오 태그 추가

  <video id="video" autoplay loop>
    <source src="/assets/family_cooking.mp4" type="video/mp4">
  </video>

CSS는 다음과 같습니다.

#video{
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -100;
}

이상의 코드가 대상의 페이지를 열면 애니메이션이 아니라 정지화입니다...

얼마가 지나도 움직이지 않는다.autoplay에서 자동 재생성으로 설정할 수 있는데...

고찰하다.

이번에는 바로 같은 사람의 문제를 발견했다!
https://stackoverflow.com/questions/49822790/html5-video-autoplay-not-working
이 사용자는 video 요소의 옵션에 controls 및 autoplay를 지정했습니다.
Depending on your Chrome version you might get the new implementation of video autoplay rules:

Muted autoplay is always allowed.

해결하다

이상의 답변에서 보듯이 autoplay 외에 muted의 옵션을 설정해야 한다.

<!--videoタグにmutedを追加-->
  <video id="video" muted autoplay loop>
    <source src="/assets/family_cooking.mp4" type="video/mp4">
  </video>

브라우저에서 다시 확인한 다음에...성공!
크롬 자동 재생 애니메이션으로 채우려면 autooplay 이외에 옵션의muuted를 설정합니다.
하지만 기술하지 않더라도muted 자동 재생이 가능한 경우는 몇 가지 있다.

SOTD(Summary Of The Day)

오늘은 영상을 끼워 넣은 후 스펀지 모양으로 변하기 위해 css와 격투를 벌였지만 도저히 뜻대로 되지 않았다.
서버 쪽을 설치할 때처럼 오류 문장이 나를 인도하지 않아서 어디에 오류가 있는지 판단하기 어렵다고 느꼈다.
그리고 어떤 곳이 자기 생각대로 갔다고 생각하면 다른 곳은 어긋난다.

앞부분은 단계를 거쳐 자세하게 확인해야 한다.오늘의 공부.