이미지 요소와 마찬가지로 동영상을 지연 로드할 수도 있습니다. 동영상은 일반적으로 <video> 요소 (단,
다른 방법을 사용하여
<img>님이
는 제한적인 구현으로 나타남). <video>를 지연 로드하는 방법은
살펴보겠습니다 각각 책임감 있는 AI가 필요한
몇 가지 시나리오를 살펴보겠습니다
생각해야 합니다.
자동재생되지 않는 동영상
사용자가 재생을 시작한 동영상 (즉, 시작되지 않은 동영상)
자동재생)으로, preload
속성
<video> 요소에 추가하는 것이 바람직할 수 있습니다.
<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는 몇 메가바이트의 데이터 범위에 대한 것입니다. 비슷한 화질의 동영상은 훨씬 작아집니다
<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 속성은 별도의 설명이 필요하지 않습니다.
자동재생을 실행하려면 playsinline이(가) 필요합니다.
iOS 이제 여러분은
여러 플랫폼에서 작동하는 서비스 가능한 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 기반 이미지 지연 로드의 예:
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-lazyload를 호출했습니다. 하지만 Intersection Observer를 사용하지 않으며 익숙한 지연 시간 방법을 제공합니다. 이미지를 로드하는 방법을 배웠습니다.
각 지연 로드 라이브러리는 다양한 마크업과 함께 잘 문서화되어 있습니다. 다양한 지연 로드 작업에 대한 패턴을 살펴보세요.