멀티미디어: 비디오

평균적인 웹사이트는 비디오에서 25%의 대역폭을 사용합니다. 비디오를 최적화하는 것은 대역폭을 크게 아낄 수 있고, 더 나은 웹 성능으로 이어질 수 있습니다.

아래 섹션에서는 다음과 같은 최적화 기법에 대해 설명합니다.

• 모든 비디오를 압축하기
• <source> 순서 최적화
• 비디오 자동 재생
• 음 소거된 영웅 비디오에서 소리 제거하기
• 비디오 미리 불러오기
• 스트리밍 고려하기

대부분의 비디오 압축은 비디오 내의 인접한 프레임을 비교하여 두 프레임에서 동일한 부분을 의도적으로 제거하는 것입니다. 동영상을 압축하고 WebM, MPEG-4/H.264, Ogg/Theora등 여러 비디오 포맷으로 내보낼 수 있습니다.

비디오 편집 소프트웨어는 파일 크기를 줄일 수 있는 기능이 있을 것입니다. 만약 그렇지 않다면, FFmpeg같은 (아래 섹션에서 설명됩니다) 인코드, 디코드, 변환 및 다른 최적화 기능들을 수행하는 온라인 도구가 있습니다.

비디오 소스의 순서를 작은 것부터 큰 것으로 정렬하세요. 예를 들어, 10MB, 12MB, 13MB의 세 가지 다른 형식의 동영상 압축이 주어지면 가장 작은 것을 먼저 선언하고 가장 큰 것을 마지막으로 선언합니다.

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>

브라우저는 이해할 수 있는 첫 번째 형식을 먼저 다운로드 합니다. 목표는 큰 버전보다 작은 버전을 먼저 제공하는 것입니다. 가장 작은 버전을 사용하면, 압축된 비디오가 여전히 잘 보이는지 확인합니다. 일부 압축 알고리즘은 동영상을 animated GIF처럼 (좋지 않게) 보이게 만들 수 있습니다. 128Kb 비디오는 10MB 다운로드보다 더 나은 사용자 경험을 제공하는 것처럼 보일 수 있지만, 거친 GIF 같은 비디오는 브랜드 또는 프로젝트에 악영향을 끼칠 것입니다.

CanIUse.com에서 현재 브라우저의 비디오 및 다른 미디어 타입들의 지원을 확인하세요.

반복되는 배경 동영상이 자동 재생되도록 하려면 비디오에 반드시 autoplay, muted 및 playsinline 같은 몇몇 속성들을 추가해야 합니다.

<video
  autoplay=""
  loop=""
  muted="true"
  playsinline=""
  src="backgroundvideo.mp4"></video>

loop 및 autoplay는 비디오를 반복하고 자동재생 하는것에 적합하지만, muted 속성은 모바일 브라우저에서 자동재생에 필요한 속성입니다.

Playsinline은 모바일 Safari에 필요합니다. 전체화면 모드를 강제하지 않고 비디오를 실행시킬 수 있습니다.

영웅 동영상이나 오디오가 없는 동영상의 경우, 오디오를 제거하는것이 현명합니다.

<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
  <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web_banner.mp4" type="video/mp4" />
</video>

위에 있는 영웅 비디오 코드는 컨퍼런스 웹사이트와 기업 홈페이지에서 일반적으로 사용됩니다. 자동 재생, 반복 및 음 소거를 포함하는 비디오 입니다. 제어할 수 있는 인터페이스가 없어서 오디오를 들을 수 있는 방법이 없습니다. 오디오는 종종 비어있지만 여전히 존재합니다. 그리고 대역폭을 사용합니다. 항상 음 소거가 되어있는 비디오에 오디오를 제공할 이유가 없습니다. 오디오를 제거하는것은 20%의 대역폭을 절약할 수 있습니다

선택한 소프트웨어에 따라, 내보내기 및 압축 중에 오디오를 제거할 수도 있습니다. 그렇지 않다면 무료 유틸리티 FFmpeg 을 사용할 수 있습니다. 아래 예시는 오디오를 제거하기 위한 일반적인 FFmpeg 명령어입니다.

ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4

preload 속성에는 auto|metadata|none라는 3개의 가능한 옵션이 있습니다. 기본 설정은 metadata입니다. 이러한 설정들은 페이지를 불러올 때 얼마나 많은 비디오 파일을 다운로드 할지 제어합니다. 인기가 낮은 비디오들의 다운로드를 연기하여 데이터를 절약할 수 있습니다.

preload="none"으로 설정하는 것은 재생하기 전까지 비디오를 다운로드 하지 않는 속성입니다. 시작이 지연되기는 하지만, 실행 확률이 낮은 비디오의 경우 상당한 양의 데이터를 절약할 수 있습니다.

대역폭을 조금 더 절약할 수 있는 preload="metadata"로 설정하는것은 페이지를 불러올 때 비디오의 3%까지만 다운로드 할 수 있습니다. 이 옵션은 작거나 일반 크기의 일부 파일들에 유용합니다.

설정을 auto로 바꾸는 것은 브라우저가 자동으로 전체 비디오를 다운로드하게 합니다. 재생이 매우 자주 일어날 것 같을 때 사용하세요. 그렇지 않으면 대역폭을 많이 낭비하게 됩니다.

비디오 스트리밍을 사용하면 적절한 비디오 크기와 대역폭을 (네트워크 속도에 기반해서) 최종 사용자에게 전달할 수 있습니다. 반응형 이미지와 비슷하게, 올바른 크기의 비디오가 브라우저에 전달되고 빠른 시작, 낮은 버퍼링 및 최적화된 재생을 보장해 줍니다.

비디오를 최적화하는 것은 웹 성능을 상당히 개선할 수 있는 잠재력을 가지고 있습니다. 비디오 파일들은 상대적으로 다른 웹사이트 파일에 비해 용량이 커서 항상 주의가 필요합니다. 이 기사는 파일 크기를 줄이고, (HTML) 다운로드 설정 및 스트리밍을 통해서 어떻게 웹사이트 비디오를 최적화할 수 있는지 설명합니다.

page(Doc) not found /ko/docs/Learn/Performance/javascript_performance