이번 포스팅에서는 HTML을 이용하여 웹 페이지에 오디오와 비디오를 삽입하는 방법에 대해 알아보겠습니다. 이론부터 실습까지, 멀티미디어 요소를 효과적으로 활용하는 방법을 자세히 학습해 봅시다.
자동목차
이론
HTML5에서는 오디오(<audio>)와 비디오(<video>) 태그를 도입하여 웹 페이지에 직접 멀티미디어 요소를 삽입할 수 있게 되었습니다. 이를 통해 플러그인 없이도 오디오와 비디오 콘텐츠를 재생할 수 있습니다.
실습
아래의 코드는 오디오와 비디오 요소를 웹 페이지에 삽입하는 간단한 예시입니다.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
코드 설명
- <video>: 비디오를 재생하는 태그입니다. width와 height 속성으로 비디오의 크기를 지정하고, controls 속성으로 재생, 일시정지, 볼륨 조절 등의 컨트롤을 표시합니다.
- <source>: <video>나 <audio> 태그 내부에서 사용되며, 미디어 소스의 경로와 타입을 지정합니다. 여러 개의 <source> 태그를 사용하면 브라우저가 지원하는 첫 번째 미디어를 재생합니다.
- <audio>: 오디오를 재생하는 태그입니다. controls 속성을 사용해 재생, 일시정지, 볼륨 조절 등의 컨트롤을 표시할 수 있습니다.
마무리
HTML5의 <audio>와 <video> 태그를 이용하면 웹 페이지에 직접 멀티미디어 요소를 삽입할 수 있습니다. 이번 포스팅을 통해 오디오와 비디오 삽입 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.