[Web/HTML] HTML - 오디오와 비디오 삽입하기

✏️ 다양한 멀티미디어 파일을 삽입할 때 쓰는 <object> 태그

<object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입 시 사용, 웹 문서 안에 다른 문서를 삽입할 때도 사용 data 속성 안에 보여줄 멀티미디어 파일을 지정 후 width와 height 속성으로 크기를 조절

<object width="너비" height="높이" data="파일"></object>

✏️ 멀티미디어 파일을 삽입하는 <embed> 태그

<embed> 태그는 HTML 초기 버전부터 사용해서 대부분의 브라우저에서 사용 가능 src 속성을 사용해 삽입할 멀티미디어 파일을 지정. 오디오, 파일, 비디오 등 다양한 멀티미디어 파일 삽입 가능.  HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저에서도 <embed> 태그를 사용 가능, 닫는 태그가 없다

<embed src="파일 경로" width="너비" height="높이">

✏️ 오디오 파일을 삽입하는 <audio> 태그

과거에는 웹 브라우저에서 멀티미디어 파일을 사용하기 위해서는 플러그인 프로그램이 필요했으나 HTML5부터는 멀티미디어 파일을 삽입 후 바로 재생이 가능 배경 음악이나 효과음 등 오디오 파일을 사용할 때는 <audio> 태그를 사용 src 속성을 통해 파일의 경로를 지정하고 방문자가 음악을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성을 이용할 수 있음

<audio src="파일 경로" controls></audio>

✏️ 비디오 파일을 삽입하는 <video> 태그

<!-- <audio> 태그와 마찬가지로 src속성을 통해서 파일의 경로를 지정함
또한 controls 속성을 통해서 파일을 재생하고 멈출 수 있는 재생 버튼을 삽입할 수 있음 -->

<video src="파일 경로" controls width="너비"></video>

✏️ <audio>와 <video> 태그의 속성

controls : 플레이어 화면에 컨트롤 바를 표시함
autoplay : 오디오나 비디오를 자동으로 재생함
loop : 오디오나 비디오를 반복 재생
muted : 오디오나 비디오의 소리를 제거
preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. 지정할 수 있는 값으로는 auto, metadata, none이 있고 기본 값은 auto
width, height : 비디오 플레이어의 너비와 높이를 지정함
poster="파일 이름" : <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시할 이미지 지정