오디오와 비디오

<object> - 기존 html4에서 사용한 멀티미디어 요소 삽입 태그

<audio> - 웹 문서에 배경음악이나 효과음을 삽입하기 위한 태그

<audio> 태그의 속성

src - 재생할 오디오 파일의 경로를 나타낸다.
autoplay - 웹 문서 로딩 시에 오디오를 자동으로 재생시킨다.
controls - 기본으로 제공되는 재생 컨트롤 집합을 표시한다. 일반적으로 표시되는 컨트롤은 재생, 일시 정지, 검색 및 볼륨 설정이 포함된다.
loop - 재생할 오디오의 반복 재생을 설정한다.
muted - 오디오는 재생하지만 소리는 차단한다.
preload - 웹 문서 로딩 시에 오디오의 로딩 상태를 나타낸다.(none : 오디오를 재생하기 위해 미리 다운로드 하지 않음, metadata : 오디오에 대한 기본적인 정보들(크기, 첫 프레임, 오디오 길이 등)을 가져옴, auto : 오디오를 자동으로 재생하기 위해 다운로드를 수행함)

<video> - 웹 문서에 비디오를 삽입하기 위한 태그

<video> 태그의 속성

src - 재생할 비디오 파일의 경로를 나타낸다.
autoplay - 웹 문서 로딩 시에 자동으로 비디오를 재생시킨다.
controls - 기본으로 제공되는 재생 컨트롤 집합을 표시한다.
loop - 재생할 비디오를 반복 재생 설정한다.
muted - 비디오는 재생하지만 소리는 차단한다.
preload - 웹 문서 로딩 시 비디오의 로딩 상태를 나타낸다.(none : 비디오를 재생하기 위해 미리 다운로드 하지 않음, metadata : 비디오에 대한 기본적인 정보들을 가져옴, auto : 비디오를 자동으로 재생하기 위해 다운로드를 수행함)
poster - 비디오 데이터가 없는 경우, 브라우저에서 보여줄 수 있는 포스터 이미지 파일을 지정한다.
width - 비디오 플레이어의 폭을 지정한다.
height - 비디오 플레이어의 높이를 지정한다.

<source> 태그

<source> - 내용은 같지만 서로 다른 형식의 비디오 파일을 함께 제공할 때 사용하는 태그

브라우저마다 지원하는 코덱이 다르므로 <audio> 태그나 <video> 태그를 사용할 때, <source> 태그를 함께 사용하여 재생 불가 오류를 미연에 방지할 수 있다.

오디오와 비디오의 제어

getElementsByTagName() - HTML 태그의 이름으로 해당 태그를 인식하는 메소드(getElementsByTagName('name'))

getElementById() - HTML 태그의 'id' 값으로 해당 태그를 인식하는 메소드(getElementById('id'))

addEventListener() - HTML 문서 내의 특정 태그에 이벤트를 등록하는 메소드(addEventListener('이벤트', '이벤트 함수', 처리방식))

removeEventListener() - HTMl 문서 내의 특정 태그에 등록된 이벤트를 해제하는 메소드(removeEventListener('이벤트', '이벤트 함수'))

오디오와 비디오 제어를 위한 주요 속성

티스토리툴바