HTML에서 멀티미디어 표현 / HTML Video,Audio Tag

 

기존 HTML에서 오디오/비디오 재생은 아래와 같았다.

• <embed src="URL"
• 플러그인을 사용하여 표시되는 데이터나 동영상을 웹페이지에 삽입했다.
• 이젠 <audio src="..."> <video src="">로 사용이 가능하다.
• <embed> 태그
  • 외부 애플리케이션이나 상호작용 콘텐츠를 위한 컨테이너
  • HTML5에서 새롭게 추가 되었다.
    • 많은 브라우저가 오랫동안 지원해왔지만 HTML4에서는 미지원 했었다.
  • 속성
    • src = "URL" : 내장되는 외부 파일의 주소/이름
    • height="픽셀" : 내장되는 콘텐츠의 높이
    • width="픽셀" : 내장되는 콘텐츠의 폭
    • type="미디어타입" : 내장되는 콘텐츠의 미디어타입

 

1.audio 요소

 

• 외부 플러그인의 도움 없이 간단히 오디오 재생
• <adio src="song.mp3"> </audio>
• 속성
  • src="URL" : 재생할 오디오 파일의 URL
  • autoplay : 웹 문서 로딩시에 오디오를 자동으로 재생할 지여부
  • controls : 오디오 제어기(재생,일시정지,볼륨등)의 표시여부
  • loop : 오디오의 반복 재생 여부
  • muted : 음소거 여부
  • preload="값" : 웹문서가 로딩될 때 오디오의 로딩 상태
    • none : 사용자가 재생을 시작하기 전에는 웹브라우저가 오디오 파일을 미리 로드하지 않음
    • auto : 기본 페이지가 로드될 떄 바로 전체 파일을 자동으로 로드
    • metadata : 사용자가 재생시키기 전까지는 오디오의 메타정보(크기,첫프레임등)만 로드
    • autoplay 속성이 지정되면 preload 속성은 무시된다.
• autoplay,controls,loop,muted 속성의 사용 방법
  • 속성값 없이 사용 가능, 속성명만 표시한다.
  • 속성값을 사용하는 경우에는 속성명="속성명"으로 사용한다.
    • 예) autoplay="autoplay"
• 웹에서 주로 사용되는 오디오 형식
  • MP3 
  • Wav
  • Ogg
  • 각 브라우저/버전 마다 지원되는 파일 형식이 다르다.

 

다양한 포맷을 지정하는 <source>태그

• 하나의 소스 파일에 대해 서로 다른 형식(mp3,wav,ogg등)을 갖는 여러 파일을 동시에 지정하기 위한태그
• <audio>와 <video>태그의 src속성 역할을 대신한다.
  • <audio>와 <video>태그 내에서 여러개 지정
    • 가장 위의 <ssource>태그 부터 차례로 지원하는 형식을 찾아서 재생
• 속성
  • src="URL" : 재생할 미디어 파일의 URI
  • type="MIME형식" ; 재생할 파일의 MIME 형식
    • "audio/mp3',"audio/wav","audio/ogg" 등

 

2.video 요소

 

• 비디오 재생
  • <audio> 태그의 사용 방법과 거의 동일하다.
• 속성
  • <audio> 태그의 속성을 그대로 사용
    • src,autoplay,controls,loop,muted,preload
  • width="픽셀",heigth="픽셀
    • 비디오 콘텐츠가 표시될 영역의 크기(폭,높이)
  • poster="URL"
    • 지정한 비디오 데이터가 설정되어 있지 않거나 비디오 로딩 동안 보여줄 썸네일
• 웹에서 주로 사용되는 비디오 형식
  • MP4
  • WebM
  • Ogg
  • 각 브라우저 버전마다 지원되는 파일 형식이 다르다.
• 미디어 콘텐츠를 재생할 떄 특정 구간을 지정하여 재생
  • <audio>,<video>또는 <source>태그의 src속성 이용할 수 있다.
  • src="파일명#t=[시작시간][,종료시간]"
  • 시간 표시 형식 -> 시:분:초
• 자막 처리를 위한 <track>태그
  • 여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션같이 시간이 지정된 텍스트 파일을 지정
  • <audio> or <video> 태그 하위 태그로 사용한다.
    • 단독으로 사용하면 아무것도 표시되지 않는다.
  • <track> kind 속성값의 종류
    • subtitles : 비디오의 자막을 정의, 대화를 글로 옮기거나 번역한 것.
    • captions : 대화나 사운드 효과를 글로 옮기거나 번역한 것.
    • descriptions : 비디오 내용에 대한 텍스트 형식의 설명을 정의한 것.
    • chapters : 장의 제목을 정의, 미디어 자원을 탐색하기 위한 것.
    • metadata : 스크립트에서 사용하기 위한 내요을 정의(브라우저에는 표시되지 않음)
• 트랙 파일의 형식
  • WebVTT (web video text tracks) 형식
    • https://w3c.github.io/webvtt/
  • UTF-8 형식의 텍스트 파일
  • Default 속성을 사용해서 하나의 트랙을 기본으로 지정
    • 여러 트랙을 사용하는 경우 사용자가 언어를 지정/선택하지 않는 경우를 대비하여
    • default 속성을 넣는다