HTML5는 video 및 audio 태그를 통해 웹 페이지에서 영상과 음악을 쉽게 재생할 수 있게 해줍니다. 이 포스트에서는 간단한 HTML 코드를 사용하여 HTML5의 video 및 audio 태그를 어떻게 활용하는지 알아보겠습니다.

비디오 (Video) 태그

HTML5의 video 태그는 비디오 파일을 재생할 때 사용됩니다. 아래 예시는 웹 페이지에 비디오를 재생하기 위한 기본적인 코드입니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

위 코드에서 width와 height 속성은 비디오 플레이어의 가로, 세로 크기를 지정합니다. controls 속성을 사용하면 플레이어에 재생, 일시정지 등의 컨트롤이 표시됩니다. source 태그 안의 src 속성은 비디오 파일의 경로를 지정하고, type 속성은 파일의 유형을 지정합니다. 브라우저가 지정된 포맷을 지원하지 않을 경우 표시될 “Your browser does not support the video tag.” 메시지를 포함할 수 있습니다.

오디오 (Audio) 태그

HTML5의 audio 태그는 음악 파일을 재생할 때 사용됩니다. 아래 예시는 웹 페이지에 음악을 재생하기 위한 기본적인 코드입니다.

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

audio 태그 역시 controls, source 태그를 사용하여 비디오 태그와 동일한 방식으로 사용됩니다.

HTML5의 video 및 audio 태그를 이용하면 웹 페이지에서 멀티미디어 콘텐츠를 매우 손쉽게 재생할 수 있습니다. 해당 브라우저가 지원하는 비디오 및 오디오 형식을 지정하고 적절한 대체 콘텐츠를 제공하여 보다 더 풍부하고 다채로운 웹 경험을 제공할 수 있습니다.

더 많은 정보는 MDN web docs를 참고하세요.