반응형
오디오 요소와 비디오 요소는 사운드의 재생과 동영상의 재생을 위한 요소입니다.
두 요소 모두 HTML4.01 이전에는 없었고 HTML5에 새로 추가된 요소입니다. 이전 버전의 HTML 문서에서도 사운드 파일과 비디오 파일을 재생할 수 있었습니다. 그러나 이전에는 embed요소와 object 요소를 사용했습니다. 하지만 많은 개발자와 디자이너, 퍼블리셔가 웹표준을 지향하고 공유할 수 있는 웹을 만들고자 하는 시대에 이것들을 하나의 문서가 아닌 플래시나 실버라이트, 미디어플레이어나 퀵타임 플레이어와 같은 외부 플러그인으로 작업하는 것은 장애와도 같은 것이라는 생각이 듭니다.
하지만 html5에서 제공하는 오디오 요소와 비디오 요소를 사용하면 외부의 플러그인을 사용하지 않고 내장된 플레이어로 음악이나 동영상을 감상할 수 있습니다. 이것은 멀티미디어 요소가 웹페이지의 일부분의 되는 것입니다. 이렇게 되면 웹의 기본 정신에도 부합되는 것이고 시맨틱한 웹페이지를 만드는 데 있어서 동영상도 그영역 안에 포함할 수 있게 됩니다.

비디오 재생을 위한 비디오 요소

ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
9.0 버전부터 지원 3.5 버전부터 지원 3.2 버전부터 지원 3.0 버전부터 지원 10.5 버전부터 지원
가장 기본적인 비디오 태그 사용 예와 지원하지 않는 브라우저를 위한 안내문구

위는 간단한 비디오 태그를 이용하여 비디오를 재생하기 위한 코드입니다.
오디오 태그와 별 반 차이는 없습니다.

비디오 태그에서 사용할 수 있는 속성

속성명 기능 및 역할
src 파일 경로 재생할 비디오 경로
autoplay 빈 값, autoplay 페이지가 로드되자마자 사운드를 재생할지 지정
controls 빈 값, controls 비디오를 제어할 수 잇는 컨트롤 패널 사용
preload none, auto, meta 페이지가 열리면 비디오를 미리 로드해 둠
none - 프리로드를 사용하지 않음
auto - 페이지가 모두 열리면 비디오 프리로드
meta - 페이지가 모두 열리면 비디오 메타정보만 로드
poster 이미지 URL 비디오가 로드 되기전에 보여 줄 이미지 설정
loop 반복횟수(숫자) 비디오를 몇 번 반복 재생할 것인지 설정
width 픽셀단위 숫자 비디오 스테이지의 너비
height 픽셀단위 숫자 비디오 스테이지의 높이

비디오 코덱 정리

비디오 코덱은 브라우저마다 지원하는 파일 포멧이 약간씩 다릅니다. 브라우저 지원별 코덱은 아래와 같습니다.

구분 ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
Theora(ogv, ogg) 지원 안함 지원함 지원 안함 지원함 지원함
H.264(mp4 등) 지원함 지원 안함 지원함 지원함 지원 안함
VP8(Web M) 지원함 지원함 미정 지원함 지원 안함
html5 비디오와 관련된 문제점(표준 포맷)

동영상 재생 코덱에는 H.264 코덱과 Ogg theora 코덱이 있습니다. H.264 코덱은 사파리와 크롬에서 기본적으로 지원합니다. 반면 오픈소스이며 라이센스 비용이 들어가지 않는 Ogg theora 코덱은 파이어폭스와, 오페라, 크롬에서 지원합니다. 또한 구글은 On2테크놀로지사를 인수하여 역시 오픈소스인 V8 기반의 '웹M'이라고 하는 새로운 동영상 포맷을 개발하였고 크롬이서 이를 지원한다고 하였습니다. 이러면서 구글은 동영상도 웹페이지의 일부가 되어야 한다고 주장하며 개방형 비디오를 지향한다고 말하고 있습니다. 그리하여 H.264코덱 사용을 고집하는 애플과 MS사 등 회사들간에 문제가 있어서 하나의 포맷 방식으로 통일화는 시일이 좀 걸릴 것 같습니다.

스크립트를 이용한 내장 미디어 컨트롤

자바스크립트를 이용해 'audio' 나 'video'와 같은 내장미디어를 재생시키거나 멈추게 할 수 있습니다.

기본적인 play 이벤트와 pause 이벤트를 이용한 외부 컨트롤 방법 (예제 첨부파일 참조)

//비디오 재생을 위한 play 함수
var play = function() {
	var videoTag = document.getElementsByTagName('video')[0]; //비디오 태그를 가져옴
	videoTag.play(); //videoTag 변수에 플레이 이벤트를 부여	
};
//비디오 일시 정지를 위한 pause 함수
var pause = function () {
	var videoTag = document.getElementsByTagName('video')[0]; //비디오 태그를 가져옴
	videoTag.pause(); //videoTag 변수에 일시정지 이벤트를 부여
};
video.zip
다운로드

 

document.getElementsByTagName('video')를 이용해서 HTML 마크업상에 있는 비디오 태그를 스크립트 안으로 가져옵니다. 이렇 가져온 비디오 태그는 'videoTag'라는 임의의 변수에 담고 재생 버튼이나 일시정지 버튼이 클릭될 경우 각 함수는 비디오 태그에 내장된 이벤트를 실행합니다.

HTML5 내장 미디어에서 사용할 수 있는 이벤트 핸들러
이벤트 이름 이벤트 설명
loadstart 미디어의 로딩이 시작될 때 발생하는 이벤트 입니다.
progress 미디어 다운로드 진행 상황의 부분을 주기적으로 알려주기 위해 발생하는 이벤트로 세 가지 속성을 가집니다.
  • - lengthComputable : 미디어의 전체 사이즈를 알면 'true'이고 아닐 경우는 'false'
  • - loaded : 지금까지 받은 미디어 크기의 바이트 단위 숫자
  • - total : 미디어 파일 전체 크기의 바이트 단위 숫자
suspend 미디어의 로딩이 중단되었을 때 발생하는 이벤트입니다. 미디어의 로딩이 완료되었거나 인터넷이 끊기는 등의 여러 가지 이유로 로딩이 중단되었을 때 발생합니다.
abort 재생이 중단되었을 때 발생하는 이벤트, 동영상이 재생되고 있다가 처음부터 다시 시작될 때 발생하는 이벤트 입니다.
error 에러가 발생한 경우에 발생하는 이벤트입니다.
emptied 미디어가 이미 다 로드되었거나 혹은 부분적으로 로드되었을 때 발생하는 이벤트입니다. 그리고 load() 메소드가 미디어를 다시 로드하라고 호출했을 때 발생합니다. 이는 미디어가 더 이상 로드할 것이 없어서 비어 있을 때를 의미합니다.(미디어가 완전히 없어서 빈 것과는 다릅니다.)
play 미디어를 새로 재생하거나 일시정지되어 있는 상태에서 연결하여 재생하는 이벤트입니다.
pause 재생 중인 미디어를 일시정지시키는 이벤트입니다.
loadedmetadata 미디어의 메타데이터가 모드 로드되었기 때문에 모든 속성은 앞으로 사용할 수 있는 유용한 정보를 담게 됩니다. 미디어의 메타데이터가 로드되었을 때 발생합니다.
loadeddata 미디어의 첫 번째 프레임의 로딩이 끝났을 때 발생합니다.
waiting 이미 요청된 작업(예를 들어 재생)을 잠시 보류하고 다른 작업(예를 들어 재생 위치 변경)을 먼저 끝낼 때 발생하는 이벤트입니다.
canplay 미디어가 재생되기에 충분한 데이터가 로드되었을 때 발생하는 이벤트입니다. 적어도 몇 개 정도의 프레임이 로드되어야 발생합니다.

인용자료 : HTML5 & CSS3(송종식)

반응형

+ Recent posts