코딩 스쿨 HTML

1. HTML Video란?

HTML Video는 웹 페이지에 비디오 콘텐츠를 포함하기 위해 사용되는 HTML 요소입니다.

2. HTML Video 태그의 기본 구조

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

3. HTML Video의 주요 속성

속성	설명	예시
src	비디오 파일의 URL.	<video src="video.mp4">
controls	비디오 재생 컨트롤을 표시.	<video controls>
autoplay	페이지 로드 시 비디오 자동 재생.	<video autoplay>
loop	비디오가 끝나면 자동으로 다시 재생.	<video loop>
muted	비디오를 음소거 상태로 재생.	<video muted>
width	비디오의 가로 크기를 설정.	<video width="640">
height	비디오의 세로 크기를 설정.	<video height="360">
poster	비디오 로드 전 표시할 이미지.	<video poster="thumbnail.jpg">
preload	비디오 로드 방식을 지정 (none, metadata, auto).	<video preload="metadata">

4. HTML Video의 예시

<video width="640" height="360" controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    비디오를 지원하지 않는 브라우저입니다.
</video>

5. 브라우저 호환성

HTML5 비디오 태그는 대부분의 현대 브라우저에서 지원되지만, 브라우저마다 지원하는 비디오 형식이 다를 수 있습니다. 일반적으로 사용되는 형식은 다음과 같습니다:

• MP4: 대부분의 브라우저에서 지원 (H.264 비디오 코덱)
• WebM: Chrome, Firefox, Opera 등에서 지원
• OGG: Firefox 및 Chrome에서 지원

브라우저 호환성을 고려하여 여러 형식의 비디오 소스를 제공하는 것이 좋습니다.