3-3. html 오디오와 비디오 태그

1. <object> 태그 

<object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, pdf 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 

<object> 태그를 사용하면 이런식으로 pdf 도 웹 브라우저에 추가해줄 수 있다. 

 

2. <embed> 태그 

embed 태그는 대부분의 브라우저에서 적용할 수 있는 태그로 <object>와 비슷하게 오디오, 비디오, 이미지 등 다양한 멀티 미디어 파일을 삽입할 수 있다. 

 

3. <audio>, <video> 태그 

이 두 태그는 사용법과 속성 모두 비슷하다. 

<audio> 태그에서는 html에서 배경음악이나 효과음 등 오디오 파일을 삽입할 때 사용한다. 

<video> 태그에서는 비디오 파일을 삽입할 때 사용한다. 

 

이때 controls 속성을 지정해주면 삽입한 파일에 사용자가 재생을 멈출 수 있도록 해준다. 

 

* <audio>, <video> 속성 

controls : 삽입한 파일에 컨트롤 바를 표시해 사용자가 재생을 멈출 수 있도록 한다.

autoplay : 오디오나 비디오를 자동으로 실행한다. 

loop : 오디오나 비디오를 계속 실행한다. (반복)

muted : 오디오나 비디오의 소리를 제거한다. 

preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. auto, metadata, none 이있다. 

width, height : 비디오 플레이어의 너비와 높이를 지정한다. 

poster = "파일 이름"  : 비디오 태그의 속성으로 비디오가 재생되기전에 유튜브 섬네일 같은 역할. 화면에 표시될 포스터 이미지 지정 

❗ 대부분의 브라우저에서 오디오에 소리가 있는 비디오 파일의 자동 재생을 금지하고 있기 때문에 muted를 해준다. 

 

 

이런식으로 소리 재생되지 않고, 자동 실행되어 반복된다.