WeniVooks

video & audio

1. video

과거에는 동영상을 플래시 플레이를 기반으로 개발하였습니다. 이후 플래시를 대체하여 영상을 삽입할 수 있는 video 태그가 탄생한 후, 현재는 비디오 태그를 사용하여 동영상을 재생하는 것이 당연한 것이 되었죠. 웹에서 영상을 볼 수 있게 되면서, 유튜브, 넷플릭스와 같은 미디어 플랫폼의 시대로 발전했다고 할 수 있습니다.

• video 태그의 속성

  • autoplay: 동영상 자동 재생
  • controls: 재생, 정지 등 조작 메뉴 노출
  • loop: 동영상 반복 재생
  • poster: 동영상 재생 전에 보여 줄 이미지
  • preload: 페이지를 열 때 어떻게 미리 로드할지를 제어
    • none : 비디오 파일을 미리 로딩하지 않습니다. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라집니다.
    • metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져오도록 합니다.
    • auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비합니다.
  • src: 동영상 주소
  • <track> : <audio> 혹은 <video> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용합니다.
    • kind : 텍스트 트랙의 종류를 지정합니다. subtitles(자막), captions(설명) 등을 지정할 수 있습니다.
    • srclang : 텍스트 트랙의 언어를 지정합니다.
    • label : 텍스트 트랙의 제목을 정합니다.

  <video
    src="batman.mp4"
    width="450"
    height="300"
    controls
    autoplay
    loop
  ></video>

  <video
    src="batman.mp4"
    width="450"
    height="300"
    controls
    autoplay
    loop
  ></video>

  1.1 source

• <video> 또는 <audio> 태그 내에서 여러 미디어 파일을 지정하여 브라우저가 지원하는 형식을 선택하여 재생할 수 있도록 합니다.

• type: 동영상 타입

• 다음과 같은 코드를 사용하면 크로스브라우징과, 좀 더 사용자 친화적인 비디오를 구현 할 수 있습니다.

<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
  <source src="batman.mp4" type="video/mp4" />
  <source src="batman.ogv" type="video/ogg" />
  <source src="batman.webm" type="video/webm" />
  <track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman" />
</video>

<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
  <source src="batman.mp4" type="video/mp4" />
  <source src="batman.ogv" type="video/ogg" />
  <source src="batman.webm" type="video/webm" />
  <track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman" />
</video>

2. audio

<audio>는 웹 페이지에 오디오 컨텐츠를 포함할 때 사용합니다.

• audio 태그가 공식적으로 지원하는 표준 오디오 파일 : MP3 WAV Ogg
• audio 태그의 속성
  • src : 파일의 경로 명시
  • controls : 기본적인 동작을 조절하는 패널 명시
  • autoplay: 자동 재생 여부 명시
  • loop : 반복 재생 여부 명시
  • preload: 파일의 내용을 모두 불러올지 여부 명시

<audio> 요소 역시 <source> 요소를 자식으로 사용할 수 있습니다. 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있습니다.

<audio controls>
  <source src="flow.ogg" type="audio/ogg" />
  <source src="flow.mp3" type="audio/mpeg" />
</audio>

<audio controls>
  <source src="flow.ogg" type="audio/ogg" />
  <source src="flow.mp3" type="audio/mpeg" />
</audio>