-
비디오 삽입 (`<video>`)과 오디오 삽입 (`<audio>`)
IT창고/HTML 2023. 7. 19. 13:38반응형비디오 삽입 (
<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의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!반응형