이미지 요소와 마찬가지로 동영상을 지연 로드할 수도 있습니다. 동영상은 일반적으로 <video> 요소로 로드됩니다 (<img>를 사용하는 대체 방법이 제한적으로 구현됨). 하지만 <video>를 지연 로드하는 방법은 사용 사례에 따라 다릅니다. 각각 다른 솔루션이 필요한 몇 가지 시나리오를 살펴보겠습니다.
자동재생되지 않는 동영상
사용자가 재생을 시작한 동영상 (즉, 자동재생되지 않는 동영상)의 경우 <video> 요소에 preload 속성을 지정하는 것이 좋습니다.
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
위의 예에서는 값이 none인 preload 속성을 사용하여 브라우저가 어떤 동영상 데이터도 미리 로드하지 않도록 합니다. poster 속성은 동영상이 로드되는 동안 공간을 차지할 자리표시자를 <video> 요소에 제공합니다. 동영상 로드의 기본 동작이 브라우저마다 다를 수 있기 때문입니다.
- Chrome에서
preload의 기본값은auto이었지만 Chrome 64부터는 이제 기본값이metadata입니다. 그렇더라도 데스크톱 버전의 Chrome에서는Content-Range헤더를 사용하여 동영상의 일부를 미리 로드할 수 있습니다. 다른 Chromium 기반 브라우저와 Firefox도 유사하게 동작합니다. - 데스크톱용 Chrome과 마찬가지로 Safari 11.0 데스크톱 버전에서도 일부 동영상을 미리 로드합니다. 버전 11.2부터는 동영상 메타데이터만 미리 로드됩니다. iOS의 Safari에서는 동영상이 미리 로드되지 않습니다.
- 데이터 절약 모드가 사용 설정된 경우
preload의 기본값은none입니다.
preload와 관련된 브라우저의 기본 동작은 고정된 것이 아니므로 명시적으로 지정하는 것이 가장 좋습니다. 사용자가 재생을 시작하는 경우 preload="none"를 사용하는 것이 모든 플랫폼에서 동영상 로드를 지연하는 가장 쉬운 방법입니다. preload 속성이 동영상 콘텐츠 로드를 지연하는 유일한 방법은 아닙니다. 동영상 미리 로드를 사용한 빠른 재생은 JavaScript에서 동영상 재생 작업에 관한 몇 가지 아이디어와 통계를 제공합니다.
안타깝게도 이 방법은 애니메이션 GIF 대신 동영상을 사용하려는 경우에는 유용하지 않습니다. 이에 대해서는 다음에 다룹니다.
애니메이션 GIF 대체 역할을 하는 동영상의 경우
애니메이션 GIF는 널리 활용되기는 하지만 여러 면에서 동영상에 상응하는 이미지, 특히 파일 크기 면에서 그다지 뛰어나지 않습니다. 애니메이션 GIF는 수 MB 범위의 데이터로 늘어날 수 있습니다 비슷한 화질의 동영상은 훨씬 작은 경향이 있습니다
<video> 요소를 애니메이션 GIF 대신 사용하는 것은 <img> 요소만큼 간단하지 않습니다. 애니메이션 GIF에는 세 가지 특성이 있습니다.
- 로드되면 자동으로 재생됩니다.
- 이 패턴은 지속적으로 반복됩니다 (항상 그런 것은 아닙니다).
- 오디오 트랙이 없습니다.
<video> 요소로 이렇게 하면 다음과 같이 표시됩니다.
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
autoplay, muted, loop 속성은 별도의 설명이 필요하지 않습니다.
iOS에서 자동재생을 실행하려면 playsinline가 필요합니다. 이제 여러 플랫폼에서 작동하는 서비스 가능한 GIF 대체 동영상이 생겼습니다. 하지만 지연 로드를
사용하려면 어떻게 해야 할까요? 시작하려면 <video> 마크업을 다음과 같이 수정하세요.
<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
poster 속성이 추가된 것을 알 수 있습니다. 이 속성을 사용하면 동영상이 지연 로드될 때까지 <video> 요소의 공간을 차지하도록 자리표시자를 지정할 수 있습니다. <img> 지연 로드 예와 마찬가지로 각 <source> 요소의 data-src 속성에 동영상 URL을 보관합니다. 여기에서 Intersection Observer 기반 이미지 지연 로드 예시와 유사한 JavaScript 코드를 사용하세요.
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
<video> 요소를 지연 로드할 때 모든 하위 <source> 요소를 반복하고 data-src 속성을 src 속성으로 바꿔야 합니다. 이렇게 한 후에는 요소의 load 메서드를 호출하여 동영상 로드를 트리거해야 합니다. 그러면 autoplay 속성에 따라 미디어가 자동으로 재생되기 시작합니다.
이 방법을 사용하면 애니메이션 GIF 동작을 에뮬레이션하는 동영상 솔루션을 사용할 수 있지만, 애니메이션 GIF만큼 많은 데이터를 소비하지 않으며 해당 콘텐츠를 지연 로드할 수 있습니다.
라이브러리 지연 로드
다음 라이브러리는 동영상을 지연 로드하는 데 도움이 됩니다.
- vanilla-latencyload 및 lozad.js는 Intersection Observer만 사용하는 초경량 옵션입니다. 따라서 성능은 매우 우수하지만 이전 브라우저에서 사용하려면 먼저 폴리필해야 합니다.
- yall.js는 Intersection Observer를 사용하고 이벤트 핸들러로 대체하는 라이브러리입니다. 또한
data-poster속성을 사용하여 동영상poster이미지를 지연 로드할 수도 있습니다. - React 전용 지연 로드 라이브러리가 필요한 경우 react-latencyload를 고려해 보세요. Intersection Observer를 사용하지는 않지만 React로 애플리케이션을 개발하는 데 익숙한 사용자에게 익숙한 지연 로드 이미지 방법을 제공합니다.
이러한 각 지연 로드 라이브러리는 잘 문서화되어 있으며 다양한 지연 로드 시도를 위한 다양한 마크업 패턴이 있습니다.