비디오 삽입 (`<video>`)과 오디오 삽입 (`<audio>`)

비디오 삽입 (<video>)과 오디오 삽입 (<audio>)

HTML <video>와 <audio> 요소를 사용하여 비디오와 오디오를 웹 페이지에 삽입할 수 있습니다. 이번 글에서는 <video>와 <audio> 요소의 사용법과 주요 속성에 대해 자세히 알아보겠습니다.

비디오 삽입 (<video>)

<video> 요소를 사용하여 웹 페이지에 비디오를 삽입할 수 있습니다. 이를 통해 동영상 컨텐츠를 제공하거나, 광고 등의 멀티미디어 요소를 표시할 수 있습니다.

아래는 <video>를 사용하여 비디오를 삽입하는 예시입니다:

<video src="video.mp4" controls>
  이 브라우저는 비디오를 지원하지 않습니다.
</video>

위의 예시에서는 src 속성을 사용하여 비디오 파일의 경로를 지정하였고, controls 속성을 사용하여 비디오 컨트롤을 활성화하였습니다. 브라우저가 비디오를 지원하지 않을 경우에는 <video> 요소 내부의 텍스트가 표시됩니다.

오디오 삽입 (<audio>)

<audio> 요소를 사용하여 웹 페이지에 오디오를 삽입할 수 있습니다. 이를 통해 음악 재생, 팟캐스트, 음성 컨텐츠 등을 제공할 수 있습니다.

아래는 <audio>를 사용하여 오디오를 삽입하는 예시입니다:

<audio src="audio.mp3" controls>
  이 브라우저는 오디오를 지원하지 않습니다.
</audio>

위의 예시에서는 src 속성을 사용하여 오디오 파일의 경로를 지정하였고, controls 속성을 사용하여 오디오 컨트롤을 활성화하였습니다. 브라우저가 오디오를 지원하지 않을 경우에는 <audio> 요소 내부의 텍스트가 표시됩니다.

포맷 지원

비디오와 오디오 삽입에는 다양한 포맷이 지원됩니다. 주로 사용되는 포맷으로는 MP4, WebM, Ogg 등이 있습니다. <video>와 <audio> 요소의 src 속성을 통해 포맷에 맞는 파일을 지정해야 올바르게 재생됩니다.

마무리

HTML의 <video>와 <audio> 요소를 사용하여 비디오와 오디오를 웹 페이지에 삽입할 수 있습니다. 이를 통해 멀티미디어 컨텐츠를 제공하고 사용자에게 다양한 경험을 선사할 수 있습니다. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!