HTML 비디오와 오디오, 파일 삽입 등 멀티미디어 태그 사용법

비디오와 오디오 파일을 첨부하는 audio, video 태그

HTML 문서에 오디오 및 비디오 파일의 첨부가 필요할 때 각각 audio 태그와 video 태그를 사용하면 됩니다.

먼저 오디오 삽입에 사용되는 audio 태그는 src 속성을 사용해서 오디오 파일의 경로를 적어주면 되는데, 이때 로컬에 위치한 오디오 파일 외에도 웹상에 있는 오디오 파일의 URL을 적어주셔도 첨부가 됩니다.

비디오 삽입에는 video 태그를 사용하며, audio 태그와 마찬가지로 src 속성을 이용해 첨부할 비디오 파일의 경로를 적어줍니다.

이때, width 속성을 이용해 플레이어의 너비를 조정할 수 있습니다.

audio 태그와 video 태그의 주요 속성에는 웹페이지 로드 시 자동으로 미디어 재생여부를 결정하는 audoplay 속성과 미디어 제어(재생, 멈춤 등)에 사용되는 controls 속성이 있습니다.

audio, video 태그 주요 속성들
종류	설명
controls	플레이어 화면에 컨트롤 바를 표시
autoplay	오디오나 비디오를 자동으로 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정, auto, metadata, none 값을 사용 가능 기본값 preload="auto"
width, height	비디오 플레이어의 너비와 높이 지정
poster="파일 이름"	비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정

embed 태그는 외부 미디어 및 파일 등을 삽입할 수 있는 태그입니다.

비디오 및 오디오를 포함해서 PDF 파일과 같은 문서도 첨부할 수 있습니다.

embed 태그는 HTML5부터 정식 명세에 포함된 태그로써, 대부분의 브라우저에서 사용할 수 있습니다.

src 속성을 이용해 파일의 경로를 지정해 주고, type 속성에는 파일의 타입을 명시하게 됩니다.

object 태그는 오디오, 비디오, 자바 애플릿, PDF 등 멀티미디어 파일 삽입, 웹문서 안에 다른 문서를 삽입할 때도 사용 가능합니다.