Skip to content

Latest commit

 

History

History
274 lines (198 loc) · 10.8 KB

비디오.md

File metadata and controls

274 lines (198 loc) · 10.8 KB

<video> 와 <iframe> 사용하기

  • <video> 태그를 사용해서 HTML에 비디오 삽입이 가능함
  • <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> 태그의 속성들

속성 설명 예시
src 비디오 파일의 경로 설정 <video src="/path/to/video.mp4" />
width 비디오의 가로 길이 설정 <video width="320" />
height 비디오의 세로 길이 설정 <video height="240" />
controls 있는 경우 재생관련 컨트롤창을 표시 <video controls />
autoPlay 페이지 로딩시 비디오 자동재생 여부, 자동재생 가능여부는 비디오마다 다름 <video autoPlay/>
loop 반복재생 여부 <video loop>
muted 기본 음소거 여부, 보통 autoPlay랑 같이씀 <video muted/>
preload 비디오가 미리 로딩되는 방법 지정, none/metadata/auto <video preload="none"/>
playsInline 인라인 재생을 활성화, 종종 iOS Safari에서 autoPlay를 하는데 필요함 <video playsInline/>

비디오의 좋은 예시들

  • 동영상 재생을 지원하지 않는 브라우저를 위해서 fallback 이미지, 텍스트 등 을 추가하는게 좋음
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <!-- fallback 이미지 -->
  <img src="video-thumbnail.jpg" alt="비디오 썸네일" />
</video>
  • 청각장애가 있는 사용자를 위해서 자막이나 캡션을 추가한다. <track> 태그를 통해서 캡션 파일 소스를 지정한다
  • 키보드로 탐색하거나 스크린 리더를 위해서 표준 HTML5 동영상 컨트롤러를 사용하는게 좋다. react-player, video.js 같은 타사 플레이어도 좋음

<iframe>

  • 외부에서 호스팅중인 동영상을 재생하기 위해 사용가능함
export default function Page() {
  return <iframe src="https://www.youtube.com/watch?v=gfU1iZnjRZM" frameborder="0" allowfullscreen />;
}

일반적인 <iframe> 태그 속성들

속성 설명 예시
src 임베딩 될 페이지 URL <iframe src="https://example.com" />
width iframe의 가로 길이 <iframe width="500" />
height iframe의 세로 길이 <iframe height="500" />
frameborder iframe 주위에 테두리 표시여부 <iframe frameborder="0" />
allowfullscreen iframe 콘텐츠의 전체화면 지원여부 <iframe allowfullscreen />
sandbox iframe 콘텐츠에 대한 추가 세트 활성화 여부 <iframe sandbox />
loading 로딩 최적화 방법 <iframe loading="lazy" />
title 접근성을 위한 제목 설정 <iframe title="Description" />

비디오를 임베딩하기 위한 메소드 결정방법

CDN에 있거나 서버내에 위치한 비디오 파일

  • 플레이어의 기능과 모양에 대해 세부적으로 커스텀이 필요한 경우 <video> 태그 사용해서 임베딩 하기

Youtube, Vimeo 같은 비디오 호스팅 서비스 사용시

  • 외부 동영상 호스팅 서비스를 사용하는 경우는 <iframe> 을 사용
  • 플레이어에 대한 일부 기능은 제한되지만 사용 편의성 및 기능을 제공함

외부에서 호스팅중인 비디오 삽입하기

  • 외부 플랫폼에서 동영상을 삽입할려면 Next.js를 통해서 동영상 정보를 가져오고 로딩 중 fallback 상태 처리를 위해 Suspense를 사용하면됨

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

  • 먼저 동영상 삽입에 적합한 <iframe> 을 생성하는 서버 컴포넌트를 만듬
  • 이 컴포넌트는 동영상의 URL을 가져와서 <iframe> 을 렌더링함
export default async function VideoComponent() {
  const src = await getVideoSrc();

  return <iframe src={src} frameborder="0" allowfullscreen />;
}

2. Suspense로 비디어 컴포넌트 스트리밍하기

  • 동영상을 삽입할 서버 컴포넌트를 만들었다면, 다음은 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>
  );
}

이허한 방법은 페이지가 블록킹 당하는걸 방지해주고 유저는 나머지 요소와 상호작용이 가능하므로 UX가 향상됨

더 매력적이고 유익한 로딩 경험을 제공하려면 로딩 스켈레톤을 fallback 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>
  );
}

직접 관리하는 비디오들

  • 직접 관리하는 비디오는 재생부터 표시까지 동영상을 직접 관리할 수 있어서 외부 플랫폼의 제약없이 소유권과 통제권 확보가 가능함
  • 백그라운드에서 동영상 재생과 같은 고유한 요구사항에 좋고, 디자인 및 기능적 요구사항에 맞게 설정이 가능함
  • 증가하는 트래픽과 콘텐츠의 크기를 효과적으로 지원이 가능하도록 S3 같은 스토리지를 사용하는걸 추천함
  • 스토리지 및 트래픽에 대한 비용과 Next.js와 더 광범위한 기술 에코시스템에 쉽게 통합해야 하는 필요성 간 균형을 맞출 수 있음

Vercel에서 제공하는 비디오 호스팅을 위한 Vercel Blob

  • Vercel Blob은 비디오 호스팅을 위한 효율적인 방법을 제공함
  • Next.js와 잘 작동하는 확장 가능한 클라우드 스토리지를 제공함

1. Vercel Blob에 동영상 업로드하기

  • 대시보드에서 동영상 업로드 가능
  • Server Action을 사용해서 동영상 업로드 가능
  • 클라이언트에서 업로드도 가능

2. Next.js에서 동영상 보여주기

  • 동영상이 업로드되고 저장되면 Next.js에 표시가 가능함
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 }: { filename: string }) {
  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에서도 가져올 수 있음
async function VideoComponent({ fileName }: {filename: string}) {
  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>
  );
};

리소스

  • 아래는 동영상 최적화 및 좋은 예시에 대한 내용임

비디오 포멧과 코덱

  • 호환성을 위해서 mp4 또는 웹 최적화를 위한 webm 확장자를 추천함
  • 자세한건 Mozilla의 코덱가이드를 참고하면 좋음

비디어 압축

해상도 및 비트레이트 조정

  • 시청 플랫폼에 따라서 비트레이트를 조정하고 모바일의 경우 설정을 낮춤
  • Bitrate and resolution

CDN

  • CDN을 사용하면 웹에서 다운로드하는 비디오 전송속도를 높일 수 있음
  • Vercel Blob 같은 일부 스토리지 솔루션을 사용할때는 CDN 기능이 제공됨

오픈소스인 next-video 컴포넌트

  • Next.js에서 제공하는 컴포넌트로 Vercel Blob 등 다양한 호스팅 서비스와 호환됨
  • 상세 내용은 https://next-video.dev/docs에서 확인가능함

Cloudinary(SaaS)와 통합

Mux Video API

https://github.com/muxinc/video-course-starter-kit

Fastly

https://www.fastly.com/products/streaming-media/video-on-demand