HTML <video> 태그 – 올바른 이해와 사용 방법

`<video>` 태그의 정의 및 사용법

<video> 태그는
비디오 콘텐츠를 웹 페이지에 삽입할 때 사용합니다.

이 태그는 비디오 파일을 재생할 수 있는 미디어 플레이어를 제공하며,
다양한 속성을 활용하여 비디오의 재생 방식과 사용자 경험을 제어할 수 있습니다.

HTML

<!-- 단일 비디오 파일 작성법 (태그에 직접 src 속성 사용) -->
<video src="flower.mp4" controls></video>

<!-- 여러 형식의 비디오 파일 작성법 (source 태그 사용) -->
<video controls>
    <source src="flower.webm" type="video/webm">
    <source src="flower.mp4" type="video/mp4">
</video>

두 가지 작성 방법

<video> 태그는 두 가지 방법으로 작성할 수 있습니다.

단일 비디오 파일을 사용할 때 src 속성을 태그에 직접 설정하는 방법
여러 형식의 비디오 파일을 지원하려면 <source> 태그를 사용하여 각 파일을 별도로 지정하는 방법

HTML <video> 태그는 두 가지 방법으로 작성할 수 있습니다.

<!-- 단일 비디오 파일 작성법 (태그에 직접 src 속성 사용) -->
<!-- 비디오 파일을 직접 지정하는 간단한 방법 -->
<video src="example.mp4"></video>

<!-- 여러 형식 제공 작성법 (source 태그 사용) -->
<!-- 여러 형식의 비디오 파일을 제공하여
     비디오 파일 형식에 대한 브라우저 호환성을 높이는 방법 -->
<video>
     <source src="example.webm" type="video/webm">
    <source src="example.mp4" type="video/mp4">
</video>

참고
단일 비디오 파일의 경우에도 <source> 태그를 사용할 수 있습니다.
이 방식은 파일 형식 간의 효율적인 선택을 위해 유용하며, 각 형식의 장점에 맞는 최적화를 할 수 있습니다. 예를 들어, mp4는 널리 사용되고 호환성이 좋지만, webm은 같은 해상도와 품질에서 용량이 더 작아 빠른 로딩을 지원할 수 있습니다.

두 가지 작성 방법에 대한 자세한 설명은 src 속성에서 다룹니다.

관련 속성 사용하기

<video> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

video 태그의 관련 속성
속성	설명
`src`	삽입하려는 비디오 파일의 경로(URL)를 지정합니다.
`controls`	사용자 인터페이스(재생, 일시 정지, 음소거 버튼 등)를 표시합니다.
`autoplay`	페이지 로드 시 자동으로 비디오를 재생합니다. 이 속성만 있다고 해서 모든 브라우저에서 비디오가 자동 재생한다는 의미는 아닙니다. 브라우저 벤더의 자동 재생 정책을 따릅니다.
`playsinline`	모바일 브라우저에서 비디오를 재생할 때 화면을 전체로 확장하지 않고 현재 문서의 흐름 내(인라인, inline)에서 비디오를 재생하도록 설정합니다. 이 속성은 특히 iOS 기기와 같이 기본적으로 전체 화면으로 비디오를 재생하는 환경에서 유용합니다.
`muted`	비디오를 음소거 상태로 설정합니다.
`loop`	비디오 재생이 끝나면 다시 처음부터 재생합니다. 이 과정을 무한 반복합니다.
`poster`	사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 이미지 파일의 경로(URL)를 지정합니다.
`width`	비디오의 너비를 픽셀(`px`) 단위로 지정합니다.
`height`	비디오의 높이를 픽셀(`px`) 단위로 지정합니다.
`preload`	비디오의 데이터를 어떻게 미리 로드할지 지정합니다.
`crossorigin`	`src`로 지정한 비디오 파일이 외부 출처(다른 도메인)의 리소스인 경우 현재 웹 페이와의 상호작용을 할 수 있도록 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing)를 설정합니다.

`src` 속성

삽입하려는 비디오 파일의 경로(URL)를 지정합니다.

지원하는 비디오 파일 형식

브라우저에서 지원하는 비디오 파일 형식(format)은 mp4, webm 두 가지입니다.

지원하는 비디오 파일 형식과 설명
비디오 파일 형식	설명
`mp4`	널리 사용되는 형식으로, 고해상도와 높은 호환성을 제공합니다. 대부분의 브라우저와 기기에서 지원합니다.
`webm`	구글이 개발한 오픈 포맷으로, 비교적 용량이 작고 웹 스트리밍에 최적화되어 있습니다. 대부분의 브라우저에서 지원합니다. `mp4`와 비교할 때 일반적으로 동일한 해상도와 품질에서 용량이 더 작아 빠른 로딩을 지원할 수 있습니다.

지원하는 비디오 파일 형식에 대한 브라우저 호환성을 참조하세요.

비디오 파일 형식의 브라우저 호환성
비디오 파일 형식	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`mp4`	예	예	예	예
`webm`	예	예	예	예

caniuse.com에서 더 자세한 정보를 확인해 보세요.

비디오 파일 경로 지정하기

src 속성은 두 가지 방법으로 작성할 수 있습니다.

단일 비디오 파일을 사용할 때 src 속성을 <video> 태그에 직접 설정하는 방법
여러 형식의 비디오 파일을 지원하려면 <source> 태그를 사용하여 각 파일을 별도로 src 속성으로 지정하는 방법

src 속성으로 <video> 태그에 비디오 파일의 경로를 직접 지정할 수 있습니다.
또한, 비디오 파일 형식에 따른 브라우저 호환성을 고려해야 할 경우, 여러 형식을 제공하는 방법이 필요할 수 있습니다. 이때 <source> 태그를 사용하여 다른 형식의 비디오 파일을 지정할 수 있습니다.

HTML src 속성은 두 가지 방법으로 작성할 수 있습니다.

<!-- video 태그에 직접 src 속성 사용 -->
<!-- 비디오 파일을 직접 지정하는 간단한 방법 -->
<video src="example.mp4"></video>

<!-- source 태그에 src 속성 사용 -->
<!-- 여러 형식의 비디오 파일을 제공하여
     비디오 파일 형식에 대한 브라우저 호환성을 높이는 방법 -->
<video>
    <source src="example.webm" type="video/webm">
    <source src="example.mp4" type="video/mp4">
</video>

첫 번째 예제에서는 src 속성으로 단일 비디오 파일을 지정하며, 두 번째 예제에서는 <source> 태그를 사용하여 여러 형식의 비디오 파일을 제공하고 있습니다. 이를 통해, 브라우저가 가장 적합한 형식을 선택하여 재생할 수 있도록 할 수 있습니다.

`<video>` 태그에 `src` 속성 사용하는 방법

브라우저에서 지원하는 비디오 파일 형식(format) 중에서 mp4, webm 중 단일 비디오 파일을 지정할 경우 사용합니다.

`<source>` 태그에 `src` 속성 사용하는 방법

브라우저에서 지원하는 비디오 파일 형식(format) 중에서 mp4, webm 두 가지 형식을 모두 지정할 경우 사용합니다.

비디오 파일마다 <source> 태그에 src 속성으로 지정합니다.
브라우저는 여러 출처일 경우 출처를 작성한 순서에 따라 지원 가능한 파일을 사용하므로, mp4와 비교할 때 일반적으로 webm은 동일한 품질에서 용량이 더 작아 빠른 로딩을 지원하기 때문에, 가능한 한 webm 형식을 먼저 작성하는 것이 좋습니다.

이때, 선택적으로 type 속성을 사용하여 각 비디오 파일의 미디어 타입을 명시할 수 있습니다.
이렇게 하면 브라우저가 모든 비디오 파일 형식을 지원하는 것은 아니므로, 특정 형식이 필요하다는 정보를 제공하여 브라우저가 지원하는 비디오 파일을 빠르게 선택하고 최적의 성능을 제공하는 데 도움을 줍니다.

다음은 브라우저가 지원하는 비디오 파일 형식에 해당하는 미디어 타입입니다.

지원하는 비디오 파일 형식의 미디어 타입
비디오 파일 형식	미디어 타입
`mp4`	`video/mp4`
`webm`	`video/webm`

<video> 태그에 src 속성을 사용할 때에는 type 속성을 사용하지 않습니다. 단일한 파일 형태만을 지정하기 때문에 브라우저에 특정 형식이 필요하다는 정보를 제공할 필요가 없습니다.

단일 비디오 파일의 경우에도 <source> 태그를 사용할 수 있습니다. 단일 비디오 파일의 경우에는 일반적으로 <video> 태그에 직접 src 속성만 사용하는 것이 더 간단하고 직관적입니다.

`controls` 속성

지정하면 사용자 인터페이스(재생, 일시 정지, 음소거 버튼 등)를 표시합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

사용자 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다.

controls 속성을 지정하지 않으면 사용자 인터페이스는 표시되지 않습니다.

부연설명
비디오가 자동 재생되지 않거나, poster 속성으로 이미지 파일을 지정하지 않았을 경우에 비디오의 첫 번째 프레임이 포스터 프레임으로 표시되고 사용자 인터페이스는 표시되지 않습니다.

`autoplay` 속성

페이지 로드 시 자동으로 비디오를 재생합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

이 속성만 있다고 해서 모든 브라우저에서 비디오가 자동 재생한다는 의미는 아닙니다. 브라우저 벤더(브라우저 제조사)의 자동 재생 정책을 따릅니다.

유의할 점!

autoplay 속성을 지정하는 것만으로는 Google의 Chrome 브라우저나 iOS 기기에서는 비디오가 자동으로 재생되지 않습니다.

이것은 의도치 않은 광고 재생 등으로 인해 사용자들에게 불편함을 줄 수 있으며, 자동 재생되는 비디오로 인해 사용자들의 데이터를 소모하고 네트워크 대역폭을 차지할 수 있습니다. 특히 모바일 장치에서는 이러한 데이터 소모가 더 큰 문제가 될 수 있으며, 성능 저하를 유발할 수 있습니다.

다음의 예제는 autoplay 속성을 지정하는 것만으로 비디오가 자동으로 재생되지 않는다는 것을 보여줍니다.

그래서 Google의 Chrome, Apple의 Safari 등 대부분의 브라우저 벤더들은 사용자 경험 개선, 데이터 소비 감소 등을 이유로 비디오 자동 재생에 대한 정책을 가지고 있습니다.

이러한 비디오의 자동 재생에 대한 브라우저 제조사들의 정책에 대한 이해가 필요합니다.

브라우저에서 비디오 파일을 자동 재생하는 방법

핵심은 autoplay 속성과 함께 음소거를 지정하는 muted 속성이 반드시 같이 지정되어 한다는 것입니다.

여기에 Apple의 iOS 기기와 같이 기본적으로 전체 화면으로 비디오를 재생하므로, Apple에서는 모바일 디바이스 환경에서 playsinline 속성을 지정하여 모바일 브라우저에서 비디오를 재생할 때 화면을 전체로 확장하지 않고 현재 문서의 흐름 내(인라인, inline)에서 비디오를 재생하도록 설정해야 합니다.

브라우저에서 비디오 파일을 자동 재생하려면 주요 브라우저 호환성을 고려해서 다음의 세 가지 속성을 필수로 지정해야 합니다.

autoplay
muted
playsinline

브라우저에서 비디오 파일을 자동 재생하는 방법에 대한 자세한 설명은 HTML <video> 태그 자동 재생 완벽 가이드 - 자동 재생(autoplay) 안 됨 해결을 참고하세요.

`playsinline` 속성

모바일 브라우저에서 비디오를 재생할 때 화면을 전체로 확장하지 않고 현재 문서의 흐름 내(인라인, inline)에서 비디오를 재생하도록 설정합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

이 속성이 없다고 해서 비디오가 항상 전체 화면 모드로 재생된다는 의미는 아닙니다. 하지만 iPhone에서는 <video> 재생을 시작할 때 전체 화면 모드로 전환됩니다. 모바일 디바이스에서만 적용되는 속성입니다. Apple에서 고안하였습니다.

`muted` 속성

비디오를 음소거 상태로 설정합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

이 속성을 지정하지 않으면 비디오가 재생될 때 오디오도 같이 재생됨을 의미합니다.

`loop` 속성

비디오 재생이 끝나면 다시 처음부터 재생합니다. 이 과정을 무한 반복합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`poster` 속성

사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 이미지 파일의 경로(URL)를 지정합니다.

이 속성이 지정되지 않으면 비디오의 첫 번째 프레임이 사용 가능해질 때까지 아무것도 표시되지 않고, 첫 번째 프레임이 포스터 프레임으로 표시됩니다.

`width` 속성

비디오의 너비를 픽셀(px) 단위로 지정합니다.
픽셀(px) 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

`height` 속성

비디오의 높이를 픽셀(px) 단위로 지정합니다.
픽셀(px) 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

`preload` 속성

비디오 파일을 효율적으로 로드하는 방식이 중요합니다. 이를 위해 preload 속성이 활용됩니다.

preload 속성은 비디오 파일을 얼마나 미리 로드할지에 대한 힌트를 브라우저에 제공합니다.
이 속성의 값에 따라 브라우저는 비디오 데이터를 로드하는 방식을 결정합니다.

비디오 파일의 용량과 사용자 경험

비디오 파일은 일반 이미지보다 용량이 크므로, 이를 효율적으로 로드하는 방식이 중요합니다. preload 속성은 개발자가 브라우저에 미리 로드 전략을 제안하여 사용자 경험을 최적화하는 데 도움을 줍니다.

유의할 점!
브라우저가 반드시 preload 속성의 값을 따르는 것은 아닙니다. 이 속성은 단순히 힌트를 제공할 뿐이며, 브라우저는 네트워크 상태나 장치 성능에 따라 이를 무시할 수 있습니다.

이 속성은 다음 값들 중 하나를 가질 수 있습니다. 기본값은 브라우저마다 정책에 따라 다릅니다. (명세서에서는 metadata로 설정하라고 권장합니다.)

preload 속성의 값
`none`	비디오 데이터를 미리 로드하지 않습니다. 즉, 브라우저에게 불필요한 트래픽을 최소화하려는 의도를 전달합니다. 서버 리소스를 절약하거나 초기 로딩 시간을 줄이려는 경우에 사용합니다.
`metadata`	비디오의 메타데이터(크기, 트랙 목록, 길이 등)만 로드합니다. 사용자가 비디오를 재생하지 않을 가능성이 있지만, 기본 정보를 미리 제공하여 사용자 경험을 향상시키는 데 중점을 둡니다.
`auto`	브라우저가 판단하여 데이터를 미리 로드합니다. 필요에 따라 전체 비디오 데이터가 다운로드될 수도 있습니다. 즉, 브라우저는 사용자 경험을 최우선으로 고려하여 최적의 동작을 결정합니다.
빈 문자열(`""`)	`auto`와 동일합니다.

예제

위 코드 예제는 메타데이터(크기, 트랙 목록, 길이 등)만 로드하여 사용자가 재생 버튼을 클릭하기 전에 큰 파일을 미리 다운로드하지 않도록 합니다.

참고사항

배경 이미지로 비디오를 사용할 경우, 비디오 파일은 자동 재생(autoplay, muted playsinline 등을 지정해서)을 필요로 합니다. 이때, 브라우저는 preload 속성의 값보다 재생을 우선시하여 비디오 파일 다운로드를 시작합니다. 즉, preload 설정에 관계없이 비디오를 원활하게 재생하기 위한 데이터를 로드하게 됩니다.

`crossorigin` 속성

crossorigin 속성은 src로 지정한 비디오 파일이 외부 출처(다른 도메인)의 리소스인 경우 현재 웹 페이와의 상호작용을 할 수 있도록 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing)를 설정합니다.

허용되는 값은 다음과 같습니다.

crossorigin 속성의 값
`anonymous`	교차 출처 리소소 공유 체계 요청 시 인증 정보를 보내지 않도록 설정합니다.
`use-credentials`	교차 출처 리소소 공유 체계 요청 시 인증 정보를 보내도록 설정합니다. (예: cookie, certificate, HTTP Basic 인증)

crossorigin 또는 crossorigin=""처럼 빈 값을 할당하는건 anonymous와 동일합니다.

예제

HTML

<!-- 동일 출처(같은 도메인)의 리소스인 경우 -->
<video src="example.mp4"></video>

<!-- 외부 출처(다른 도메인)의 리소스인 경우 -->
<video src="https://example.com/video.mp4" crossorigin="anonymous"></video>
<video src="https://example.com/secure-video.mp4" crossorigin="use-credentials"></video>

브라우저 호환성

video 태그의 데스크탑 브라우저 호환성
데스크탑
태그와 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<video>`	3	12	3.5	3.1
`autoplay`	3	12	3.5	3.1
`controls`	3	12	3.5	3.1
`crossorigin`	33	18	74	10
`height`	3	12	3.5	3.1
`loop`	3	12	3.5	3.1
`muted`	30	12	11	5
`playsinline`	75	79	지원하지 않음	10
`poster`	3	12	3.6	3.1
`preload`	3	12	4	3.1
`src`	3	12	3.5	3.1
`width`	3	12	3.5	3.1

video 태그의 모바일 브라우저 호환성
모바일
속성	모바일 Chrome	모바일 Firefox	Safari
`playsinline`	75	지원하지 않음	10

명세서

video 태그의 명세서 사양
명세서 사양
`<video>`	HTML Standard #the-video-element

HTML <video> 태그 – 올바른 이해와 사용 방법

`<video>` 태그의 정의 및 사용법

두 가지 작성 방법

관련 속성 사용하기

`src` 속성

지원하는 비디오 파일 형식

비디오 파일 경로 지정하기

`<video>` 태그에 `src` 속성 사용하는 방법

`<source>` 태그에 `src` 속성 사용하는 방법

`controls` 속성

`autoplay` 속성

유의할 점!

브라우저에서 비디오 파일을 자동 재생하는 방법

`playsinline` 속성

`muted` 속성

`loop` 속성

`poster` 속성

`width` 속성

`height` 속성

`preload` 속성

비디오 파일의 용량과 사용자 경험

예제

참고사항

`crossorigin` 속성

예제

브라우저 호환성

명세서

참고문헌

같이 보기

<video> 태그의 정의 및 사용법

두 가지 작성 방법

관련 속성 사용하기

src 속성

지원하는 비디오 파일 형식

비디오 파일 경로 지정하기

<video> 태그에 src 속성 사용하는 방법

<source> 태그에 src 속성 사용하는 방법

controls 속성

autoplay 속성

유의할 점!

브라우저에서 비디오 파일을 자동 재생하는 방법

playsinline 속성

muted 속성

loop 속성

poster 속성

width 속성

height 속성

preload 속성

비디오 파일의 용량과 사용자 경험

예제

참고사항

crossorigin 속성

예제

브라우저 호환성

명세서

참고문헌

같이 보기

`<video>` 태그의 정의 및 사용법

`src` 속성

`<video>` 태그에 `src` 속성 사용하는 방법

`<source>` 태그에 `src` 속성 사용하는 방법

`controls` 속성

`autoplay` 속성

`playsinline` 속성

`muted` 속성

`loop` 속성

`poster` 속성

`width` 속성

`height` 속성

`preload` 속성

`crossorigin` 속성