HTML에서 <audio> 및 <video> 태그를 사용하여
웹 페이지에 오디오 및 비디오를 삽입하는 방법과 브라우저 호환성을 설명합니다.
목차
1. HTML에서 오디오 삽입
HTML에서는 <audio> 태그를 사용하여 웹 페이지에 오디오 파일을 삽입할 수 있습니다. 기본적인 사용 예제는 다음과 같습니다:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
위 코드에서 controls 속성을 추가하면 사용자가 재생, 일시 정지 등을 조작할 수 있는 인터페이스가 나타납니다.
2. HTML에서 비디오 삽입
비디오를 삽입할 때는 <video> 태그를 사용합니다. 기본적인 예제는 다음과 같습니다:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
브라우저가 비디오 태그를 지원하지 않습니다.
</video>
비디오 태그에도 controls 속성을 추가하여 사용자가 직접 재생을 조작할 수 있도록 설정할 수 있습니다.
3. 오디오 & 비디오 속성
오디오 및 비디오 태그에는 다양한 속성이 있습니다:
controls: 재생, 일시 정지 등의 버튼 표시autoplay: 자동 재생loop: 반복 재생muted: 음소거 상태로 시작poster: 비디오 로딩 전 표시할 이미지
4. 미디어 포맷과 브라우저 호환성
오디오 및 비디오 포맷은 브라우저마다 지원하는 것이 다를 수 있습니다. 대표적인 포맷은 다음과 같습니다:
| 미디어 유형 | 추천 포맷 | 호환 브라우저 |
|---|---|---|
| 오디오 | MP3, WAV, Ogg | Chrome, Firefox, Edge, Safari |
| 비디오 | MP4 (H.264), WebM, Ogg | Chrome, Firefox, Edge, Safari |
5. 결론
HTML을 활용하면 손쉽게 오디오 및 비디오를 웹 페이지에 삽입할 수 있습니다. <audio>와 <video> 태그를 적절히 사용하고, 브라우저 호환성을 고려하여 포맷을 선택하면 더욱 원활한 사용자 경험을 제공할 수 있습니다.