비디오 삽입: <video>

4.1 <video> 태그 기본

<video> 요소를 사용하여 웹 페이지에 비디오를 삽입하면 비디오 콘텐츠를 브라우저에서 바로 재생할 수 있어. 이 요소는 다양한 재생 옵션을 제공하며, 다양한 포맷 지원과 JavaScript의 속성 및 메소드로 조작 가능해. 이제 이 요소에 대해 자세히 알아보자.

간단한 예

<video> 태그는 비디오 파일의 경로를 지정하는 src 속성과 함께 사용돼. 또한, 재생, 일시정지 및 볼륨 조절 버튼과 같은 기본 제어 요소를 표시하려면 controls 속성을 추가할 수 있어.

    
      <video src="videofile.mp4" controls></video>
    
  

다중 소스 예제

다양한 브라우저 지원을 위해 <source> 태그를 사용하여 여러 비디오 소스를 지정할 수 있어. 이를 통해 브라우저는 지원하는 비디오 포맷을 선택할 수 있어.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

<video> 태그의 속성

• src: 비디오 파일의 경로를 지정
• controls: 재생 제어 요소 표시
• autoplay: 페이지 로드 시 자동 재생
• loop: 재생이 끝나면 비디오를 반복 재생
• muted: 로드 시 소리 끔
• preload: 브라우저가 비디오를 어떻게 로드할지 지정. 가능한 값: none, metadata, auto
• width 및 height: 비디오 플레이어의 너비와 높이 설정
• poster: 비디오 재생 전 표시할 이미지

4.2 주요 속성

1. 자동 재생

autoplay 속성은 페이지가 로드되면 비디오 파일이 자동으로 재생되기 시작하도록 만들어. 오디오와 마찬가지로 이 속성을 사용할 때는 사용자를 불편하게 하지 않도록 주의해야 해.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. 비디오 반복

loop 속성은 비디오 파일이 무한 루프로 재생되도록 지정해. 배경 비디오나 애니메이션에 유용해.

    
      <video src="videofile.mp4" loop></video>
    
  

3. 음소거

muted 속성은 비디오 파일을 로드할 때 소리를 끄는 기능이야. 기본적으로 소리 없이 재생되기를 원할 경우 유용하며, 사용자가 필요에 따라 소리를 켤 수 있어.

    
      <video src="videofile.mp4" muted></video>
    
  

4. 미리 로드

preload 속성은 페이지를 로드할 때 브라우저가 비디오 파일을 어떻게 로드할지 지정해. 세 가지 값 중 하나를 가질 수 있어:

• none: 브라우저가 비디오를 미리 로드하지 않음
• metadata: 브라우저가 메타데이터(길이, 크기 등)만 로드
• auto: 페이지가 로드될 때 비디오를 완전히 로드

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. 포스터

poster 속성은 비디오 재생 전 표시할 이미지를 지정해. 비디오의 내용을 사용자에게 시각적으로 제공하는 데 유용해.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 지원되는 비디오 포맷

크로스 브라우저 호환성을 위해 여러 비디오 포맷을 사용하는 것이 추천돼. 가장 널리 사용되는 포맷은 MP4, WebM 및 OGG야.

MP4 포맷

MP4 (MPEG-4 Part 14)는 가장 인기 있는 비디오 포맷 중 하나야. 대부분의 브라우저와 장치에서 지원돼. MP4는 손실 압축을 사용하며 상대적으로 파일 크기가 작으면서도 좋은 비디오 품질을 제공해.

예제:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebM 포맷

WebM은 인터넷 사용을 위해 개발된 오픈 비디오 압축 포맷이야. 대부분의 현대 브라우저에서 지원되고 있어. 좋은 비디오 품질을 제공해.

예제:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGG 포맷

OGG (Ogg Theora)는 많은 브라우저에서 지원되는 오픈 비디오 포맷이야. 이 포맷은 좋은 비디오 품질을 제공하며 종종 MP4 및 WebM 대안으로 사용돼.

예제:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

호환성을 위한 다중 포맷 사용 예제

크로스 브라우저 호환성을 위해 여러 포맷의 비디오 소스를 지정하는 것이 추천돼. 브라우저는 지원하는 첫 번째 포맷을 선택해.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>