이런! 영상을 넣어달라고 요청을 받았는데, 전달받은 영상이 150MB에요! 이걸 그대로 넣을 순 없겠죠?
범용적인 영상 인코더 Handbrake 다운로드.
일단 원본 파일을 열어주세요!
메타데이터를 전부 앞으로 옮겨서 전체를 다운받지 않아도 재생이 가능하게 합니다.
어차피 muted 상태로 재생할 건데, 지우면 용량도 더 작아집니다. 파일 내용 지우기를 눌러주세요!
예를 들어, 우리 사이트는 최대 너비가 500px인데, 굳이 너비 1920px의 영상을 넣을 필요가 없겠죠?
해상도 제한: 없음, 아나모픽: None, Optimal Size: 체크 해제해줍니다.
그 후에 자동을 체크 해제하고, 원하는 너비를 입력하고 다시 자동을 체크해주면 종횡비에 맞게 해상도를 지정해줍니다.
여기까지 세팅한 후, 인코딩을 해봅시다.
크기가 20MB까지 줄었습니다! 그래도 웹에서 쓰기는 좀 그렇죠. 그럴때는 임의로 화질을 내려서 인코딩해봅시다.
비디오 에서 해당 값을 올릴 수록 화질이 내려갑니다. 크기와 화질을 동시에 만족하는 타협점을 찾아서 계속 인코딩해보세요!
VP9은 구글의 고효율 비디오 코덱입니다. MP4보다 압축률이 좋고, 지원도 빠방합니다. 정말 가끔가다가, 상업 라이센스를 다 빼버려서 MP4를 지원 안하는 브라우저에 넣기도 좋고요.
전세계 지원 97% 이상입니다!
AV1은 VP9보다는 지원이 적지만, 더 고효율의 코덱입니다.
작업은 간단합니다. 아까 작업한 것과 똑같이 세팅하고 형식을 WebM으로 바꾸어줍니다.
VP9은 29~31, AV1은 30~32정도가 적당합니다.
이대로 넣는다면 로딩 중에는 아무것도 보이지 않습니다. 로딩 중에 썸네일도 보여줘야겠죠?
ffmpeg -i <input> -vf "select=eq(n\,0)" -vframes 1 out.webp0번째 프레임을 webp로 저장하는 커맨드입니다.
<video
autoplay
loop
muted
playsinline
preload="auto"
poster="/thumbnail.webp"
>
<source src="/video.webm" type="video/webm" />
<source src="/video.mp4" type="video/mp4" />
</video>영상이 로딩 중일 때는 thumbnail.webp를 표시하고, 지원하는 영상 타입을 찾으면 그 영상을 로딩합니다. (순서대로 우선권이 부여됩니다)