[매일 HTML5 공부 12] Audio와 Video 요소

 

 

※ 클릭시 w3school로 이동 합니다

 

개요

 

기존 HTML4에서는 object 대신에 비표준인 embed 요소를 주로 사용해왔고,

플러그인 기반의 콘텐츠 삽입에는 object요소가 사용되었다.

그러나 object요소는 이미지, 플래시, 실버라이트, HTML문서, 오디오, 비디오 등 무엇이는 삽입하는 용도로 설계 되었기 때문에

브라우저가 오디오나 비디오 콘텐츠에 특화된 재생 컨트롤이라는것을 표시하기에는 너무 포괄적이였다.

HTML5에서는 video와 audio요소가 새로 생기면서 비디오와 오디오를 마크업할 수 있게 하였다.

이 두요소는 embed나 object와 다른 기능이 추가 되었다. 추가된 기능는 아래와 같다.

• 재생, 일시중지등 브라우저의 자체 콘트롤 사용가능
• source에 파일을 여러개 지정하여 브라우저의 비디오/오디오 형식 지원에 따라 자원을 표시할수 있다.

 

video

 

속성	설명
src	동영상 파일 URL
width	비디오 너비
height	비디오 높이
controls	재생 컨트롤 바
preload	"auto"속성이 지정되면 페이지가 로딩된 후 자동으로 비디오를 다운
autoplay	비디오를 재생할수 있는 상태가 되면 자동재생
loop	반복 재생
poster	재생 이전에 보여줄 이미지

 

 사용예)

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video⁄mp4">
  <source src="movie.ogg" type="video⁄ogg">
  Your browser does not support the video tag.
<⁄video>

 

audio

 

속성	설명
src	오디오 파일 URL
controls	재생 컨트롤 바
preload	"auto"속성이 지정되면 페이지가 로딩된 후 자동으로 오디오를다운
autoplay	오디오를 재생할수 있는 상태가 되면 자동재생
loop	반복 재생

 

사용예)

<audio controls>
  <source src="horse.ogg" type="audio⁄ogg">
  <source src="horse.mp3" type="audio⁄mpeg">
Your browser does not support the audio element.
<⁄audio>

Audio/Video 포맷

 

비디오와 오디오는 웹브라우저마다 지원하는 포맷이 다르다.

포맷은 크게 세가지로 구분된다.

 

컨테이너	비디오 코덱	오디오 코덱	지원브라우저
MP4	H.264	AAC
WebM	VP8	Vorbis
Ogg	Theora	Vorbis

 

 

브라우저별 다른 포맷을 제공하기 위해서는

아래와 같이 source요소를 나열하여 브라우저가 자신이 지원하는 포맷을 선택하여 플레이 할수 있도록 해야한다.

<video id="myvideo" width="640" height="360">
<source src="..⁄media⁄chrome.mp4" type='video⁄mp4; codecs="avc1.42E01E, mp4a.40.2"' ⁄>
<source src="..⁄media⁄chrome.webm" type='video⁄webm; codecs="vp8, vorbis"' ⁄>
<source src="..⁄media⁄chrome.ogv" type='video⁄ogg; codecs="theora, vorbis"' ⁄>
<⁄video>

Audio/Video DOM Reference

 

미디어 메소드, 속성, 이벤트들은 재생과 멈춤, 재생상태를 정의하고 있어

고유한 컨트롤러를 가지는 플레이어를 직접 만들 수 있게 되었다.

이러한 메소드, 속성, 이벤트들은 javascript로 조작할수 있다.

[참고 HTML Audio/Video DOM Reference]

 

Audio/Video 메소드

 

메소드	설명
addTextTrack()	Audio/Video 에 새로운 text트랙 추가
canPlayType()	웹브라우저가 Audio/Video를 재생할수 잇는지 체크
load()	Audio/Video를 다시 읽음
play()	Audio/Video 재생
pause()	Audio/Video 일지 정지

 

사용예)

var myVideo=document.getElementById("video1"); 
function playVid()
  { 
  myVideo.play(); 
  } 
function pauseVid()
  { 
  myVideo.pause(); 
  } 

Audio/Video 속성

 

속성	설명
currentSrc	실제로 읽어 들여 재생중인 데이터 URL
currentTime	현재 재생 위치(시간)
duration	데이터 길이(시간)
paused	일시정지 상태 여부
defaultPlaybackRate	기본 재생 속도 (기본값 1.0)
playBackRate	재생속도 (기본값 1.0), -일 경우 역재생 한다
ended	재생 종료 여부
muted	음소거 여부
volume	음량

 
사용예)

var video = document.getElementById("myvideo");
var rewind = document.getElementById("rewind");
var fastforword = document.getElementById("fastforword");

rewind.onclick =function(){
    video.playbackRate -= 1;
    log(video.playbackRate + "배속");
};
fastforword.onclick =function(){
    video.playbackRate += 1;
    log(video.playbackRate + "배속");
};

 

Audio/Video 이벤트

 

이벤트	설명
loadeddata	데이터 로딩
canplay	재생 시작 유무
canplaythrough	다운로드가 유지되면 마지막까지 재생할수 있는 시점에서 발생
load	데이터 다운로드
stalled	데이터 다운로드 느려짐
suspend	데이터 다운로드 중지(에러가 아닐때)
bort	데이터 다운로드 중지(에러 일때)
error	에러 발생
emptied	이전 데이터 비움
loadstart	로딩 시작
progress	로딩중
loadedmetadata	메타데이터 로딩