네트워크 품질에 따라 이미지 제공에 맞게 동영상 조정

이 Codelab에서는 네트워크 품질에 따라 콘텐츠를 조정하는 방법을 알아봅니다. 이 페이지의 백그라운드 동영상은 사용자가 빠른 네트워크에 있을 때만 로드됩니다. 네트워크 속도가 느린 경우 이미지가 대신 로드됩니다.

Network Information API를 사용하면 사용자의 연결 품질에 관한 정보에 액세스할 수 있습니다. effectiveType 속성을 사용하여 동영상 게재 시점과 이미지 게재 시점을 결정합니다. effectiveType'slow-2g', '2g', '3g', '4g'일 수 있습니다.

브라우저 지원

  • Chrome: 61
  • Edge: 79
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

1단계: 연결 유형 확인하기

index.html 파일에는 백그라운드 동영상 (22행)을 표시하는 <video> 태그가 포함되어 있습니다. script.js의 코드는 동영상 태그의 src 속성을 설정하여 동영상을 로드합니다. 동영상 로드 코드는 2단계에서 자세히 설명합니다.

동영상을 조건부로 로드하려면 먼저 Network Information API를 사용할 수 있는지 확인합니다. 사용 가능한 경우 연결 유형을 확인합니다.

  1. script.js에서 navigator.connection 객체가 존재하는지, effectiveType 속성이 있는지 테스트하는 if 문을 추가합니다.
  2. if 문을 추가하여 네트워크의 effectiveType를 확인합니다.
if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

기존 동영상 로드 코드를 else 문으로 래핑하여 Network Information API를 지원하지 않는 브라우저에서도 동영상이 계속 로드되도록 합니다.

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

2단계: 동영상 로드

effectiveType'4g'이면 Codelab을 시작할 때부터 동영상 로드 코드를 사용합니다.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

동영상 로드 코드의 작동 방식은 다음과 같습니다. <video> 태그의 src 속성이 설정되지 않았으므로 처음에는 아무것도 다운로드하거나 표시하지 않습니다. 로드할 동영상 URL은 data-src 속성을 사용하여 지정됩니다.

<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

데이터 속성을 사용하면 표준 HTML 요소에 추가 정보를 저장할 수 있습니다. 데이터 요소의 이름은 'data-'로 시작하는 한 무엇이든 지정할 수 있습니다.

페이지에 동영상을 실제로 표시하려면 data-src에서 값을 가져와 동영상 요소의 src 속성으로 설정해야 합니다.

먼저 애셋이 포함된 DOM 요소를 가져옵니다.

const video = document.getElementById('coverVideo');

그런 다음 data-src 속성에서 리소스 위치를 가져옵니다.

const videoSource = video.getAttribute('data-src');

마지막으로 이를 동영상 요소의 src 속성으로 설정합니다.

video.setAttribute('src', videoSource);

마지막 줄은 CSS 배치를 처리합니다.

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

3단계: 이미지 로드

느린 네트워크에서 이미지를 조건부로 로드하려면 동영상과 동일한 전략을 사용합니다.

index.html (동영상 요소 바로 뒤)에 이미지 요소를 추가하고 src 속성 대신 data-src 속성을 사용합니다.

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

script.js에서 네트워크의 effectiveType에 따라 이미지의 src 속성을 설정하는 코드를 추가합니다.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

사용해 보기

직접 테스트하려면 다음 단계를 따르세요.

  1. 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면전체 화면을 누릅니다.
  2. `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 기본적으로 제한 없음으로 설정된 제한 드롭다운을 클릭합니다. 빠른 3G를 선택합니다.

빠른 3G 제한 옵션이 강조 표시된 DevTools 네트워크 탭

이제 빠른 3G를 사용 설정한 상태에서 페이지를 새로고침합니다. 앱이 동영상 대신 백그라운드에서 이미지를 로드합니다.

&#39;NETWORK INFORMATION&#39; 텍스트 오버레이가 있는 매트릭스와 같은 이미지 배경

추가 크레딧: 변경사항에 응답

이 API에 onchange 이벤트 리스너가 있다는 사실을 기억하시나요? 동영상 품질과 같은 콘텐츠를 동적으로 조정하거나, 대역폭이 넓은 네트워크 유형의 변경이 감지될 때 지연된 데이터 전송을 다시 시작하거나, 네트워크 품질이 변경될 때 사용자에게 알리는 등 다양한 용도로 사용할 수 있습니다.

다음은 이 리스너를 사용하는 방법의 간단한 예입니다. script.js에 추가합니다. 이 코드는 네트워크 정보가 변경될 때마다 displayNetworkInfo 함수를 호출합니다.

navigator.connection.addEventListener('change', displayNetworkInfo);

index.html 페이지에 이미 빈 <h2> 요소가 있습니다. 이제 <h2> 요소에 네트워크 정보를 표시하고 함수를 호출하도록 displayNetworkInfo 함수를 정의합니다.

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

다음은 Glitch의 앱의 최종 상태입니다.

&#39;NETWORK INFORMATION 4g&#39; 텍스트 오버레이가 있는 매트릭스와 같은 동영상 배경

다시 테스트하려면 다음 단계를 따르세요.

  1. 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 전체 화면을 누릅니다.
  2. `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 기본적으로 제한 없음으로 설정된 제한 드롭다운을 클릭합니다. 빠른 3G를 선택합니다.
  5. 앱을 새로고침합니다.

앱이 네트워크 정보를 3g로 업데이트합니다.

&#39;NETWORK INFORMATION 3g&#39; 텍스트 오버레이가 있는 매트릭스와 같은 동영상 배경