[HTML] 미디어 관련 태그

html5가 나오기 이전, 웹 페이지에서 미디어를 재생하려면 플러그인이라는 것을 이용해서 삽입해야 했습니다. 그러나 html5가 나오면 오디오와 비디오를 재생하는 태그가 생겼습니다. 그래서 html5를 지원하는 브라우저라면 미디어파일들을 쉽게 태그로 삽입할 수 있게 되었습니다.

 

<audio> : 오디오 파일을 삽입합니다. 브라우저에서 배경음악이나 소리를 재생할 때 사용하며 .mp3확장자의 파일사용이 권장됩니다. src속성을 이용해 경로를 지정해주면 됩니다.

<audio>

 

<video> : 비디오 파일을 삽입합니다. 사용법은 audio와 유사합니다.

<video>

 

<audio>와 <video>에는 속성들이 있는데 두 태그의 속성이 대부분 같습니다.

<audio>와 <video>의 속성
width,height	각각 너비와 높이를 지정합니다.
controls	컨트롤 막대를 표시합니다. 사용시 속성 값 없이 controls만 입력하면 됩니다.
preload	미디어파일의 다운로드 시기를 지정합니다. 기본값은 auto입니다. none : 버튼을 누를 때 다운로드합니다. metadata : 미디어의 메타정보만 미리 다운로드합니다. auto : 웹 페이지가 로딩될 때 미디어를 다운로드합니다.
muted	비디오가 소리없이 화면만 재생됩니다. 속성 값 없이 muted만 입력하면 됩니다.
autoplay	미디어가 다운로드완료되는 시점부터 자동재생 됩니다. 속성 값 없이 autoplay만 입력하면 됩니다.
loop	미디어가 종료되면 다시 처음부터 반복재생합니다. 속성 값 없이 loop만 입력하면 됩니다.
poster	미디어 재생 실패문제가 발생할 경우 미디어대신 표시할 포스터를 지정합니다.

 

 

비디오를 보다보면 자막이 존재하는 경우가 있습니다. 비디오 플레이어에서는 파일열기 등으로 자막을 삽입하지만, 웹 브라우저에서는 태그를 활용해 비디오에 자막 파일을 삽입하는 형식으로 자막을 넣을 수 있습니다.

 

<track> : 비디오에 자막을 넣어줍니다. 비디오 태그안에 넣어서 사용하며, 확장자는 일반 영상 자막파일과는 다르게 주로 .vtt파일을  사용합니다. 이하는 <track>태그의 속성입니다.

 

kind : 자막의 종류를 지정합니다.

src : 자막파일의 경로를 지정합니다.

srclang : 자막에 사용된 언어를 지정합니다. kind속성값이 기본값(subtitle)일 경우에 명시해 줍니다.

label : 자막이 여러 개의 파일로 되어있을 때, 자막에 식별용 이름을 붙여줍니다.

default : 자막이 여러 개의 파일로 되어있을 때, 기본값으로 사용되는 자막을 지정합니다.

 

---

미디어 파일은 수많은 확장자를 가지고있습니다. 브라우저마다 지원하는 확장자명이 다른데요. 그래서 이를 보완하기 위해서 여러 미디어 파일 확장자를 넣을 수 있게 해주는 태그가 있습니다.

 

<source> : 여러 확장자의 미디어 파일을 넣을 수 있게 해줍니다. <video>태그 와 함께 사용합니다.

<source>

미디어의 경로인 src와 미디어 확장자를 알려주는 type속성은 필수이며, 닫는태그없이 사용합니다.

 

src : 미디어의 경로를 기입하는 속성입니다.

type : 미디어의 확장자를 브라우저에게 알려주어 재생가능여부를 알리는 속성입니다.

codecs : 비디오코덱을 표시합니다.

---

 

 

이렇게 약 10여개의 포스트를 거치면서 HTML5의 태그에 대해 간략하게 알아봤습니다.

다음 포스트부터는 밋밋한 HTML을 꾸며주는 CSS에 대한 포스팅을 하려고 합니다.