From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/media/autoplay_guide/index.html | 262 ++++ files/ko/web/media/formats/index.html | 86 + .../index.html" | 1646 ++++++++++++++++++++ .../index.html" | 1279 +++++++++++++++ .../index.html" | 971 ++++++++++++ files/ko/web/media/index.html | 81 + 6 files changed, 4325 insertions(+) create mode 100644 files/ko/web/media/autoplay_guide/index.html create mode 100644 files/ko/web/media/formats/index.html create mode 100644 "files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" create mode 100644 "files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" create mode 100644 "files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" create mode 100644 files/ko/web/media/index.html (limited to 'files/ko/web/media') diff --git a/files/ko/web/media/autoplay_guide/index.html b/files/ko/web/media/autoplay_guide/index.html new file mode 100644 index 0000000000..f6199e5a75 --- /dev/null +++ b/files/ko/web/media/autoplay_guide/index.html @@ -0,0 +1,262 @@ +--- +title: 미디어 및 Web Audio API 자동 재생 가이드 +slug: Web/Media/Autoplay_guide +translation_of: Web/Media/Autoplay_guide +--- +

페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스럽게 쓰여야 합니다. 사용자가 이를 컨트롤 할 수 있게 여러 브라우저들은 미디어 자동 재생을 막는 기능을 제공하고 있습니다. I본 가이드 문서에서는 다양한 미디어와 Web audio API를 통한 자동 재생 기능에 대해 소개하고 자동 재생을 하는 법과 브라우저의 자동 재생 방지 기능에 깔끔하게 대처하는 법에 대해 알아봅니다.

+ +

{{HTMLElement("video")}} 엘리먼트에 오디어 트랙이 없거나 음소거인 경우에는 자동 재생 방지 기능에 영향받지 않습니다. 활성화된 오디오 트랙을 가진 미디어는 audible로 취급하고 자동 재생 방지 기능이 동작합니다. Inaudible 미디어는 그렇지 않습니다.

+ +

자동 재생과 자동 재생 방지

+ +

자동 재생(autoplay) 이라는 용어는 사용자의 재생 요청 없이 오디오를 재생하는 모든 기능을 총칭합니다. HTML attribute를 통해 재생하거나 사용자 입력 외의 코드에서 Javascript를 통해 재생하는 경우을 포합합니다.

+ +

이 말은 브라우저는 아래 두 경우 모두를 자동 재생 동작으로 인지하고 자동 재생 방지 기능을 적용한다는 의미입니다:

+ +
<audio src="/music.mp4" autoplay>
+ +

와

+ +
audioElement.play();
+ +

아래 웹 기능과 API는 자동 재생 방지 기능에 영향을 받습니다:

+ + + +

사용자의 입장에서는 웹 페이지나 앱이 의도와 무관하게 소음을 내기 시작하면 불쾌하거나 거슬릴 가능성이 높습니다. 때문에 일반적으로 브라우저는 특정 조건 하에서만 자동 재생이 가능하도록 허용하고 있습니다.

+ +

자동 재생 가능 여부

+ +

일반적으로 아래 조건 중 하나라도 해당된다면 자동 재생이 가능하다고 볼 수 있습니다

+ + + +

이외에는 자동 재생이 막힐겁니다. 정확한 차단 케이스나 사이트를 화이트리스트에 등재하는 방식 등은 브라우저마다 모두 다릅니다. 하지만 위의 케이스들이 좋은 가이드라인이 될 수 있겠죠.

+ +

자세한 것은 Google Chrome과 WebKit의 자동 재생 정책을 참조하세요.

+ +
+

Note: 사용자 인터랙션이 이루어지지 않은 탭에서 오디오가 포함된 미디어를 프로그램적으로 수행하면 일반적으로 차단됩니다. 차단 조건은 브라우저별로 몇 개 더 추가 될 수 있습니다.

+
+ +

미디어 엘리먼트 자동 재생

+ +

이제 자동 재생이 무엇인지, 자동 재생을 방지하는 것은 무엇인지에 대해 자세히 알아봅시다. 자페이지가 로드될 때 어떻게 자동으로 재생하는지, 자동 재생이 실패한 경우를 어떻게 알아내는 지 그리고 브라우저가 자동 재생을 금지한 경우 어떻게 대응할지 알아봅시다.

+ +

autoplay 속성

+ +

가장 간단한 자동 재생 방법은 {{HTMLElement("audio")}}나 {{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "audio")}} 속성을 추가하는 겁니다. 이는 {{domxref("HTMLMediaElement.autoplay", "autoplay")}} 속성을 true로 지정하며, autoplay가 true면 아래 조건이 만족된 직후부터 자동 재생을 시도합니다:

+ + + +

예제: autoplay 속성

+ +

{{HTMLElement("audio")}} 엘리먼트의 autoplay 속성을 사용하는 경우는 아래와 같습니다:

+ +
<audio id="musicplayer" autoplay>
+  <source src="/music/chapter1.mp4"
+</audio>
+
+ +

예제 2: 자동재생 실패 탐지

+ +

자동 재생 기능이 중요하거나, 자동 재생 실패 시 앱에 큰 영향이 가해진다면, 여러분은 아마도 자동 재생이 실패하는 시점을 알고 싶을겁니다. 안타깝게도 {{htmlattrxref("autoplay", "audio")}} 속성을 사용하는 경우, 자동 재생 성공 여부를 알아내는 것이 쉽지 않습니다. 자동 재생 실패 시 발생하는 이벤트가 없기 때문이죠. 게다가 익셉션 또는 콜백, 심지어 자동 재생이 되었을 때 켜지는 플래그조차 없습니다. 여러분이 할 수 있는 건 몇 가지 변수를 체크하거나 경험적으로 자동 재생이 동작했는지 판단할 수 밖에 없습니다.

+ +

더 좋은 방법으로는 앱의 동작 방식을 자동 재생 실패를 탐지하기보다 성공을 탐지하는 방향으로 조정하는 것입니다. 이 방법은 간단한데, 미디어 엘리먼트에서 {{event("play")}} 가 발생하길 기다리는 것입니다.

+ +

play 이벤트는 일시 정지된 후 재생될때와 자동 재생이 동작하는 두 경우 모두 발생합니다. 이 말은 즉 play 이벤트가 최초로 발생했다면 페이지가 열린 후 미디어가 처음으로 재생되었다는것을 알 수 있다는 말이죠.

+ +

아래 HTML 코드를 확인 해 보세요:

+ +
<video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)">
+ +

{{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "video")}} 속성이 설정되어 있으며, {{domxref("HTMLMediaElement.onplay", "onplay")}} 이벤트 핸들러도 지정되어 있습니다; 이벤트는 handleFirstPlay() 함수로 전달되며 play 이벤트를 인자로 받습니다.

+ +

handleFirstPlay() 는 아래와 같습니다:

+ +
function handleFirstPlay(event) {
+  let vid = event.target;
+
+  vid.onplay = null;
+
+  // Start whatever you need to do after playback has started
+}
+ +

{{domxref("Event")}} 객체의 {{domxref("Event.target", "target")}} 프로퍼티로 비디오 엘리먼트 참조를 얻은 뒤에, 엘리먼트의 onplay 핸들러를 null로 세팅합니다. 이렇게 하면 향후 모든 play 이벤트가 핸들러로 전달되는 것을 방지합니다. 비디오 일시 정지 후 사용자가 재생하거나 백그라운드 탭으로 전환된 후 브라우저에 의해 자동으로 재생될 때 발생할 수 있습니다.

+ +

이 시점에서 여러분의 사이트나 앱은 비디오 시작 후 필요한 모든 작업을 수행할 수 있습니다.

+ +
+

Note: autoplay 또는 사용자가 직접 재생하는 경우에도 위 방법은 차이점은 없습니다.

+
+ +

play() 메소드

+ +

사용자 입력 이벤트에서 시작된 컨텍스트 밖에서 오디오가 포함된 미디어를 재생하는 시나리오도 자동 재생(autoplay)라 부릅니다. 미디어 엘리먼트의 {{domxref("HTMLMediaElement.play", "play()")}} 메소드를 호출하면 가능합니다.

+ +
+

Note: 가능하다면 autoplay 속성을 사용하는 걸 항상 추천합니다. 왜냐면 다른 방식으로 자동 재생하는 방법보다 autoplay 속성에 대한 지원이 더 잘 되어 있기 때문입니다. 또한 자동 재생 방식과 시점을 브라우저가 최적으로 결정할 수 있게 합니다.

+
+ +

예시: 비디오 재생

+ +

아래는 문서 내의 첫번째 {{HTMLElement("video")}} 엘리먼트를 찾아 재생하는 간단한 예제입니다. play() 는 자동 재생 권한을 획득하기 전까지는 재생하지 않습니다.

+ +
document.querySelector("video").play();
+ +

예시: play() 실패 처리

+ +

{{domxref("HTMLMediaElement.play", "play()")}} 메소드로 재생한 경우 자동 재생 실패를 탐지하는 것은 매우 쉽습니다. play() 함수가 재생 성공시 resolve되고 실패 시(자동 재생이 거부되거나) reject되는 {{jsxref("Promise")}}를 반환하기 때문이죠. 자동 재생이 실패한 경우 수동으로 사용자에게 자동 재생 권한을 요청하면 됩니다.

+ +

아래와 같은 코드로 해결할 수 있습니다:

+ +
let startPlayPromise = videoElem.play();
+
+if (startPlayPromise !== undefined) {
+  startPlayPromise.catch(error => {
+    if (error.name === "NotAllowedError") {
+      showPlayButton(videoElem);
+    } else {
+      // Handle a load or playback error
+    }
+  }).then(() => {
+    // Start whatever you need to do only after playback
+    // has begun.
+  });
+}
+
+ +

play()의 반환값이 undefined가 아닌 지 먼저 확인해야합니다. 과거 버전 HTML 표준에서는 play() 의 반환 값이 정의되어 있지 않기 때문입니다. Promise를 반환하여 재생 성공/실패를 알 수 있게 된 것은 최근의 일입니다. undefined인지 체크하여 구형 브라우저에서 오류가 발생하지 않도록 하세요.

+ +

그 후 promise에 {{jsxref("Promise.catch", "catch()")}} 핸들러를 추가합니다. 핸들러는 에러의 {{domxref("DOMException.name", "name")}}이 NotAllowedError인지 체크합니다. 이는 재생이 실패한 이유가 자동 재생 금지 같은 퍼미션 문제인지 알 수 있습니다. 그 경우 여러분은 사용자가 직접 재생할 수 있도록 UI를 표시해야 합니다; showPlayButton() 함수가 하는 일이죠.

+ +

다른 에러도 적절하게 처리해 줍니다.

+ +

play()가 반환 한 promise가 에러 없이 resolveed 되면, then() 절에서 자동 재생 성공 후 하려는 뭐든지 수행하면 됩니다.

+ +

Web Audio API를 이용한 자동 재생

+ +

웹사이트나 앱에서 Web Audio API의 {{domxref("AudioContext")}} 같은 노드에서 start() 메소드를 호출하여 오디오를 자동 재생할 수 있습니다. 사용자 입력 컨텍스트에 벗어난 곳에서 호출할 경우에는 자동 재생 규칙이 적용됩니다.

+ +

상세한 내용 추가 예정; 모질라는 아직 자동 재생 방지 기능을 작업 중입니다. 다른 곳에 이미 구현되었다면 여기에 마음 껏 내용을 추가해 주세요...

+ +

자동 재생 기능 정책

+ +

지금까지 설명한 브라우저 측의 자동 재생 관리 및 처리 기능도 있지만, 웹 서버도 자동 재생 여부를 결정할 수 있습니다. {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} 헤더의 autoplay 디렉티브가 해당 용도입니다. 존재만 하면 자동 재생할 때 쓸 수 있습니다. 기본적으로 autoplay의 allowlist는 'self' (홑따옴표 포함)이며, 현재 문서와 동일한 domain에만 허용하고 있습니다.

+ +

'none'으로 지정하여 전역으로 자동 재생을 막을 수 있습니다. '*' 는 모든 도메인에서 전송된 미디어를 자동 재생하도록 허용합니다. 오리진은 하나의 space 문자로 구분 됩니다.

+ +
+

Note: 명시된 feature policy는 현재 문서와 내부의 모든 {{HTMLElement("iframe")}}에 적용됩니다. 단 {{htmlattrxref("allow", "iframe")}} 어트리뷰트를 가진 iframe과 해당 프레임의 내부 프레임은 새로운 feature policy가 적용되며 상위의 feature policy는 무시됩니다.

+
+ +

<iframe>에 {{htmlattrxref("allow", "iframe")}}를 추가하여 해당 프레임과 내부 프레임에 feature policy를 적용하면, {{htmlattrxref("src", "iframe")}} 어트리뷰트에서 지정된 도메인에서만 미디어를 자동 재생 하도록 허용할 수 있습니다.

+ +

예시: document의 domain에서만 자동 재생 허용

+ +

{{HTTPHeader("Feature-Policy")}} 헤더를 사용하여 document의 {{Glossary("origin")}}에서만 자동 재생을 허용하는 예시입니다:

+ +
Feature-Policy: autoplay 'self'
+ +

{{HTMLElement("iframe")}}에서 동일한 작업을 합니다:

+ +
<iframe src="mediaplayer.html"
+        allow="autoplay 'src'">
+</iframe>
+
+ +

예시: 전체 화면에서 자동 재생 허용

+ +

이전 예시에 추가로 Fullscreen API 권한을 더하면 Feature-Policy 헤더는 아래와 같습니다. 도메인에 상관 없이 허용한 경우인데요; 필요하다면 도메인 제한을 추가할 수 있습니다.

+ +
Feature-Policy: autoplay 'self'; fullscreen
+ +

<iframe> 엘리먼트의 allow 프로퍼티를 통해서 동일한 작업을 하면 아래와 같습니다:

+ +
<iframe src="mediaplayer.html"
+        allow="autoplay 'src'; fullscreen">
+</iframe>
+
+ +

예시: 특정 리소스만 자동 재생 허용

+ +

document(또는 <iframe>)의 도메인과 https://example.media 에서만 자동 재생을 허용하기 위해서는 Feature-Policy 를 아래와 같이 작성합니다:

+ +
Feature-Policy: autoplay 'self' https://example.media
+ +

그리하여 {{HTMLElement("iframe")}} 역시 자신과 자식 프레임에서 자동 재생 정책을 사용하기 위해 아래와 같이 작성할 수 있습니다:

+ +
<iframe width="300" height="200"
+        src="mediaplayer.html"
+        allow="autoplay 'src' https://example.media">
+</iframe>
+
+ +

예시: 자동 재생 비활성

+ +

autoplay feature policy를 'none'으로 지정하면 전체 document, <iframe> 및 모든 내부 프레임에서 자동 재생이 불가능합니다. 헤더는 다음과 같습니다:

+ +
Feature-Policy: autoplay 'none'
+ +

<iframe>의 allow 어트리뷰트를 쓴다면:

+ +
<iframe src="mediaplayer.html"
+        allow="autoplay 'none'">
+</iframe>
+
+ +

유용한 사례

+ +

자동 재생을 적절하게 활용하기 위한 팁과 사례들을 모아 보았습니다.

+ +

Media control을 통해 자동 재생 실패 처리하기

+ +

자동 재생하는 대표적인 케이스는 본문이나 광고 또는 페이지의 메인 기능에 대한 프리뷰로써 짧은 비디오 클립을 자동으로 재생하는 경우입니다. 이 경우 두 가지 선택지가 있습니다: 오디오가 없는 비디오를 재생하거나, 오디오가 있어도 기본적으로 음소거하거나, 아래처럼요:

+ +
<video src="/videos/awesomevid.webm" controls autoplay muted>
+ +

이 비디오 엘리먼트는 user control 어트리뷰트가 설정되어 있습니다 (보통 재생/일시정지, 비디오 타임라인 탐색, 볼륨 컨트롤, 음소거 등); 또한 {{htmlattrxref("muted", "video")}} 어트리뷰트가 포함되어 있어 자동 재생 되지만 음소거 상태입니다. 하지만 사용자는 볼륨 버튼을 클릭하여 음소거를 해제할 수 있죠.

+ +

브라우저 설정 옵션

+ +

브라우저는 보통 자동 재생 동작 방식을 컨트롤하기 위한 사전 설정, 혹은 자동 재생 방지 처리법을 가지고 있습니다. 그런 사전 설정들 중에 웹개발자인 여러분들에게 중요하거나 유용할 사전 설정들을 나열해 보았습니다. 이 설정들은 테스트 및 디버깅에 필요할 뿐만 아니라 실제로 도입되기 전 준비하는 데에도 유용합니다.

+ +

Firefox

+ +
+
media.allowed-to-play.enabled
+
{{domxref("HTMLMediaElement.allowedToPlay")}} 프로퍼티의 노출 여부를 불리언 값으로 표현합니다. 현재는 기본값이 false 입니다(nightly builds는 예외로, 기본 값이 true 입니다). false라면, HTMLMediaElement에 allowedToPlay 프로퍼티가 없으며, {{HTMLElement("audio")}}와 {{HTMLElement("video")}} 엘리먼트에도 없습니다.
+
media.autoplay.allow-extension-background-pages
+
불리언 값으로, true라면 브라우저 확장의 백그라운드 스크립트가 오디오를 자동 재생 할 수 있습니다. false로 세팅하면 해당 기능을 막습니다. 기본 값은 true입니다.
+
media.autoplay.allow-muted
+
불리언 값으로 (기본 값) true는 현재 음소거 상태인 오디오 자동 재생을 허용합니다. false로 바뀔 때 오디오 트랙이 포함된 미디어는 음소거 상태라도 자동 재생이 불가능합니다.
+
media.autoplay.block-webaudio
+
Web Audio API를 통한 자동 재생도 차단할 지 여부를 불리언값으로 표현합니다. 기본 값은 true입니다.
+
media.autoplay.default
+
도메인 별 자동 재생 설정 값을 정수로 표현합니다. 허용 (0), 금지 (1), 확인 요청 (2). 기본 값은 0입니다.
+
media.autoplay.enabled.user-gestures-needed (Nightly builds only)
+
media.autoplay.default 값에 우선하여 사용자 제스쳐 적용 여부를 불리언 값으로 표현합니다. media.autoplay.default 값이 0이 아닌 경우(자동 재생이 기본으로 허용), 이 설정이 true 일 때 사용자 제스쳐를 통한 activation 후 오디오 트랙이 있는 미디어의 자동 재생이 가능해 집니다. 오디오가 없는 미디어는 제한되지 않습니다.
+
media.block-autoplay-until-in-foreground
+
백그라운드 탭에서 미디어 재생 시 제한 여부를 불리언 값으로 표현합니다. 기본 값 true는 다른 값이 허용이더라도 포그라운드에 탭이 올라오기 전까지 자동 재생이 불가능합니다. 이 설정은 어느 탭에선가 오디오를 재생했는데 사용자는 찾지 못해 탭을 뒤적이는 등의 짜증나는 시츄에이션을 방지해 줍니다.
+
+ +

더 보기

+ + diff --git a/files/ko/web/media/formats/index.html b/files/ko/web/media/formats/index.html new file mode 100644 index 0000000000..08785a2212 --- /dev/null +++ b/files/ko/web/media/formats/index.html @@ -0,0 +1,86 @@ +--- +title: Guide to media types and formats on the web +slug: Web/Media/Formats +tags: + - API + - Audio + - Codecs + - Containers + - File Types + - Files + - Filetypes + - Landing + - Media + - NeedsTranslation + - TopicStub + - Types + - Video + - Web + - formats +translation_of: Web/Media/Formats +--- +

Since nearly the beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.

+ +

This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web. Browser support information for various combinations of these is also provided, and suggestions for prioritization of formats as well as which formats excel at specific types of content are also provided.

+ +
+
+

References

+ +

Images

+ +
+
 Image file type and format guide
+
Covers image file type and content format support across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.
+
Image file types for web designers
+
Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
+
+ +

Media file types and codecs

+ +
+
Media containers (file types)
+
A guide to the file types that contain media data. Some are audio-specific, while others may be used for audio and/or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.
+
+ +
+
Web audio codec guide
+
A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. The support each browser has for using the codec in given containers is also covered.
+
Web video codec guide
+
This article provides basic information about the video codecs supported by the major browsers, as well as potentially some not commonly supported that you might still run into. Codec capabilities, benefits, limitations, and browser support levels and restrictions are covered as well.
+
The "codecs" parameter in common media types
+
When specifying the MIME type describing a media format, you can provide details using the codecs parameter as part of the type string. In this guide, the format and possible values of the codecs parameter for the common media types are described.
+
Codecs used by WebRTC
+
WebRTC doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. In this guide, the codecs commonly used with WebRTC are discussed.
+
+
+ +
+

Guides

+ +

Concepts

+ +
+
Digital audio concepts
+
An introduction to how audio is converted into digital form and stored for use by computers. Basics about how audio is sampled are explained, as are concepts such as sample rate, audio frames, and audio compression.
+
Digital video concepts
+
A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.
+
+ +

Tutorials and how-tos

+ +
+
Learning: Video and audio content
+
In this tutorial, the use of media on the web is introduced and covered in reasonable detail.
+
Handling media support issues in web content
+
In this guide, we look at how to build web content that maximizes quality and/or performance while providing the broadest possible compatibility by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.
+
+ +

Other topics

+ +
+
Media Capabilities API
+
The Media Capabilities API lets you determine the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.
+
+
+
diff --git "a/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" "b/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" new file mode 100644 index 0000000000..5cccc89329 --- /dev/null +++ "b/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" @@ -0,0 +1,1646 @@ +--- +title: 웹 비디오 코덱 가이드 +slug: Web/Media/Formats/비디오코덱 +translation_of: Web/Media/Formats/Video_codecs +--- +

압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

+ + + +

비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.

+ +

대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.

+ +

이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.

+ +

일반 코덱

+ +

웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
코덱 이름 (축약어)전체 코덱 이름지원하는 컨테이너
AV1AOMedia Video 1MP4, WebM
AVC (H.264)Advanced Video Coding3GP, MP4, WebM
H.263H.263 Video3GP
HEVC (H.265)High Efficiency Video CodingMP4
{{anch("MP4V-ES")}}MPEG-4 Video Elemental Stream3GP, MP4
{{anch("MPEG-1")}}MPEG-1 Part 2 VisualMPEG, QuickTime
{{anch("MPEG-2")}}MPEG-2 Part 2 VisualMP4, MPEG, QuickTime
TheoraTheoraOgg
VP8Video Processor 83GP, Ogg, WebM
VP9Video Processor 9MP4, Ogg, WebM
+ +

인코딩 관여 요소

+ +

어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.

+ +

요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를  많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.

+ +

인코딩 된 비디오에 영향을 끼치는 소스 포맷

+ +

소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.

+ +

또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
인코딩 된 비디오의 품질과 크기에 영향을 줄 수 있는 비디오 포맷과 콘텐츠
기능품질에 영향크기에 영향
Color depth (bit depth)색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강  [rgba(255, 0, 0, 1)] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다.코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다.
프레임 레이트이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 {{anch("Frame rate")}} 절을 참조하세요.인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다.
움직임(Motion)비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video.움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다.
잡음(Noise)픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠.이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다.
해상도(width, height)압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다.해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠.
+ +

위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.

+ +

인코딩 결과물에 영향을 끼치는 코덱 설정

+ +

비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.

+ +

또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
품질과 크기에 영향을 미치는 비디오 인코더 설정
기능품질에 영향크기에 영향
무손실 압축품질 손실 없음손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다.
+

손실 압축

+ 		특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다.원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다.
품질 세팅품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다.보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요.
비트레이트품질을 높이면 보통 비트레이트도 높아집니다.비트레이트가 높으면 결과물 파일도 커지죠.
+ +

인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.

+ +

압축 아티팩트

+ +

아티팩트는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.

+ +

이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 키 프레임(인트라-프레임 또는 i-프레임)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.

+ +

위신호(Aliasing)

+ +

위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:

+ + + + + + + + + + + + + + + + +
+

모아레 현상(Moiré patterns)

+ +

{{interwiki("모아레 현상-Moiré pattern")}}는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.

+
+

계단 현상

+ +

계단 현상은 공간적 아티팩트의 하나로 부드러워야 할 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.

+
+

마차 바퀴 현상

+ +

마차 바퀴 현상 (또는 {{interwiki("wikipedia", "스트로보 효과")}})은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다. 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선 속도에 간섭하여 발생합니다.

+
+ +

컬러 엣징(Color edging)

+ +

컬러 엣징은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.

+ +

선명도 손실

+ +

비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.

+ +

선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.

+ +

링잉 효과(Ringing)

+ +

손실 압축 알고리즘은 링잉 효과 {{interwiki("wikipedia", "ringing artifacts", "ringing")}}를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.

+ +

Example of the ringing effect

+ +

위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 {{anch("Mosquito noise", "mosquito noise")}}와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.

+ +

링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.

+ +

포스터라이징(Posterizing)

+ +

포스터리제이션은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.

+ +

+ +

위 이미지상 흰머리 수리의  깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.

+ +

컨투어링(Contouring)

+ +

컨투어링 또는 컬러 밴딩은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다.  결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.

+ +

Example of an image whose compression has introduced contouring

+ +

위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.

+ +

모스키토 노이즈(Mosquito noise)

+ +

모스키토 노이즈는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 edge busyness가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는  {{anch("Ringing", "ringing")}} 효과와 유사합니다.

+ +

+ +

위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.

+ +

모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.

+ +

움직임 보상 블록 경계면 아티팩트

+ +

일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.

+ +

{{interwiki("wikipedia", "움직임 보상")}}은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다.  그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 residual frame이라 부릅니다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
원본 프레임인터-프레임 차이점움직임 보상 이후 차이점
Original frame of videoDifferences between the frames after shifting two pixels right
시청자에게 보이는 최초 전체 프레임이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다. 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을 써먹기에 아주 좋은 후보죠.차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.
Images from Wikipedia
+ +

움직임 보상에는 두 가지 형태가 있습니다: 전역 움직임 보상 과 블록 움직임 보상입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.

+ +

하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.

+ +

프레임 크기 감소

+ +

특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.

+ +

프레임 레이트 감소

+ +

비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.

+ +

사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.

+ +

결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.

+ +

코덱 세부사항

+ +

AV1

+ +

AOMedia Video 1 (AV1) 코덱은 Alliance for Open Media 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. {{anch("VP9")}}, {{anch("HEVC", "H.265/HEVC")}} 보다 압축율이 높으며, AVC보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 WebRTC에서 사용하기 위해 설계하였습니다.

+ +

AV1은 현재 세 프로파일을 제공하며:main, high, professional 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 레벨 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.

+ +

예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(<= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 파이어폭스와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.

+ +

현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.

+ +

위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps[2]
지원 프레임 레이트레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대 120fps
압축손실 DCT 기반 알고리즘
지원 프레임 크기8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값
지원 컬러 모드 + + + + + + + + + + + + + + + + + + + + + + + + + +
프로필색 깊이크로마 서브샘플링
Main8 or 104:0:0 (그레이스케일) or 4:2:0
High8 or 104:0:0 (그레이스케일), 4:2:0, or 4:4:4
Professional8, 10, or 124:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4
+
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AV1 지원707567No57No
+
지원 컨테이너ISOBMFF[1], MPEG-TS, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환성예
유지 보수 기관Alliance for Open Media
스펙https://aomediacodec.github.io/av1-spec/av1-spec.pdf
라이선스로열티 프리, 공개 포맷
+ +

[1] {{interwiki("wikipedia", "ISO Base Media File Format")}}

+ +

[2] See the AV1 specification's tables of levels, which describe the maximum resolutions and rates at each level.

+ +

AVC (H.264)

+ +

MPEG-4 스펙 집합 중 Advanced Video Coding (AVC) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.

+ +

AVC는 높은 호환성을 지원하는 여러 프로파일 덕분에 매우 유연합니다; 예를들어 Constrained Baseline Profile은 영상회의와 모바일 환경을 고려하였고 MainProfile(몇몇 지역에서 SDTV로 사용)나 High Profile(블루레이 디스크에서 사용)보다 대역폭을 적게 사용합니다. 대부분의 프로파일은 8-bit 컬러 컴포넌트와 4:2:0 크로마 서브샘플링을 사용합니다; High 10 Profile은 10-bit 컬러를 지원하며 High 10 Advanced form은 4:2:2, 4:4:4 크로마 서브샘플링을 지원합니다.

+ +

AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.

+ +

AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.

+ +

웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.

+ +

많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 라이선스 요구사항을 꼭 읽어보세요!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트레벨에 따라 다름
지원 프레임레이트레벨에 따라 다름; 300 fps까지 가능
압축손실 DCT 기반 알고리즘, 이미지안에 무손실 매크로 블록 생성 가능
지원 프레임 크기최대 8,192 x 4,320 픽셀
지원 컬러 모드 +

일반적이고 유효한 프로필:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
프로필색 깊이크로마 서브샘플링
Constrained Baseline (CBP)84:2:0
Baseline (BP)84:2:0
Extended (XP)84:2:0
Main (MP)84:2:0
High (HiP)84:0:0 (그레이스케일) and 4:2:0
Progressive High (ProHiP)84:0:0 (그레이스케일) and 4:2:0
High 10 (Hi10P)8 to 104:0:0 (그레이스케일) and 4:2:0
High 4:2:2 (Hi422P)8 to 104:0:0 (그레이스케일), 4:2:0, and 4:2:2
High 4:4:4 Predictive8 to 144:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4
+
HDR 지원예; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} 또는 Advanced HDR/SL-HDR; 모두  ATSC의 파트
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AVC/H.265 지원41235[1]9253.2
+
지원 컨테이너3GP, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지 보수 기관MPEG / ITU
스펙https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding
+ https://www.itu.int/rec/T-REC-H.264
라이선스상용 특허 다수. 상용 사용 시 라이선스 필요. 여러 특허 풀에 영향 가능
+ +

[1] Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns.

+ +

H.263

+ +

ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.

+ +

H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다.  하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.

+ +

대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 비트레이트(BPPmaxKb)의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.

+ +

H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.

+ +

H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 특허에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트무제한, 단 보통 64kbps 미만
지원 프레임 레이트자유
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 1408 x 1152 픽셀[2]
지원 컬러 모드YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음
HDR 지원아니오
가변 비트레이트 (VFR) 지원아니오
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
H.263 supportNoNoNo[1]NoNoNo
+
컨테이너 지원3GP, MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지 보수 기관ITU
스펙https://www.itu.int/rec/T-REC-H.263/
라이선스상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음.
+ +

[1] While Firefox does not generally support H.263, the OpenMax platform implementation (used for the Boot to Gecko project upon which Firefox OS was based) did support H.263 in 3GP files.

+ +

[2] Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.

+ +

HEVC (H.265)

+ +

High Efficiency Video Coding (HVEC) 코덱은 ITU의 H.265 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 {{anch("AVC")}}와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.

+ +

예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.

+ +

메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.

+ +

HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. MPEG LA하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 800,000 Kbps
지원 프레임 레이트레벨마다 다름; 최대 300 FPS 가능
압축손실 DCT 기반 알고리즘
지원 프레임 크기128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름
지원 컬러 모드 +

아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는 프로파일도 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
프로파일색 깊이크로마 서브샘플링
Main84:2:0
Main 108 to 104:2:0
Main 128 to 124:0:0 and 4:2:0
Main 4:2:2 108 to 104:0:0, 4:2:0, and 4:2:2
Main 4:2:2 128 to 124:0:0, 4:2:0, and 4:2:2
Main 4:4:484:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 108 to 104:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 128 to 124:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 16 Intra8 to 164:0:0, 4:2:0, 4:2:2, and 4:4:4
+
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
HEVC / H.265 supportNo18[1]No[2]11[1]No11
+
지원 컨테이너MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관ITU / MPEG
스펙http://www.itu.int/rec/T-REC-H.265
+ https://www.iso.org/standard/69668.html
라이선스상용;라이선스 요구사항에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의
+ +

[1] Internet Explorer and Edge only supports HEVC on devices with a hardware codec.

+ +

[2] Mozilla will not support HEVC while it is encumbered by patents.

+ +

MP4V-ES

+ +

MPEG-4 Video Elemental Stream (MP4V-ES) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다.  MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.

+ +

원래 목적은 {{Glossary("RTP")}} 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 3GP를 통한 모바일 통신에서도 쓰이고 있습니다.

+ +

지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는.mp4v지만 .mp4로 잘못 표기된 경우도 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트5 Kbps 에서 1 Gbps 이상
지원 프레임 레이트명시적 제한 없음; 데이터 전송율에 의해 제한
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,096 x 4,096 픽셀
지원 컬러 모드YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MP4V-ES supportNo[2]NoYes[1]NoNoNo
+
지원 컨테이너3GP, MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
Supporting/Maintaining 유지/보수 기관MPEG
스펙{{RFC(6416)}}
라이선스상용; MPEG LA and/or AT&T에서 필수 라이선스 취득 필요
+ +

[1] Firefox supports MP4V-ES in 3GP containers only.

+ +

[2] Chrome does not support MP4V-ES; however, Chrome OS does.

+ +

MPEG-1 Part 2 Video

+ +

MPEG-1 Part 2 Video는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 {{Glossary("ITU", "ITU's")}}의 개입 없이 순수히 MPEG가 만들었습니다.

+ +

모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 1.5 Mbps
지원 프레임 레이트23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,095 x 4,095 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원아니오
브라우저 호환 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-1 supportNoNoNoNoNoYes
+
지원 컨테이너MPEG
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG
스펙https://www.iso.org/standard/22411.html
라이선스Proprietary; however, all patents have expired, so MPEG-1 may be used freely
+ +

MPEG-2 Part 2 Video

+ +

MPEG-2 Part 2 {{Glossary("ITU")}}가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다. MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.

+ +

MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.

+ +

MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다. 각 프로파일은 4개의 레벨을 가지고 있으며 프레임 레이트, 해상도, 비트레이트등의 비디오 속성 값을 증가시킬 수 있습니다. 대부분의 프로파일은 Y'CbCr 4:2:0 크로마 서브샘플링을 쓰지만 더 상위의 프로파일은 4:2:2를 지원한다든가 말입니다. 추가로 대형 프레임 크기 및 비트레이트 지원을 위한 4개의 레벨이 있습니다. 예를 들어 북미 지역의 {{interwiki("wikipedia", "ATSC standards", "ATSC")}} TV 스펙은 Main Profile at high Level을 통해 1920 x 1080 (30 FPS) 및 1280 x 720 (60 FPS)의 고화질을 최대 80 Mbps 비트레이트로 지원합니다.

+ +

그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 100 Mbps; 레벨과 프로파일에 따라 다름
지원 프레임 레이트 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
축약어레벨 이름지원 프레임 레이트
LLLow Level23.9, 24, 25, 29.97, 30
MLMain Level23.976, 24, 25, 29.97, 30
H-14High 144023.976, 24, 26, 29.97, 30, 50, 59.94, 60
HLHigh Level23.976, 24, 26, 29.97, 30, 50, 59.94, 60
+
압축손실 DCT 기반 알고리즘
지원 프레임 크기 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
축약어레벨 이름최대 프레임 크기
LLLow Level352 x 288 pixels
MLMain Level720 x 576 pixels
H-14High 14401440 x 1152 pixels
HLHigh Level1920 x 1152 pixels
+
지원 컬러 모드대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2" 프로파일에서 4:2:2 크로마 서브샘플링 지원.
HDR 지원아니오
가변 프레임 레이트(VFR) 지원아니오
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-2 supportNoNoNoNoNoYes
+
지원 컨테이너MPEG, MPEG-TS (MPEG Transport Stream), MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG / ITU
스펙https://www.itu.int/rec/T-REC-H.262
+ https://www.iso.org/standard/61152.html
라이선스상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능. MPEG LA에 의해 특허 관리
+ +

Theora

+ +

Xiph.org가 {{interwiki("wikipedia", "Theora")}}는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.

+ +

Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.

+ +

Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 2 Gbps
지원 프레임 레이트임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit 분자와 분모로 구성되어 있음
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능
지원 컬러 모드Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예[1]
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
Theora support3Yes[2]3.5No10.5No
+
지원 컨테이너Ogg
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관Xiph.org
스펙https://www.theora.org/doc/
라이선스오픈 프리-로열티
+ +

[1] While Theora doesn't support Variable Frame Rate (VFR) within a single stream, multiple streams can be chained together within a single file, and each of those can have its own frame rate, thus allowing what is essentially VFR. However, this is impractical if the frame rate needs to change frequently.

+ +

[2] Edge supports Theora with the optional Web Media Extensions add-on.

+ +

VP8

+ +

Video Processor 8 (VP8) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 {{anch("AVC")}}에 견줄만 합니다.

+ +

브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.

+ +

HTML 콘텐츠로써 특히 WebM 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 반드시 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트level별 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 일고리즘
지원 프레임 크기최대 16,384 x 16,384 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예
지원 브라우저 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP8 support2514[1]491612.1[2]
+
지원 컨테이너3GP, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예; VP8은 WebRTC의 필수 코덱 중 하나
유지/보수 기관Google
스펙{{RFC(6386)}}
라이선스라이선스 및 로열티로부터 자유로운 오픈 소스
+ +

[1] Edge support for VP8 requires the use of Media Source Extensions.

+ +

[2] Safari only supports VP8 in WebRTC connections.

+ +

VP9

+ +

Video Processor 9 (VP9)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.

+ +

VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.

+ +

VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 WebM에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 {{anch("VP8")}}). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.

+ +

Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트level 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 65,536 x 65,536 픽셀
지원 컬러 모드 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Profile색 깊이크로마 서브샘플링
Profile 084:2:0
Profile 184:2:0, 4:2:2, and 4:4:4
Profile 210 to 124:2:0
Profile 310 to 124:2:0, 4:2:2, and f:4:4
+ +

지원 색 공간: {{interwiki("wikipedia", "Rec. 601")}}, {{interwiki("wikipedia", "Rec. 709")}}, {{interwiki("wikipedia", "Rec. 2020")}}, {{interwiki("wikipedia", "SMPTE C")}}, SMPTE-240M (obsolete; replaced by Rec. 709), {{interwiki("wikipedia", "sRGB")}}.

+
HDR 지원예; HDR10+, HLG, PQ
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP9 지원291428No10.6No
+
지원 컨테이너MP4, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지/보수 기관Google
스펙https://www.webmproject.org/vp9/
라이선스라이선스 및 로열티-프리 오픈 소스requirements
+ +

코덱 선택하기

+ +

어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:

+ + + +

아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.

+ +

각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.

+ +

Recommendations for everyday videos

+ +

우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.

+ +
    +
  1. +

    WebM 컨테이너에 비디오는 {{anch("VP8")}}, 오디오는 Opus 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.

    + + 
    <video controls src="filename.webm"></video>
+
    +
    2. +
  2. +

    MP4 컨테이너에 비디오 코덱은 {{anch("AVC")}} (H.264) 오디오 코덱은 AAC 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.

    + + 
    <video controls>
+  <source type="video/webm"
+          src="filename.webm">
+  <source type="video/mp4"
+          src="filename.mp4">
+</video>
+
    +
    3. +
+ +
+

Note: {{HTMLElement("<video>")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 </video> 닫기 태그가 필요하다는 것을 잊지 마세요.

+
+ +

고품질 비디오 제공을 위한 추천

+ +

여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.

+ +
    +
  1. +

    WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.

    + + 
    <video controls src="filename.webm"></video>
+
    +
    2. +
  2. +

    MP4 컨테이너에 비디오 코덱으로 {{anch("HEVC")}} 를 쓰되 프로파일은 Main 4:2:2 10/12 bit 색 깊이, 최대 Main 4:4:4 16 bit 색 깊이 수준의 고급 Main 프로파일을 사용합니다. 비트레이트를 높이면 놀라운 색 재현과 훌륭한 그래픽 퀄리티를 보여줄 것입니다. 또한 하이 다이나믹 레인지 비디오를 위한 HDR 메타데이터도 추가할 수 있습니다. 오디오는 ACC 인코딩 시 높은 샘플링 레이트(최소 48 kHz, 96 kHz 권장)에 fast-encoding이 아닌 complex-encoding을 사용합니다.

    + + 
    <video controls>
+  <source type="video/webm"
+          src="filename.webm">
+  <source type="video/mp4"
+          src="filename.mp4">
+</video>
+
    +
    3. +
+ +

비디오 보존, 편집, 믹싱을 위한 추천

+ +

웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.

+ +

손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.

+ +

외부에 비디오 보존

+ +

여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 x264 유틸리티는 매우 높은 비트레이트로 {{anch("AVC")}} 인코딩을 할 수 있습니다:

+ +
x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
+ +

다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.

+ +

비디오 녹화

+ +

무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, {{anch("AVC")}} 또는 {{anch("AV1")}}를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 MediaStream Recording API를 사용한다면, {{domxref("MediaRecorder")}} 객체를 생성하는 코드는 아래와 같습니다:

+ +
const kbps = 1024;
+const Mbps = kbps*kbps;
+
+const options = {
+  mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
+  bitsPerSecond: 800*Mbps,
+};
+
+let recorder = new MediaRecorder(sourceStream, options);
+ +

위 예제에서 MediaRecorder를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 {{anch("AV1")}} 비디오 레코딩을, FLAC으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.

+ +

codecs 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
값설명
av014문자 코드 (4CC-4 Character Code) {{anch("AV1")}} 코덱을 의미합니다.
2프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile.
19H레벨과 티어. AV 스펙의 A.3의 표에서 설명, Level 6.3의 High tier를 의미합니다
12색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다.
0모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다.
000크로마 서브샘플링 모드. AV1 스펙의 section 6.4.2에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다.
09사용할 색 공간. AV1 스펙의 section 6.4.2에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다.
16전송시 사용할 색 공간. 마찬가지로 section 6.4.2에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다.
09section 6.4.2 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다.
1"full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다.
+ +

선택하고자 하는 코덱 문서에 codecs 파라미터 값이 받아들이는 설정이 설명되어 있습니다.

+ +

더 보기

+ + diff --git "a/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" "b/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" new file mode 100644 index 0000000000..d4e45c294a --- /dev/null +++ "b/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" @@ -0,0 +1,1279 @@ +--- +title: 미디어 컨테이너 포맷 (파일 타입) +slug: Web/Media/Formats/컨테이너 +translation_of: Web/Media/Formats/Containers +--- +

오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

+ +

WebRTC 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 Codecs used by WebRTC 문서를 참고하세요.

+ +

일반적인 컨테이너 포맷

+ +

미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 .opus 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.

+ +

반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 audio/mp3 MIME 타입과 .mp3 확장자를 사용합니다.

+ +

컨테이너 포맷(파일 타입) 인덱스

+ +

특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.

+ +
+ +
+ +

3GP

+ +

3GP 또는 3GPP 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.

+ +

이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + +
Base 3GP media MIME types
AudioVideo
audio/3gppvideo/3gpp
audio/3gpp2video/3gpp2
audio/3gp2video/3gp2
+ +

위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 codecs 파라미터를 추가하여 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
3GP가 지원하는 비디오 코덱.
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1,2
H.263Yes1
MPEG-4 Part 2 (MP4v-es)Yes1
VP8Yes1
+ +

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

+ +

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
3GP가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AMR-NBYes1
AMR-WBYes1
AMR-WB+Yes1
AAC-LCYes1,2
HE-AAC v1Yes1,2
HE-AAC v2Yes1,2
MP3Yes1
+ +

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

+ +

[2] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

ADTS

+ +

Audio Data Transport Stream (ADTS) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.

+ + + + + + + + + + + + + + + + +
ADTS media MIME types
Audio
audio/aac[1]
audio/mpeg[1]
+ +

[1] The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the audio/aac MIME type should be used. If the audio frames are in MPEG-1/MPEG-2 Audio Layer I, II, or III format, the MIME type should be audio/mpeg.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ADTS가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
MP3Yes
+ +

[1] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

FLAC

+ +

Free Lossless Audio Codec (FLAC)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.

+ + + + + + + + + + + + + +
FLAC media MIME type
Audio
audio/flac
+ + + + + + + + + + + + + + + + + + + + + + + + +
FLAC이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
+ +

MPEG/MPEG-2

+ +

{{interwiki("wikipedia", "MPEG-1")}}과 {{interwiki("wikipedia", "MPEG-2")}}은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.

+ +

인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.

+ +

MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.

+ + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2 media MIME types
AudioVideo
audio/mpegvideo/mpeg
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Part 2No
MPEG-2 Part 2No
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Audio Layer INo
MPEG-1 Audio Layer IINo
MPEG-1 Audio Layer III (MP3)Yes
+ +

MPEG-4 (MP4)

+ +

{{interwiki("wikipedia", "MPEG-4")}} (MP4) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.

+ +

최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 Apple이 개발한 {{interwiki("wikipedia", "QuickTime file format")}}에서 파생된 {{interwiki("wikipedia", "ISO base media file format")}}에서 다시 파생되었습니다.

+ +

MPEG-4 미디어 타입을 표기할 때 (audio/mp4 or video/mp4), MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + +
기본 MPEG-4 media MIME 타입
AudioVideo
audio/mp4video/mp4
+ +

위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1
AV1Yes1
H.263No
MPEG-4 Part 2 VisualNo
VP9Yes
+ +

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

[2] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
FLACYes
MPEG-1 Audio Layer III (MP3)Yes
OpusYes
+ +

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

Ogg

+ +

{{interwiki("wikipedia", "Ogg")}}는 Xiph.org Foundation이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 Xiph.org documents about the Ogg format를 확인할 수 있습니다.

+ + + + + + + + + + + + + + + +
기본 Ogg media MIME types
AudioVideo
audio/oggvideo/ogg
+ +

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ogg가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
TheoraYes
VP8Yes
VP9Yes
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ogg가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
OpusYes
VorbisYes
+ +

QuickTime

+ +

QuickTime 파일 포맷(QTFF, QT, MOV) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 .mov는 최초 영화에서 쓰이기 위해  개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.

+ +

QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 사용해선 안됩니다. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.

+ +

Mac OS에서 QuickTime 프레임워크는 QuickTime 포맷의 영상 파일 및 코덱 뿐만아니라 널리 쓰이는 오디오/비디오 코덱 상당 수를 지원합니다. 정지 화상 이미지 포맷도 포함해서요. (QuickTime 플러그인이 설치되었거나 QuickTime과 바로 연동된 브라우저를 포함 한)맥 애플리케이션은 QuickTime을 통해서 ACC, AIFF, MP#, PCM, Qualcomm PureVoice 등의 오디오 포맷과 AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1, MPEG-4 Part 2, Sorenson 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.

+ +

추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.

+ +

QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.

+ + + + + + + + + + + + + +
Base QuickTime media MIME type
Video
video/quicktime
+ +

video/quicktime 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.

+ +

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuickTime이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)No
CinepakNo
Component VideoNo
DVNo
H.261No
H.263No
MPEG-2No
MPEG-4 Part 2 VisualNo
Motion JPEGNo
Sorenson Video 2No
Sorenson Video 3No
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuickTime이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACNo
ALaw 2:1No
Apple Lossless (ALAC)No
HE-AACNo
MPEG-1 Audio Layer III (MP3)No
Microsoft ADPCMNo
µ-Law 2:1 (u-Law)No
+ +

WAVE (WAV)

+ +

Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 .wav 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.

+ +

이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..

+ +

WAVE 포맷은 1991년 처음 발표되었습니다.

+ + + + + + + + + + + + + + + + + + + + + + +
WAVE media MIME types
Audio
audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WAVE가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
ADPCM (Adaptive Differential Pulse Code Modulation)No
GSM 06.10No
LPCM (Linear Pulse Code Modulation)Yes
MPEG-1 Audio Layer III (MP3)No
µ-Law (u-Law)No
+ +

WebM

+ +

{{interwiki("wikipedia", "WebM")}} (Web Media)는 {{interwiki("wikipedia", "Matroska")}}에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.

+ +

WebM은 2010년 처음 소개되었습니다..

+ + + + + + + + + + + + + + + +
WebM media MIME types
AudioVideo
audio/webmvideo/webm
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AV1Yes1
AVC (H.264)Yes2
VP8Yes
VP:9Yes
+ +

[1] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

+ +

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
OpusYes
VorbisYes
+ +

알맞은 컨테이너 선택하기

+ +

여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.

+ +

가이드라인

+ +

최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.

+ + + +

슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.

+ +

컨테이너 선택 가이드

+ +

아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.

+ +

오디오 전용 파일

+ + + + + + + + + + + + + + + + + + + + + + +
만약에...추천 컨테이너 포맷
일반 재생 목적으로 압축 파일 사용MP3 (MPEG-1 Audio Layer III)
무손실 압축 파일FLAC with ALAC fallback
무압축 파일WAV
+ +

이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.

+ +

비디오 파일

+ + + + + + + + + + + + + + + + + + + + + + + + +
만약에...추천 컨테이너 포맷
가능한 오픈 포맷을 사용한 일반 비디오WebM (MP4 호환 추가)
일반 비디오MP4 (WebM, Ogg 호환 추가)
저속 네트워크상의 고효율 압축3GP (MP4 호환 추가)
구형 단말/브라우저 지원QuickTime (AVI, MPEG-2 호환 추가)
+ +

몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.

+ +

다양한 컨테이너간 호환성 극대화

+ +

호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.

+ +

구현하려면 우선 {{htmlattrxref("src", "video")}} 어트리뷰트 없이 <video> (또는 <audio>) 엘리먼트를 생성합니다. 그 후 <video> 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.

+ +

아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.

+ +
{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
+ + + +

첫번째 비디오는 WebM 포맷입니다({{htmlattrxref("type", "video")}} 어트리뷰트가 video/webm). {{Glossary("user agent")}}는 재생이 불가능 한 경우 type 이 video/mp4 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.

+ +

스펙

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationComment
ETSI 3GPP3GP 컨테이너 포맷 정의
ISO/IEC 14496-3 (MPEG-4 Part 3 Audio)ADTS 포함 한 MP4 오디오 정의
FLAC FormatFLAC 포맷 규정
ISO/IEC 11172-1 (MPEG-1 Part 1 Systems)MPEG-1 컨테이너 포맷 정의
ISO/IEC 13818-1 (MPEG-2 Part 1 Systems)MPEG-2 컨테이너 포맷 정의
ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 file format)MPEG-4 (MP4) version 2 컨테이너 포맷 정의
ISO/IEC 14496-1 (MPEG-4 Part 1 Systems)오리지널 MPEG-4 (MP4) 컨테이너 포맷 정의
{{RFC(3533)}}Ogg 컨테이너 포맷 정의
{{RFC(5334)}}Ogg 미디어 타입 및 확장자 정의
QuickTime File Format SpecificationQuickTime movie (MOV) 포맷 정의
Multimedia Programming Interface and Data Specifications 1.0공식 WAVE 스펙에 가까운 문서
Resource Interchange File Format (used by WAV)RIFF 포맷 정의; WAVE는 RIFF의 한 형태
WebM Container GuidelinesWebM 용 Matroska 적용 가이드
Matroska SpecificationsWebM 기반 Matroska 컨테이너 포맷 스펙
WebM Byte Stream FormatMedia Source Extensions를 통한 WebM 바이트 스트림 포맷
+ +

브라우저 호환성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
컨테이너 포맷 이름오디오비디오
MIME typeExtension(s)Browser supportMIME typeExtension(s)Browser support
3GPaudio/3gpp.3gpFirefoxvideo/3gpp.3gpFirefox
ADTS (Audio Data Transport Stream)audio/aac.aacFirefox———
FLACaudio/flac.flacFirefox———
MPEG-1 / MPEG-2 (MPG or MPEG)audio/mpeg.mpg
+ .mpeg		Firefoxvideo/mpeg.mpg
+ .mpeg		Firefox
audio/mp3.mp3Firefox
MPEG-4 (MP4)audio/mp4.mp4
+ .m4a		Firefoxvideo/mp4.mp4
+ .m4v
+ .m4p		Firefox
Oggaudio/ogg.oga
+ .ogg		Firefoxvideo/ogg.ogv
+ .ogg		Firefox
QuickTime Movie (MOV)———video/quicktime.mov
WAV (Waveform Audiofile)audio/wav.wavFirefox———
WebMaudio/webm.webmFirefoxvideo/webm.webmFirefox
+ +

더 보기

+ + diff --git "a/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" "b/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" new file mode 100644 index 0000000000..43cce1aa1f --- /dev/null +++ "b/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" @@ -0,0 +1,971 @@ +--- +title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 +slug: Web/Media/Formats/코덱파라미터 +translation_of: Web/Media/Formats/codecs_parameter +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
+ +

기본적으로, video/mp4, audio/mpeg 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 MPEG-4 비디오라고 해서 MIME 타입을 video/mp4만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.

+ +

때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 codecs 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.

+ +

이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 codecs 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.

+ +

일반 문법

+ +

기본적인 MIME 미디어 타입 표현은 미디어 타입(audio, video, 등)으로 시작하며, 슬래쉬 문자 (/) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:

+ +
+
audio/mpeg
+
MP3 같은 MPEG 파일 타입의 오디오 파일입니다.
+
video/ogg
+
Ogg 파일 타입의 비디오 파일입니다.
+
video/mp4
+
MPEG-4 파일 타입을 사용하는 비디오입니다.
+
video/quicktime
+
애플 QuickTime 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.
+
+ +

위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 codecs 파라미터를 추가하여 명시할 수 있습니다.

+ +

세미콜론 (;)을 붙이고 codecs= 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.

+ +
+
audio/ogg; codecs=vorbis
+
Vorbis 오디오 트랙을 포함하는 Ogg 컨테이너 파일입니다.
+
video/webm; codecs="vp8, vorbis"
+
VP8 비디오와 Vorbis 오디오를 포함하는 WebM 컨테이너 파일입니다.
+
video/mp4; codecs="avc1.4d002a"
+
AVC (H.264) 코덱에 Main Profile, Level 4.2을 가지는 MPEG-4 컨테이너 파일입니다.
+
+ +

코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자{{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}를 사용하는 경우 MIME 타입을 기술하는 문자열의 codecs 파라미터를 codecs* (애스터리크(*) 추가됨에 유의)로 변경해야 합니다. JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.

+ +
+

codecs 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.

+
+ +

컨테이너별 코덱 옵션

+ +

아래 컨테이너들은 codecs 파라미터에 확장 옵션을 지원합니다:

+ +
+ +
+ +

링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.

+ +

AV1

+ +

AV1의 codecs 문법은AV1 Codec ISO Media File Format Binding 스펙 문서의, 섹션 5: Codecs Parameter String에 정의되어 있습니다.

+ +
av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
+ +

아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AV1 코덱 파라미터 문자열 요소
요소내용
P +

한자리 숫자 프로파일 번호:

+ + + + + + + + + + + + + + + + + + + + + + + +
AV1 프로파일 번호
프로파일 번호설명
0"Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10 비트 색 깊이 지원.
1"High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원.
2"Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색 깊이 추가 지원
+
LL두자리 숫자 레벨 번호,  X.Y 형태의 레벨 포맷으로 변환 됨, X = 2 + (LL >> 2), Y = LL & 3. 자세한 내용은 AV1 스펙 문서의 Appendix A, section 3 참조.
T한자리 문자 티어 표시. Main 티어라면 (seq_tier equals 0), 문자는 M. High 티어는 (seq_tier is 1) H. High 티어는 4.0 이상 레벨에서만 가능합니다.
DD두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른 속성에서 지원 가능한 값이여야 합니다.
M한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로 모노크롬 이미지를 가집니다. 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}}를 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0 (모노크롬 아님)입니다.
CCC +

CCC 는 세자리 숫자로 크로마 서브샘플링을 표기합니다. 첫번째 숫자는 subsampling_x, 두 번째 숫자는 subsampling_y. 둘다 1인경우, 세번째 값은 chroma_sample_position; 아닌 경우 세번째 값은 항상 0입니다. M 값과 더불어 크로마 서브샘플링 포맷을 구성하는 요소입니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
크로마 서브샘플링 결정 방식
subsampling_xsubsampling_yMonochrome flagChroma subsampling format
000YUV 4:4:4
100YUV 4:2:2
110YUV 4:2:0
111YUV 4:0:0 (Monochrome)
+ +

CCC의 세번째 값은 크로마 샘플 위치(chroma sample position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을 의미합니다.

+ +

기본 값은 110 (4:2:0 크로마 서브샘플링)입니다.

+
cp두자리 숫자 color_primaries 값은 미디어의 색 공간을 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은 09입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1 스펙 문서의 Color config semantics section 를 참조하세요. 기본값은 01 (ITU-R BT.709)입니다.
tc두자리 숫자 transfer_characteristics 값. 이 값은 소스에서 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는 14입니다. 기본 값은 01 (ITU-R BT.709)입니다.
mc두자리 숫자 matrix_coefficients 상수는 RGB 컬러 채널을 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어 BT.709의 표준 계수 값은 01로 표현합니다. 기본 값은 01 (ITU-R BT.709)입니다.
F한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(1), 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(studio swing representation이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing representation 적용)입니다.
+ +

M (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:

+ +
+
av01.2.15M.10.0.100.09.16.09.0
+
AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.
+
av01.0.15M.10
+
AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.
+
+ +

ISO Base Media File Format: MP4, QuickTime, and 3GP

+ +

모든 미디어 타입은 {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF)를 기반으로 하며 codecs 문법을 공유합니다. 이들 미디어 타입은 MPEG-4 (또 사실상 MPEG-4를 기반으로 하고 있으므로 QuickTime도 포함)과 3GP를 포함합니다. MIME 타입의 codecs 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ISO BMFF codecs 파라미터를 지원하는 기본 MIME 타입
MIME 타입설명
audio/3gpp3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
video/3gpp3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
audio/3gp23GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
video/3gp23GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
audio/mp4MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
video/mp4MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
application/mp4오디오/비디오가 아닌 MPEG-4 컨테이너 미디어
+ +

codecs 파라미티에는 간단하게 컨테이너 명(3gp, mp4, quicktime, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(.)으로 구분된 요소를 다수 가질 수 있습니다.

+ +

codecs 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(.)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 AVC (H.264)는 6자리 16진수로 구성되어 있습니다.

+ +

따라서 지원하는 코덱 문법은 아래와 유사합니다:

+ +
+
cccc[.pp]* (Generic ISO BMFF)
+
cccc 는 4 글자 코덱 ID이며  pp는 0~2자리 인코딩 된 문자입니다.
+
mp4a.oo[.A] (MPEG-4 audio)
+
oo 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 A 는 한자리 숫자오디오 OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 Object Types page 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 mp4a.ad로 기술합니다. 자세한 내용은 {{anch("MPEG-4 audio")}}를 참조하세요.
+
mp4v.oo[.V] (MPEG-4 video)
+
마찬가지로 oo 는 미디어 콘텐츠를 명시하는 OTI 값이며, V 는 한자리 숫자 비디오 OTI 값입니다.
+
avc1.oo[.PPCCLL] (AVC video)
+
+

oo 는 콘텐츠를 명시하는 OTI 값이며, while PPCCLL 는 6자리 16진수로써 프로파일 넘버 (PP), 제약 플래그 (CC), 레벨 (LL)을 의미합니다. PP로 가능한 값은 {{anch("AVC profiles")}}를 참조하세요.

+ +

제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 constraint_set0_flag)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 반드시 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.

+ +

레벨 값은 고정 소수점이므로 숫자 14 (10진법 20) 은 레벨 2.0을 의미하며 3D (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.

+
+
+ +

AVC 프로파일

+ +

아래의 AV 프로파일 넘버는 codecs 파라미터에서 사용하며 제약 요소 값은 CC로 사용할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
codecs  파라미터에서 AVC 프로파일과 제약 요건을 명세하기 위한 값
프로파일넘버(Hex)제약 (byte)
Constrained Baseline Profile (CBP)
+ CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다.		4240
Baseline Profile (BP)
+ CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다.  CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다.		4200
Extended Profile (XP)
+ 고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다.		5800
Main Profile (MP)
+ MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 사용하지 않습니다. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다.		4D00
High Profile (HiP)
+ 현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다.		6400
Progressive High Profile (PHiP)
+ 필드 코딩 지원을 제거한 High Profile입니다.		6408
Constrained High Profile
+ 양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다.		640C
High 10 Profile (Hi10P)
+ 10 비트 컬러 모드 지원을 제거한 High Profile입니다.		6E00
High 4:2:2 Profile (Hi422P)
+ Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다.		7A00
High 4:4:4 Predictive Profile (Hi444PP)
+ Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다.		F400
High 10 Intra Profile
+ all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다.		6E10
High 4:2:2 Intra Profile
+ all-intra-frame에 Hi422를 적용한 프로파일입니다.		7A10
High 4:4:4 Intra Profile
+ all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다.		F410
CAVLC 4:4:4 Intra Profile
+ all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다.		4400
Scalable Baseline Profile
+ 화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, {{interwiki("wikipedia", "SVC")}} Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다.		5300
Scalable Constrained Baseline Profile
+ 실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만,  SVC를 활성화하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다.		5304
Scalable High Profile
+ 방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다.		5600
Scalable Constrained High Profile
+ 실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다.		5604
Scalable High Intra Profile
+ 비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다.		5620
Stereo High Profile
+ 양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다.		8000
Multiview High Profile
+ 시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 지원하지 않습니다.		7600
Multiview Depth High Profile
+ High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다.		8A00
+ +

MPEG-4 audio

+ +

codecs 목록의 값 항목이 mp4a로 시작한다면, 문법은 아래와 같아야 합니다:

+ +
mp4a.oo[.A]
+ +

oo 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 MP4 Registration Authority에서 규정하고 있으며 list of the possible OTI values에서 가용한 값을 확인할 수 있습니다. 특수한 값인 40; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI 40 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.

+ +

Audio Object Type는 두자리 10진수로 이루어져 있습니다(codecs 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 codecs 표현 값은 mp4a.40.2 입니다.

+ +

그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 codecs 값은 mp4a.40.17 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. mp4a.40.02 처럼요.

+ +
+

Note: 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 0 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.

+
+ +

Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4 audio object types
IDAudio Object TypeProfile support
0NULL
1AAC MainMain
2AAC LC (Low Complexity)Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2
3AAC SSR (Scalable Sampling Rate)Main
4AAC LTP (Long Term Prediction)Main, Scalable, HQ
5SBR (Spectral Band Replication)HE-AAC, HE-AAC v2
6AAC ScalableMain, Scalable, HQ
7TwinVQ (Coding for ultra-low bit rates)Main, Scalable
8CELP (Code-Excited Linear Prediction)Main, Scalable, Speech, HQ, LD
9HVXC (Harmonic Vector Excitation Coding)Main, Scalable, Speech, LD
10 – 11Reserved
12TTSI (Text to Speech Interface)Main, Scalable, Speech, Synthetic, LD
13Main SyntheticMain, Synthetic
14Wavetable Synthesis
15General MIDI
16Algorithmic Synthesis and Audio Effects
17ER AAC LC (Error Resilient AAC Low-Complexity)HQ, Mobile Internetworking
18Reserved
19ER AAC LTP (Error Resilient AAC Long Term Prediction)HQ
20ER AAC Scalable (Error Resilient AAC Scalable)Mobile Internetworking
21ER TwinVQ (Error Resilient TwinVQ)Mobile Internetworking
22ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)Mobile Internetworking
23ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation)LD, Mobile Internetworking
24ER CELP (Error Resilient Code-Excited Linear Prediction)HQ, LD
25ER HVXC (Error Resilient Harmonic Vector Excitation Coding)LD
26ER HILN (Error Resilient Harmonic and Individual Line plus Noise)
27ER Parametric (Error Resilient Parametric)
28SSC (Sinusoidal Coding)
29PS (Parametric Stereo)HE-AAC v2
30MPEG Surround
31Escape
32MPEG-1 Layer-1
33MPEG-1 Layer-2 (MP2)
34MPEG-1 Layer-3 (MP3)
35DST (Direct Stream Transfer)
36ALS (Audio Lossless)
37SLS (Scalable Lossless)
38SLS Non-core (Scalable Lossless Non-core)
39ER AAC ELD (Error Resilient AAC Enhanced Low Delay)
40SMR Simple (Symbolic Music Representation Simple)
41SMR Main (Symbolic Music Representation Main)
42Reserved
43SAOC (Spatial Audio Object Coding)[1]
44LD MPEG Surround (Low Delay MPEG Surround)[1]
45 and upReserved
+ +

[1] SAOC and LD MPEG Surround are defined in ISO/IEC 14496-3:2009/Amd.2:2010(E).

+ +

WebM

+ +

WebM codecs 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM MIME codecs 파라미터 예시
MIME 타입설명
video/webm;codecs="vp8"VP8 코덱 WebM 비디오; 오디오 미정의.
video/webm;codecs="vp9"VP9 코덱 WebM 비디오.
audio/webm;codecs="vorbis"Vorbis 오디오 WebM 파일.
audio/webm;codecs="opus"Opus 오디오 WebM 파일.
video/webm;codecs="vp8,vorbis"VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일.
video/webm;codecs="vp9,opus"A WebM container with VP9 video and Opus audio.
+ +

vp8.0, vp9.0 문자열도 가능하지만, 비추천합니다.

+ +

ISO Base Media File Format 문법

+ +

codecs 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 ISO Base Media File Format 에 정의된 문법에 따라 비디오 콘텐츠를 기술하기 시작했습니다. 본 문법은 VP Codec ISO Media File Format Binding의, Codecs Parameter String 섹션에 정의되어 있습니다. 오디오 코덱은 vorbis 또는 opus로 표시되어 있습니다.

+ +

codecs 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(.)으로 구분된 2자리 숫자가 반복됩니다.

+ +
cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]
+ +

처음부터 5개 요소는 필수이며; cp (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM codecs parameter components
ComponentDetails
cccc +

4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와 같습니다:

+ + + + + + + + + + + + + + + + + + + + + + + +
Web-M 지원 코덱 4자리 코드
Four-character codeCodec
vp08VP8
vp09VP9
vp10VP10
+
PP +

2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을 추가합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM 프로파일 숫자
프로파일설명
00크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상 컴포넌트 당 8비트만 허용.
01크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용.
02크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트 허용.
03크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용
+
LL두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨 3은 30 레벨 6.1은 61.
DD휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10, 12입니다.
CC +

크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래 표에 있습니다; 자세한 내용은 {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} 를 참조하세요.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM 크로마 서브샘플링 구분자
값크로마 서브샘플링 포맷
004:2:0 with the chroma samples sited interstitially between the pixels
014:2:0 chroma subsampling with the samples colocated with luma (0, 0)
024:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)
034:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)
04Reserved
+
cp +

ISO/IEC 23001-8:2016 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본 요소와 이후 요소는 전부 비필수값입니다.

+ +

Color primaries 요소에 가능한 값은 아래와 같습니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ISO/IEC Color primary identifiers
ValueDetails
00ITU과 ISO/IEC에 의해 예약됨
01고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지 리갈 레인지를 표현합니다.
02알 수 없거나 application에서 활용하기 위해 사용합니다.
03ITU과 ISO/IEC에 의해 예약됨
04BT.470 System M, NTSC (미국 내 표준 화질 TV 표준)
05BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM
06BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. 7과 동일함.
70{{Glossary("SMPTE")}} 240M (historical). Functionally identical to 6과 동일함.
08일반 필름
09BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.
10SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). DCDM을 위한 비압축 형식.
11SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와 환경 조건에 대해 기술.
12SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.
13 – 21ITU과 ISO/IEC에 의해 예약됨
22EBU Tech 3213-E
23 – 255ITU과 ISO/IEC에 의해 예약됨
+
tc비디오의 transferCharacteristics 값을 2자리 숫자로 표현. This value is from Section 8.2 of ISO/IEC 23001-8:2016 Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때 transfer characteristics 을 정의합니다.
mcmatrixCoefficients 속성 값을 2자리 숫자로 표현 ISO/IEC 23001-8:2016 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게 사용되는지 같은 섹션에서 확인할 수 있습니다.
FF색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이 00 인 경우 강제로 제한하며,  01 인 경우 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로 가능한 풀 레인지 값을 허용합니다.
+ +

WebM media type 예시

+ +
+
video/webm;codecs="vp08.00.41.08,vorbis"
+
VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.
+
video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"
+
VP9 비디오, 프로파일 2 레벨?1.0, 10-bit YUV 4:2:0 크로마 서브샘플링, BT.2020 색 공간, ST 2084 EOTF (HDR SMPTE), BT.2020 비상수 휘도 색상 행렬, 풀 레인지 휘도 색차 인코딩non-constant luminance color matrix, and full-range chroma and luma encoding. 오디오는 Opus 포맷.
+
+ +

codecs 파라미터 사용하기

+ +

codecs 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 {{HTMLElement("audio")}} , {{HTMLElement("video")}} 엘레먼트 생성 시 {{HTMLElement("source")}} 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..

+ +

{{domxref("MediaSource.isTypeSupported()")}} 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.

+ +

더 보기

+ + diff --git a/files/ko/web/media/index.html b/files/ko/web/media/index.html new file mode 100644 index 0000000000..207ef43d3d --- /dev/null +++ b/files/ko/web/media/index.html @@ -0,0 +1,81 @@ +--- +title: Web media technologies +slug: Web/Media +tags: + - Audio + - Landing + - Media + - NeedsTranslation + - TopicStub + - Video + - Web +translation_of: Web/Media +--- +

Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.

+ +
+
+

References

+ +

HTML

+ +

These articles cover HTML features for media developers.

+ +
+
{{HTMLElement("audio")}}
+
The <audio> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. Accessible from JavaScript as {{domxref("HTMLAudioElement")}} objects.
+
{{HTMLElement("video")}}
+
The <video> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <video> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example. Accessible from JavaScript as {{domxref("HTMLVideoElement")}} objects.
+
{{HTMLElement("track")}}
+
The HTML <track> element can be placed within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to provide a reference to a WebVTT format subtitle or caption track to be used when playing the media. Accessible from JavaScript as {{domxref("HTMLTrackElement")}} objects.
+
{{HTMLElement("source")}}
+
The HTML <source> element is used within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to specify source media to present. Multiple sources can be used to provide the media in different formats, sizes, or resolutions. Accessible from JavaScript as {{domxref("HTMLSourceElement")}} objects.
+
+ +

APIs

+ +
+
Media Capture and Streams API
+
A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.
+
MediaStream Recording API
+
The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.
+
Web Audio API
+
The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an <audio> element, a media stream, or to disk.
+
WebRTC
+
WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.
+
+
+ +
+

Guides

+ +
+
Overview of media technology on the web
+
A general look at the open Web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.
+
Accessibility guide for media in web design
+
In this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities. This ranges from simply using the {{htmlattrxref("alt", "img")}} attribute on {{HTMLElement("image")}} elements to captions to tagging media for screen readers.
+
Guide to media types and formats on the web
+
A guide to the file types and codecs available for images, audio, and video media on the web. This includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general browser support information for each media container and codec.
+
Autoplay guide for media and Web Audio APIs
+
Unexpected automatic playback of media or audio can be an unwelcome surprise to users. While autoplay serves a purpose, it should be used carefully. To give users control over this, many browsers now provide forms of autoplay blocking. This article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.
+
+ +
+
+ +

Other topics

+ +

Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.

+ +
+
The Canvas API
+
The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <canvas> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.
+
WebGL
+
WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.
+
WebVR
+
The Web Virtual Reality API supports virtual reality (VR) devices such as the Oculus Rift or the HTC Vive, making it possible for developers to translate position and movement of the user into movement within a 3D scene which is then presented on the device. WebVR is expected to be gradually replaced with WebXR, which covers a wider range of use cases.
+
WebXR
+
WebXR, which is meant to eventually replace WebVR, is a technology that provides support for creating virtual reality (VR) and augmented reality (AR) content. The mixed reality content can then be displayed on the device's screen or using goggles or a headset.
+
+
+
-- cgit v1.2.3-54-g00ecf