이미지 요소와 마찬가지로 동영상을 지연 로드할 수도 있습니다. 동영상은 일반적으로 <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-lazyload 및 lozad.js는 Intersection Observer만 사용하는 초경량 옵션입니다. 따라서 성능이 우수하지만 이전 브라우저에서 사용하기 전에 폴리필해야 합니다.
- yall.js는 Intersection Observer를 사용하고 이벤트 핸들러로 대체되는 라이브러리입니다. 또한
data-poster속성을 사용하여 동영상poster이미지를 지연 로드할 수 있습니다. - React 관련 지연 로드 라이브러리가 필요한 경우 react-latencyload를 고려해 볼 수 있습니다. Intersection Observer를 사용하지는 않지만 React로 애플리케이션을 개발하는 데 익숙한 사용자에게 익숙한 지연 로드 이미지 방법을 제공합니다.
이러한 각 지연 로드 라이브러리는 문서화되어 있으며 다양한 지연 로드 시도를 위한 많은 마크업 패턴이 있습니다.