이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

밀리카 미하즐리야

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

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

브라우저 지원

소스

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

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

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

script.js에서 navigator.connection 객체가 있는지, effectiveType 속성이 있는지 테스트하는 if 문을 추가합니다.
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
}

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

<video id="coverVideo" 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');
}

사용해 보기

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

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

빠른 3G 제한 옵션이 강조 표시된 DevTools Network 탭

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

'네트워크 정보' 텍스트 오버레이가 있는 매트릭스 형식의 이미지 배경

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

이 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에 연결된 앱의 최종 상태입니다.

'NETWORK INFORMATION 4g' 텍스트 오버레이가 있는 행렬 같은 동영상 배경

다시 테스트하려면 다음 안내를 따르세요.

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

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

'NETWORK INFORMATION 3g'(네트워크 정보 3G) 텍스트 오버레이가 있는 매트릭스 같은 동영상 배경