웹 페이지에 동영상/오디오 파일 재생하기 - HTML5

HTML문서에서 비디오, 오디오 재생하기

예전에는 웹에서 음악파일을 재생하거나 비디오 파일을 재생하려면 별도의 프로그램(플러그인)을 설치하여 실행하였습니다. 심지어 재생하려는 파일들이 표준화되지 않아 비디오 파일별 코덱을 설치해야만 했습니다. 하지만 최근 HTML5에서는 다양하지는 않지만 가장 널리 사용되는 비디오 & 오디오 파일을 보다 편리하게 재생하거나 불러올 수 있도록 합니다. 아직 일부 파일들에 대해 전용 플러그인이 적용되지만 예전보다는 많이 나아졌죠?!

(통상 현재 사용되는 HTML5를 버전별로 분류하지 않고 그냥 HTML이라고 칭합니다. 예전 버전과 구분이 필요할 때만 HTML5, HTML4로 표기하겠습니다.)

---

앞서 언급된 외부 플러그인(HTML 자체에서 처리할 수 없는 파일을 처리할 때 사용)을 웹 페이지에 적용하기 위해 <object>태그를 사용합니다. (현재는 PDF 파일이나 플래시 무비 같은 파일을 처리할 때)

<obeject data=경로 type=유형 ></object>

<object> 태그에서 사용 가능한 속성에 대해 살펴봅니다. <img> 태그에서 사용된 속성과 닮아 있습니다.

속성	설명
data	외부 파일의 경로 지정
type	내용의 유형을 지정
name	요소의 이름 지정
width	나타낼 내용의 넓이 지정
height	나타낼 내용의 폭을 지정

속성을 지정할 때 data 또는 type 중 하나는 필수로 지정해야 합니다.

 

브라우저별 지원되는 코덱이 다르지만 크롬, 사파리가 가장 HTML5 표준에 충실하다고들 합니다. 이 때문에 최근에 MS도 Edge를 내놓은 것으로 알고 있습니다. (자세한 사항은 위키백과 참조^^) <audio> 태그를 사용하여 웹 페이지에 오디오 파일을 적용해 봅니다.

<audio src=오디오 파일></audio>

<audio> 태그에서 사용 가능한 속성에 대해 살펴봅니다.

속성	설명
autoplay	오디오 자동 재생
controls	화면에 컨트롤 막대 표시
loop	오디오 반복 재생
muted	오디오를 재생하지만 소리는 끔
preload	재생 전 파일만 다운로드해 재생 준비

 

구글에서 간단하게 sample-12.mp3를 받아 태그에 포함하여 실행해 봅니다.

autoplay, controls 속성을 적용하였기 때문에 바로 오디오 파일이 재생되면 화면에 컨트롤 막대가 표시되는 것을 확인합니다.

오디오와 마찬가지로 동영상 파일을 <video>태그를 사용하여 재생할 수 있습니다.

<video src=동영상 파일></video>

역시나 구글에서 간단하게 sample-13.mp4를 받아 태그에 포함하여 실행해 봅니다.

(구글링으로 받은 건데 나쁘지 않은 듯^^)

저는 최신 버전의 크롬 브라우저를 사용 중이라 별다른 문제 없이 동영상이 재생되지만 예전 버전 또는 여러 개의 동영상을 재생할 때는 <source>태그를 사용합니다. <source> 태그에는 동영상 종류에 맞는 코덱을 별도 지정할 수도 있습니다.

<source src=동영상 파일 type=파일 타입>

type 속성에는 웹 브라우저가 해당 파일의 재생 가능 여부를 확인할 수 있도록 파일의 유형을 알려줍니다.

 

동영상 파일 타입에는 video/ogg .ogv, video/mp4 .mp4, wideo/webm .webm과 같이 전달해야 합니다. 만약 HTML5를 지원하지 않는 브라우저에서 <video> 태그를 인식하지 못하는 것까지 고려한다면 플래시 무비로 변환하고 <object> 태그 또는<embed>태그를 사용하여 플래시 무비를 실행할 수 있도록 플러그인을 설치해야 합니다. 모든 웹브라우저가 HTML5 표준을 충실히 따른다면 생기지 않을 문제입니다.

---

이제 HTML도 기본적인 내용에 대한 학습이 마무리되어 갑니다. 어렴풋하게 알던 것을 이제 밑그림 그릴 수 있는 정도로만 파악했습니다.