웹개발의 기본 언어 HTML 멀티미디어 오디오 비디오 파일 태그

---

1. 오디오 파일

 

오디오 파일을 삽입하기 위해서 이용하는 태그는 <audio></audio>입니다. 이미지 태그를 사용했을 때와 마찬가지로 src를 이용하여 경로를 알려주면 간단히 삽입이 가능합니다.

 

우선 실습을 위해 오디오 파일을 다운 받아주시거나 핸드폰에 녹음을 통한 오디오 파일을 받아주시면

실습 준비가 완료 됩니다. HTML 파일을 저장한 곳에 함께 두시면 번거롭게 모든 경로를 쓰지 않고 오디오 파일 이름만 경로에 기입하면 되기에 HTML파일과 같은 저장 위치에 오디오 파일을 두고 진행해 보도록 하겠습니다.

 

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

 

controls를 사용하는 이유는 사용자가 재생버튼을 눌러야만 오디오를 재생할 수 있도록 하기 위함입니다.

만약 자동으로 오디오를 실행하려면 autoplay를 입력하면 됩니다. 하지만 현재 사용할 수 있는 대부분의 웹브라우저에서는 자동 재생을 금지하고 있으니 코드를 제대로 입력했는데 파일이 자동재생이 안된다 하시는 분들은 마이크로소프트 엣지에서 확인하세요

 

 

2. 비디오 파일

 

비디오 파일을 웹에 넣을 수 있는 태그는 <video></video> 태그 입니다.

이 태그도 마찬가지로 src로 경로를 기입하면 비디오를 삽입하고 재생할 수 있게 됩니다.

 

<video src="비디오 파일경로" controls></video>

여기서는 한걸음 나아가서 위와같이 입력할 시 웹화면 전체를 꽉 채운 비디오파일이 보이게 됨으로

이미지 태그에서 사용했었던 width 속성을 이용하여 크기를 조정해 주면 깔끔하게 들어가는 모습을 보게됩니다.

 

---

비디오와 오디오를 삽입할 수 있도록 해주는 태그를 알아 봤는데요. 여기서 controls 속성과 같이 공통적으로 비디오와 오디오 태그를 사용할 때 쓰이는 속성들이 있기때문에 소개해 드리도록 하겠습니다.

 

일단 앞서 소개해드렸던 controls = 컨드롤 바를 표시해주어 사용자가 클릭시 재생이 가능하도록 해줍니다.

autoplay 오디오나 비디오를 자동 실행하며 반복재생으로 loop를 같이 사용할 수 있으나, 대부분의 웹브라우저에서는 사용이 불가능하니 참고하세요

muted = 비디오나 오디오의 소리를 제거해 줍니다.

preload 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할지를 정하는 값입니다. auto, metadata, none 과 함께 사용 가능하며 예시로 preload="auto"로 입력됩니다.

width, height = 이미지태그에서도 다룬적이 있습니다만, 오디오와 비디오에서도 같은 맥락으로 사용합니다.

---

비디오 태그에서만 사용 가능한 태그 속성은

poster="이미지 지정" 재생되기 전까지 화면에 표시될 포스터의 이미지를 지정할 수 있습니다.