비디오 최적화

이 페이지에서는 Next.js 애플리케이션에서 비디오를 사용하는 방법을 설명하며, 성능에 영향을 주지 않고 비디오 파일을 저장하고 표시하는 방법을 보여줍니다.

<video>와 <iframe> 사용하기

비디오는 직접 비디오 파일을 위한 HTML <video> 태그와 외부 플랫폼에서 호스팅되는 비디오를 위한 <iframe> 을 사용하여 페이지에 삽입할 수 있습니다.

<video>

HTML <video> 태그는 자체 호스팅되거나 직접 제공되는 비디오 콘텐츠를 삽입할 수 있으며, 재생과 외관에 대한 완전한 제어를 허용합니다.

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Your browser does not support the video tag.
    </video>
  );
}

일반적인 <video> 태그 속성

알아두면 좋은 점: autoPlay 속성을 사용할 때는 대부분의 브라우저에서 비디오가 자동으로 재생되도록 하기 위해 muted 속성을 포함하고, iOS 기기와의 호환성을 위해 playsInline 속성을 포함하는 것이 중요합니다.

비디오 속성의 종합적인 목록은 MDN 문서를 참조하세요.

비디오 모범 사례

• 대체 콘텐츠: <video> 태그를 사용할 때, 비디오 재생을 지원하지 않는 브라우저를 위해 태그 안에 대체 콘텐츠를 포함하세요.
• 자막 또는 캡션: 청각 장애인이나 난청인 사용자를 위해 자막이나 캡션을 포함하세요. <video> 요소와 함께 <track> 태그를 사용하여 캡션 파일 소스를 지정하세요.
• 접근 가능한 컨트롤: 키보드 탐색과 스크린 리더 호환성을 위해 표준 HTML5 비디오 컨트롤을 권장합니다. 고급 요구 사항의 경우 react-player나 video.js와 같은 서드파티 플레이어를 고려하세요. 이들은 접근 가능한 컨트롤과 일관된 브라우저 경험을 제공합니다.

<iframe>

HTML <iframe> 태그를 사용하면 YouTube나 Vimeo와 같은 외부 플랫폼의 비디오를 삽입할 수 있습니다.

export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      allowfullscreen
    />
  );
}

일반적인 <iframe> 태그 속성

iframe 속성의 종합적인 목록은 MDN 문서를 참조하세요.

비디오 삽입 방법 선택하기

Next.js 애플리케이션에 비디오를 삽입하는 두 가지 방법이 있습니다:

• 자체 호스팅 또는 직접 비디오 파일: 플레이어의 기능과 외관에 대한 세부적인 제어가 필요한 시나리오에서는 <video> 태그를 사용하여 자체 호스팅 비디오를 삽입합니다. Next.js 내에서 이 통합 방법은 비디오 콘텐츠의 사용자 정의와 제어를 허용합니다.
• 비디오 호스팅 서비스 사용 (YouTube, Vimeo 등): YouTube나 Vimeo와 같은 비디오 호스팅 서비스의 경우, <iframe> 태그를 사용하여 iframe 기반 플레이어를 삽입합니다. 이 방법은 플레이어에 대한 일부 제어를 제한하지만, 이러한 플랫폼에서 제공하는 사용 편의성과 기능을 제공합니다.

애플리케이션의 요구 사항과 제공하고자 하는 사용자 경험에 맞는 삽입 방법을 선택하세요.

외부 호스팅 비디오 삽입하기

외부 플랫폼의 비디오를 삽입하기 위해 Next.js를 사용하여 비디오 정보를 가져오고 React Suspense를 사용하여 로딩 중 대체 상태를 처리할 수 있습니다.

1. 비디오 삽입을 위한 서버 컴포넌트 만들기

첫 번째 단계는 비디오를 삽입하기 위한 적절한 iframe을 생성하는 서버 컴포넌트를 만드는 것입니다. 이 컴포넌트는 비디오의 소스 URL을 가져와 iframe을 렌더링합니다.

export default async function VideoComponent() {
  const src = await getVideoSrc();
 
  return <iframe src={src} frameborder="0" allowfullscreen />;
}

2. React Suspense를 사용하여 비디오 컴포넌트 스트리밍하기

비디오를 삽입하는 서버 컴포넌트를 만든 후, 다음 단계는 React Suspense를 사용하여 컴포넌트를 스트리밍하는 것입니다.

import { Suspense } from "react";
import VideoComponent from "../ui/VideoComponent.jsx";
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading video...</p>}>
        <VideoComponent />
      </Suspense>
      {/* 페이지의 다른 콘텐츠 */}
    </section>
  );
}

알아두면 좋은 점: 외부 플랫폼에서 비디오를 삽입할 때 다음과 같은 모범 사례를 고려하세요:

• 비디오 삽입이 반응형인지 확인하세요. CSS를 사용하여 iframe이나 비디오 플레이어가 다양한 화면 크기에 적응하도록 만드세요.
• 특히 제한된 데이터 요금제를 사용하는 사용자를 위해 네트워크 상태에 따라 비디오를 로딩하는 전략을 구현하세요.

이 접근 방식은 페이지가 차단되는 것을 방지하여 더 나은 사용자 경험을 제공합니다. 즉, 비디오 컴포넌트가 스트리밍되는 동안 사용자가 페이지와 상호 작용할 수 있습니다.

더 매력적이고 정보를 제공하는 로딩 경험을 위해, 대체 UI로 로딩 스켈레톤을 사용하는 것을 고려해보세요. 간단한 로딩 메시지를 보여주는 대신, 다음과 같이 비디오 플레이어와 유사한 스켈레톤을 보여줄 수 있습니다:

import { Suspense } from "react";
import VideoComponent from "../ui/VideoComponent.jsx";
import VideoSkeleton from "../ui/VideoSkeleton.jsx";
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* 페이지의 다른 콘텐츠 */}
    </section>
  );
}

자체 호스팅 비디오

자체 호스팅 비디오가 선호될 수 있는 여러 가지 이유가 있습니다:

• 완전한 제어와 독립성: 자체 호스팅은 재생부터 외관까지 비디오 콘텐츠에 대한 직접적인 관리를 제공하여, 외부 플랫폼 제약 없이 완전한 소유권과 제어를 보장합니다.
• 특정 요구에 맞는 사용자 정의: 동적 배경 비디오와 같은 고유한 요구 사항에 이상적이며, 디자인 및 기능적 요구에 맞춰 맞춤 사용자 정의를 허용합니다.
• 성능 및 확장성 고려사항: 증가하는 트래픽과 콘텐츠 크기를 효과적으로 지원하기 위해 고성능이며 확장 가능한 스토리지 솔루션을 선택하세요.
• 비용 및 통합: 스토리지와 대역폭 비용을 Next.js 프레임워크 및 더 넓은 기술 생태계로의 쉬운 통합 필요성과 균형을 맞추세요.

Vercel Blob을 사용한 비디오 호스팅

Vercel Blob은 Next.js와 잘 작동하는 확장 가능한 클라우드 스토리지 솔루션을 제공하여 비디오를 호스팅하는 효율적인 방법을 제공합니다. 다음은 Vercel Blob을 사용하여 비디오를 호스팅하는 방법입니다:

1. Vercel Blob에 비디오 업로드하기

Vercel 대시보드에서 "Storage" 탭으로 이동하여 Vercel Blob 스토어를 선택하세요. Blob 테이블의 오른쪽 상단에서 "Upload" 버튼을 찾아 클릭하세요. 그런 다음 업로드하려는 비디오 파일을 선택하세요. 업로드가 완료되면 비디오 파일이 Blob 테이블에 나타납니다.

또는 서버 액션을 사용하여 비디오를 업로드할 수 있습니다. 자세한 지침은 서버 측 업로드에 대한 Vercel 문서를 참조하세요. Vercel은 또한 클라이언트 측 업로드를 지원합니다. 이 방법은 특정 사용 사례에 더 적합할 수 있습니다.

2. Next.js에서 비디오 표시하기

비디오가 업로드되고 저장되면 Next.js 애플리케이션에서 표시할 수 있습니다. 다음은 <video> 태그와 React Suspense를 사용하여 이를 수행하는 방법의 예입니다:

import { Suspense } from "react";
import { list } from "@vercel/blob";
 
export default function Page() {
  return (
    <Suspense fallback={<p>Loading video...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  );
}
 
async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  });
  const { url } = blobs[0];
 
  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
}

이 접근 방식에서 페이지는 @vercel/blob의 비디오 URL을 사용하여 VideoComponent를 통해 비디오를 표시합니다. React Suspense는 비디오 URL이 가져와지고 비디오가 표시될 준비가 될 때까지 대체 내용을 보여주는 데 사용됩니다.

비디오에 자막 추가하기

비디오에 자막이 있는 경우, <video> 태그 내부에 <track> 요소를 사용하여 쉽게 추가할 수 있습니다. Vercel Blob에서 비디오 파일과 유사한 방식으로 자막 파일을 가져올 수 있습니다. 다음은 자막을 포함하도록 <VideoComponent>를 업데이트하는 방법입니다.

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  });
  const { url } = blobs[0];
  const { url: captionsUrl } = blobs[1];
 
  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Your browser does not support the video tag.
    </video>
  );
}

이 접근 방식을 따르면 Next.js 애플리케이션에 비디오를 효과적으로 자체 호스팅하고 통합할 수 있습니다.

리소스

비디오 최적화와 모범 사례에 대해 더 자세히 알아보려면 다음 리소스를 참조하세요:

• 비디오 형식 및 코덱 이해하기: 호환성을 위한 MP4나 웹 최적화를 위한 WebM과 같이 비디오 요구 사항에 맞는 올바른 형식과 코덱을 선택하세요. 자세한 내용은 비디오 코덱에 대한 Mozilla의 가이드를 참조하세요.
• 비디오 압축: FFmpeg와 같은 도구를 사용하여 비디오를 효과적으로 압축하고, 품질과 파일 크기의 균형을 맞추세요. FFmpeg 공식 웹사이트에서 압축 기술에 대해 알아보세요.
• 해상도 및 비트레이트 조정: 모바일 기기의 경우 낮은 설정으로 해상도와 비트레이트를 조정하여 시청 플랫폼에 따라 맞추세요.
• 콘텐츠 전송 네트워크 (CDN): CDN을 활용하여 비디오 전송 속도를 향상시키고 높은 트래픽을 관리하세요. Vercel Blob과 같은 일부 스토리지 솔루션을 사용할 때는 CDN 기능이 자동으로 처리됩니다. CDN과 그 이점에 대해 자세히 알아보세요.

Next.js 프로젝트에 비디오를 통합하기 위해 다음 비디오 스트리밍 플랫폼을 살펴보세요:

오픈 소스 next-video 컴포넌트

• Next.js용 <Video> 컴포넌트를 제공하며, Vercel Blob, S3, Backblaze, Mux를 포함한 다양한 호스팅 서비스와 호환됩니다.
• 다양한 호스팅 서비스와 함께 next-video.dev를 사용하는 방법에 대한 상세한 문서.

Cloudinary 통합

• Next.js와 함께 Cloudinary를 사용하기 위한 공식 문서 및 통합 가이드.
• 즉시 사용 가능한 비디오 지원을 위한 <CldVideoPlayer> 컴포넌트 포함.
• 적응형 비트레이트 스트리밍을 포함한 Next.js와 Cloudinary 통합 예제 찾기.
• Node.js SDK를 포함한 다른 Cloudinary 라이브러리도 사용 가능합니다.

Mux 비디오 API

• Mux는 Mux와 Next.js를 사용하여 비디오 코스를 만들기 위한 스타터 템플릿을 제공합니다.
• Next.js 애플리케이션을 위한 고성능 비디오 삽입에 대한 Mux의 권장 사항에 대해 알아보세요.
• Next.js와 함께 Mux를 시연하는 예제 프로젝트를 살펴보세요.

Fastly

• Next.js에 주문형 비디오와 스트리밍 미디어를 위한 Fastly의 솔루션을 통합하는 방법에 대해 자세히 알아보세요.