diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/media | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/web/media')
| -rw-r--r-- | files/ko/web/media/autoplay_guide/index.html | 262 | ||||
| -rw-r--r-- | files/ko/web/media/formats/index.html | 86 | ||||
| -rw-r--r-- | files/ko/web/media/formats/비디오코덱/index.html | 1646 | ||||
| -rw-r--r-- | files/ko/web/media/formats/컨테이너/index.html | 1279 | ||||
| -rw-r--r-- | files/ko/web/media/formats/코덱파라미터/index.html | 971 | ||||
| -rw-r--r-- | files/ko/web/media/index.html | 81 |
6 files changed, 4325 insertions, 0 deletions
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 +--- +<p>페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스럽게 쓰여야 합니다. 사용자가 이를 컨트롤 할 수 있게 여러 브라우저들은 미디어 자동 재생을 막는 기능을 제공하고 있습니다. <span class="seoSummary">I본 가이드 문서에서는 다양한 미디어와 Web audio API를 통한 자동 재생 기능에 대해 소개하고 자동 재생을 하는 법과 브라우저의 자동 재생 방지 기능에 깔끔하게 대처하는 법에 대해 알아봅니다.</span></p> + +<p>{{HTMLElement("video")}} 엘리먼트에 오디어 트랙이 없거나 음소거인 경우에는 자동 재생 방지 기능에 영향받지 않습니다. 활성화된 오디오 트랙을 가진 미디어는 <strong>audible</strong>로 취급하고 자동 재생 방지 기능이 동작합니다. <strong>Inaudible</strong> 미디어는 그렇지 않습니다.</p> + +<h2 id="자동_재생과_자동_재생_방지">자동 재생과 자동 재생 방지</h2> + +<p><strong>자동 재생(autoplay)</strong> 이라는 용어는 사용자의 재생 요청 없이 오디오를 재생하는 모든 기능을 총칭합니다. HTML attribute를 통해 재생하거나 사용자 입력 외의 코드에서 Javascript를 통해 재생하는 경우을 포합합니다.</p> + +<p>이 말은 브라우저는 아래 두 경우 모두를 자동 재생 동작으로 인지하고 자동 재생 방지 기능을 적용한다는 의미입니다:</p> + +<pre class="brush: html"><audio src="/music.mp4" autoplay></pre> + +<p>와</p> + +<pre class="brush: js">audioElement.play();</pre> + +<p>아래 웹 기능과 API는 자동 재생 방지 기능에 영향을 받습니다:</p> + +<ul> + <li>{{Glossary("HTML")}} {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> +</ul> + +<p>사용자의 입장에서는 웹 페이지나 앱이 의도와 무관하게 소음을 내기 시작하면 불쾌하거나 거슬릴 가능성이 높습니다. 때문에 일반적으로 브라우저는 특정 조건 하에서만 자동 재생이 가능하도록 허용하고 있습니다.</p> + +<h3 id="자동_재생_가능_여부">자동 재생 가능 여부</h3> + +<p>일반적으로 아래 <em>조건 중 하나라도</em> 해당된다면 자동 재생이 가능하다고 볼 수 있습니다</p> + +<ul> + <li>음소거이거나 오디오 볼륨이 0</li> + <li>사용자가 사이트와 상호작용 함 (클릭, 터치, 키 누름 등.)</li> + <li>화이트리스트에 등록된 사이트; 브라우저가 판단하기에 사용자가 해당 사이트에서 미디어를 자주 재생하거나 수동으로 화이트 리스트에 사이트를 등록한 경우를 포함합니다.</li> + <li>자동 재생 정책이 허용으로 지정되어 {{HTMLElement("iframe")}}와 document에서 자동 재생을 지원하는 경우</li> +</ul> + +<p>이외에는 자동 재생이 막힐겁니다. 정확한 차단 케이스나 사이트를 화이트리스트에 등재하는 방식 등은 브라우저마다 모두 다릅니다. 하지만 위의 케이스들이 좋은 가이드라인이 될 수 있겠죠.</p> + +<p>자세한 것은 <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">Google Chrome</a>과 <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/">WebKit</a>의 자동 재생 정책을 참조하세요.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 사용자 인터랙션이 이루어지지 않은 탭에서 오디오가 포함된 미디어를 프로그램적으로 수행하면 일반적으로 차단됩니다. 차단 조건은 브라우저별로 몇 개 더 추가 될 수 있습니다.</p> +</div> + +<h2 id="미디어_엘리먼트_자동_재생">미디어 엘리먼트 자동 재생</h2> + +<p>이제 자동 재생이 무엇인지, 자동 재생을 방지하는 것은 무엇인지에 대해 자세히 알아봅시다. 자페이지가 로드될 때 어떻게 자동으로 재생하는지, 자동 재생이 실패한 경우를 어떻게 알아내는 지 그리고 브라우저가 자동 재생을 금지한 경우 어떻게 대응할지 알아봅시다.</p> + +<h3 id="autoplay_속성">autoplay 속성</h3> + +<p>가장 간단한 자동 재생 방법은 {{HTMLElement("audio")}}나 {{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "audio")}} 속성을 추가하는 겁니다. 이는 {{domxref("HTMLMediaElement.autoplay", "autoplay")}} 속성을 <code>true</code>로 지정하며, <code>autoplay</code>가 <code>true</code>면 아래 조건이 만족된 직후부터 자동 재생을 시도합니다:</p> + +<ul> + <li>페이지가 자동 재생 기능을 허용할 때</li> + <li>페이지 로드 중에 엘리먼트가 생성될 때</li> + <li>미디어의 끝까지 문제 없이 재생 가능할 정도로 충분한 데이터가 수신되었으며, 네트워크 품질에 큰 변화가 발생하지 않을 것으로 추정되는 경우.</li> +</ul> + +<h4 id="예제_autoplay_속성">예제: autoplay 속성</h4> + +<p>{{HTMLElement("audio")}} 엘리먼트의 <code>autoplay</code> 속성을 사용하는 경우는 아래와 같습니다:</p> + +<pre class="brush: html"><audio id="musicplayer" autoplay> + <source src="/music/chapter1.mp4" +</audio> +</pre> + +<h4 id="예제_2_자동재생_실패_탐지">예제 2: 자동재생 실패 탐지</h4> + +<p>자동 재생 기능이 중요하거나, 자동 재생 실패 시 앱에 큰 영향이 가해진다면, 여러분은 아마도 자동 재생이 실패하는 시점을 알고 싶을겁니다. 안타깝게도 {{htmlattrxref("autoplay", "audio")}} 속성을 사용하는 경우, 자동 재생 성공 여부를 알아내는 것이 쉽지 않습니다. 자동 재생 실패 시 발생하는 이벤트가 없기 때문이죠. 게다가 익셉션 또는 콜백, 심지어 자동 재생이 되었을 때 켜지는 플래그조차 없습니다. 여러분이 할 수 있는 건 몇 가지 변수를 체크하거나 경험적으로 자동 재생이 동작했는지 판단할 수 밖에 없습니다.</p> + +<p>더 좋은 방법으로는 앱의 동작 방식을 자동 재생 실패를 탐지하기보다 성공을 탐지하는 방향으로 조정하는 것입니다. 이 방법은 간단한데, 미디어 엘리먼트에서 {{event("play")}} 가 발생하길 기다리는 것입니다.</p> + +<p><code>play</code> 이벤트는 일시 정지된 후 재생될때와 자동 재생이 동작하는 두 경우 모두 발생합니다. 이 말은 즉 <code>play</code> 이벤트가 최초로 발생했다면 페이지가 열린 후 미디어가 처음으로 재생되었다는것을 알 수 있다는 말이죠.</p> + +<p>아래 HTML 코드를 확인 해 보세요:</p> + +<pre class="brush: html"><video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)"></pre> + +<p>{{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "video")}} 속성이 설정되어 있으며, {{domxref("HTMLMediaElement.onplay", "onplay")}} 이벤트 핸들러도 지정되어 있습니다; 이벤트는 <code>handleFirstPlay()</code> 함수로 전달되며 <code>play</code> 이벤트를 인자로 받습니다.</p> + +<p><code>handleFirstPlay()</code> 는 아래와 같습니다:</p> + +<pre class="brush: js">function handleFirstPlay(event) { + let vid = event.target; + + vid.onplay = null; + + // Start whatever you need to do after playback has started +}</pre> + +<p>{{domxref("Event")}} 객체의 {{domxref("Event.target", "target")}} 프로퍼티로 비디오 엘리먼트 참조를 얻은 뒤에, 엘리먼트의 <code>onplay</code> 핸들러를 <code>null</code>로 세팅합니다. 이렇게 하면 향후 모든 <code>play</code> 이벤트가 핸들러로 전달되는 것을 방지합니다. 비디오 일시 정지 후 사용자가 재생하거나 백그라운드 탭으로 전환된 후 브라우저에 의해 자동으로 재생될 때 발생할 수 있습니다.</p> + +<p>이 시점에서 여러분의 사이트나 앱은 비디오 시작 후 필요한 모든 작업을 수행할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> autoplay 또는 사용자가 직접 재생하는 경우에도 위 방법은 차이점은 없습니다.</p> +</div> + +<h3 id="play_메소드">play() 메소드</h3> + +<p>사용자 입력 이벤트에서 시작된 컨텍스트 밖에서 오디오가 포함된 미디어를 재생하는 시나리오도 자동 재생(autoplay)라 부릅니다. 미디어 엘리먼트의 {{domxref("HTMLMediaElement.play", "play()")}} 메소드를 호출하면 가능합니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 가능하다면 <code>autoplay</code> 속성을 사용하는 걸 항상 추천합니다. 왜냐면 다른 방식으로 자동 재생하는 방법보다 <code>autoplay</code> 속성에 대한 지원이 더 잘 되어 있기 때문입니다. 또한 자동 재생 방식과 시점을 브라우저가 최적으로 결정할 수 있게 합니다.</p> +</div> + +<h4 id="예시_비디오_재생">예시: 비디오 재생</h4> + +<p>아래는 문서 내의 첫번째 {{HTMLElement("video")}} 엘리먼트를 찾아 재생하는 간단한 예제입니다. <code>play()</code> 는 자동 재생 권한을 획득하기 전까지는 재생하지 않습니다.</p> + +<pre class="brush: js">document.querySelector("video").play();</pre> + +<h4 id="예시_play_실패_처리">예시: play() 실패 처리</h4> + +<p>{{domxref("HTMLMediaElement.play", "play()")}} 메소드로 재생한 경우 자동 재생 실패를 탐지하는 것은 매우 쉽습니다. <code>play()</code> 함수가 재생 성공시 resolve되고 실패 시(자동 재생이 거부되거나) reject되는 {{jsxref("Promise")}}를 반환하기 때문이죠. 자동 재생이 실패한 경우 수동으로 사용자에게 자동 재생 권한을 요청하면 됩니다.</p> + +<p>아래와 같은 코드로 해결할 수 있습니다:</p> + +<pre class="brush: js">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. + }); +} +</pre> + +<p><code>play()</code>의 반환값이 <code>undefined</code>가 아닌 지 먼저 확인해야합니다. 과거 버전 HTML 표준에서는 <code>play()</code> 의 반환 값이 정의되어 있지 않기 때문입니다. Promise를 반환하여 재생 성공/실패를 알 수 있게 된 것은 최근의 일입니다. <code>undefined</code>인지 체크하여 구형 브라우저에서 오류가 발생하지 않도록 하세요.</p> + +<p>그 후 promise에 {{jsxref("Promise.catch", "catch()")}} 핸들러를 추가합니다. 핸들러는 에러의 {{domxref("DOMException.name", "name")}}이 <code>NotAllowedError</code>인지 체크합니다. 이는 재생이 실패한 이유가 자동 재생 금지 같은 퍼미션 문제인지 알 수 있습니다. 그 경우 여러분은 사용자가 직접 재생할 수 있도록 UI를 표시해야 합니다; <code>showPlayButton()</code> 함수가 하는 일이죠.</p> + +<p>다른 에러도 적절하게 처리해 줍니다.</p> + +<p><code>play()</code>가 반환 한 promise가 에러 없이 resolveed 되면, <code>then()</code> 절에서 자동 재생 성공 후 하려는 뭐든지 수행하면 됩니다.</p> + +<h2 id="Web_Audio_API를_이용한_자동_재생">Web Audio API를 이용한 자동 재생</h2> + +<p>웹사이트나 앱에서 <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>의 {{domxref("AudioContext")}} 같은 노드에서 <code>start()</code> 메소드를 호출하여 오디오를 자동 재생할 수 있습니다. 사용자 입력 컨텍스트에 벗어난 곳에서 호출할 경우에는 자동 재생 규칙이 적용됩니다.</p> + +<p><em>상세한 내용 추가 예정; 모질라는 아직 자동 재생 방지 기능을 작업 중입니다. 다른 곳에 이미 구현되었다면 여기에 마음 껏 내용을 추가해 주세요...</em></p> + +<h2 id="자동_재생_기능_정책">자동 재생 기능 정책</h2> + +<p>지금까지 설명한 브라우저 측의 자동 재생 관리 및 처리 기능도 있지만, 웹 서버도 자동 재생 여부를 결정할 수 있습니다. {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} 헤더의 <code><a href="/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay">autoplay</a></code> 디렉티브가 해당 용도입니다. 존재만 하면 자동 재생할 때 쓸 수 있습니다. 기본적으로 <code>autoplay</code>의 allowlist는 <code>'self'</code> (<em>홑따옴표 포함</em>)이며, 현재 문서와 동일한 domain에만 허용하고 있습니다.</p> + +<p><code>'none'</code>으로 지정하여 전역으로 자동 재생을 막을 수 있습니다. <code>'*'</code> 는 모든 도메인에서 전송된 미디어를 자동 재생하도록 허용합니다. 오리진은 하나의 space 문자로 구분 됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 명시된 feature policy는 현재 문서와 내부의 모든 {{HTMLElement("iframe")}}에 적용됩니다. 단 {{htmlattrxref("allow", "iframe")}} 어트리뷰트를 가진 iframe과 해당 프레임의 내부 프레임은 새로운 feature policy가 적용되며 상위의 feature policy는 무시됩니다.</p> +</div> + +<p><code><iframe></code>에 {{htmlattrxref("allow", "iframe")}}를 추가하여 해당 프레임과 내부 프레임에 feature policy를 적용하면, {{htmlattrxref("src", "iframe")}} 어트리뷰트에서 지정된 도메인에서만 미디어를 자동 재생 하도록 허용할 수 있습니다.</p> + +<h3 id="예시_document의_domain에서만_자동_재생_허용">예시: document의 domain에서만 자동 재생 허용</h3> + +<p>{{HTTPHeader("Feature-Policy")}} 헤더를 사용하여 document의 {{Glossary("origin")}}에서만 자동 재생을 허용하는 예시입니다:</p> + +<pre>Feature-Policy: autoplay 'self'</pre> + +<p>{{HTMLElement("iframe")}}에서 동일한 작업을 합니다:</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'src'"> +</iframe> +</pre> + +<h3 id="예시_전체_화면에서_자동_재생_허용">예시: 전체 화면에서 자동 재생 허용</h3> + +<p>이전 예시에 추가로 <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> 권한을 더하면 <code>Feature-Policy</code> 헤더는 아래와 같습니다. 도메인에 상관 없이 허용한 경우인데요; 필요하다면 도메인 제한을 추가할 수 있습니다.</p> + +<pre>Feature-Policy: autoplay 'self'; fullscreen</pre> + +<p><code><iframe></code> 엘리먼트의 <code>allow</code> 프로퍼티를 통해서 동일한 작업을 하면 아래와 같습니다:</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'src'; fullscreen"> +</iframe> +</pre> + +<h3 id="예시_특정_리소스만_자동_재생_허용">예시: 특정 리소스만 자동 재생 허용</h3> + +<p>document(또는 <code><iframe></code>)의 도메인과 <code>https://example.media</code> 에서만 자동 재생을 허용하기 위해서는 <code>Feature-Policy</code> 를 아래와 같이 작성합니다:</p> + +<pre>Feature-Policy: autoplay 'self' https://example.media</pre> + +<p>그리하여 {{HTMLElement("iframe")}} 역시 자신과 자식 프레임에서 자동 재생 정책을 사용하기 위해 아래와 같이 작성할 수 있습니다:</p> + +<pre class="brush: html"><iframe width="300" height="200" + src="mediaplayer.html" + allow="autoplay 'src' https://example.media"> +</iframe> +</pre> + +<h3 id="예시_자동_재생_비활성">예시: 자동 재생 비활성</h3> + +<p><code>autoplay</code> feature policy를 <code>'none'</code>으로 지정하면 전체 document, <code><iframe></code> 및 모든 내부 프레임에서 자동 재생이 불가능합니다. 헤더는 다음과 같습니다:</p> + +<pre>Feature-Policy: autoplay 'none'</pre> + +<p><code><iframe></code>의 <code>allow</code> 어트리뷰트를 쓴다면:</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'none'"> +</iframe> +</pre> + +<h2 id="유용한_사례">유용한 사례</h2> + +<p>자동 재생을 적절하게 활용하기 위한 팁과 사례들을 모아 보았습니다.</p> + +<h3 id="Media_control을_통해_자동_재생_실패_처리하기">Media control을 통해 자동 재생 실패 처리하기</h3> + +<p>자동 재생하는 대표적인 케이스는 본문이나 광고 또는 페이지의 메인 기능에 대한 프리뷰로써 짧은 비디오 클립을 자동으로 재생하는 경우입니다. 이 경우 두 가지 선택지가 있습니다: 오디오가 없는 비디오를 재생하거나, 오디오가 있어도 기본적으로 음소거하거나, 아래처럼요:</p> + +<pre class="brush: html"><video src="/videos/awesomevid.webm" controls autoplay muted></pre> + +<p>이 비디오 엘리먼트는 user control 어트리뷰트가 설정되어 있습니다 (보통 재생/일시정지, 비디오 타임라인 탐색, 볼륨 컨트롤, 음소거 등); 또한 {{htmlattrxref("muted", "video")}} 어트리뷰트가 포함되어 있어 자동 재생 되지만 음소거 상태입니다. 하지만 사용자는 볼륨 버튼을 클릭하여 음소거를 해제할 수 있죠.</p> + +<h2 id="브라우저_설정_옵션">브라우저 설정 옵션</h2> + +<p>브라우저는 보통 자동 재생 동작 방식을 컨트롤하기 위한 사전 설정, 혹은 자동 재생 방지 처리법을 가지고 있습니다. 그런 사전 설정들 중에 웹개발자인 여러분들에게 중요하거나 유용할 사전 설정들을 나열해 보았습니다. 이 설정들은 테스트 및 디버깅에 필요할 뿐만 아니라 실제로 도입되기 전 준비하는 데에도 유용합니다.</p> + +<h3 id="Firefox">Firefox</h3> + +<dl> + <dt><code>media.allowed-to-play.enabled</code></dt> + <dd>{{domxref("HTMLMediaElement.allowedToPlay")}} 프로퍼티의 노출 여부를 불리언 값으로 표현합니다. 현재는 기본값이 <code>false</code> 입니다(nightly builds는 예외로, 기본 값이 <code>true</code> 입니다). <code>false</code>라면, <code>HTMLMediaElement</code>에 <code>allowedToPlay</code> 프로퍼티가 없으며, {{HTMLElement("audio")}}와 {{HTMLElement("video")}} 엘리먼트에도 없습니다.</dd> + <dt><code>media.autoplay.allow-extension-background-pages</code></dt> + <dd>불리언 값으로, <code>true</code>라면 브라우저 확장의 백그라운드 스크립트가 오디오를 자동 재생 할 수 있습니다. <code>false</code>로 세팅하면 해당 기능을 막습니다. 기본 값은 <code>true</code>입니다.</dd> + <dt><code>media.autoplay.allow-muted</code></dt> + <dd>불리언 값으로 (기본 값) <code>true</code>는 현재 음소거 상태인 오디오 자동 재생을 허용합니다. <code>false</code>로 바뀔 때 오디오 트랙이 포함된 미디어는 음소거 상태라도 자동 재생이 불가능합니다.</dd> + <dt><code>media.autoplay.block-webaudio</code></dt> + <dd><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>를 통한 자동 재생도 차단할 지 여부를 불리언값으로 표현합니다. 기본 값은 <code>true</code>입니다.</dd> + <dt><code>media.autoplay.default</code></dt> + <dd>도메인 별 자동 재생 설정 값을 정수로 표현합니다. 허용 (<code>0</code>), 금지 (<code>1</code>), 확인 요청 (<code>2</code>). 기본 값은 <code>0</code>입니다.</dd> + <dt><code>media.autoplay.enabled.user-gestures-needed</code> (Nightly builds only)</dt> + <dd><code>media.autoplay.default</code> 값에 우선하여 사용자 제스쳐 적용 여부를 불리언 값으로 표현합니다. <code>media.autoplay.default</code> 값이 <code>0</code>이 <em>아닌</em> 경우(자동 재생이 기본으로 허용), 이 설정이 <code>true</code> 일 때 사용자 제스쳐를 통한 activation 후 오디오 트랙이 있는 미디어의 자동 재생이 가능해 집니다. 오디오가 없는 미디어는 제한되지 않습니다.</dd> + <dt><code>media.block-autoplay-until-in-foreground</code></dt> + <dd>백그라운드 탭에서 미디어 재생 시 제한 여부를 불리언 값으로 표현합니다. 기본 값 <code>true</code>는 다른 값이 허용이더라도 포그라운드에 탭이 올라오기 전까지 자동 재생이 불가능합니다. 이 설정은 어느 탭에선가 오디오를 재생했는데 사용자는 찾지 못해 탭을 뒤적이는 등의 짜증나는 시츄에이션을 방지해 줍니다.</dd> +</dl> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> (Learning guide)</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> +</ul> 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 +--- +<p>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.</p> + +<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> 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.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="References">References</h2> + +<h3 id="Images">Images</h3> + +<dl> + <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt> + <dd>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.</dd> +</dl> + +<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt> + <dd>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.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt> + <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. In this guide, the format and possible values of the <code>codecs</code> parameter for the common media types are described.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt> + <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 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.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Guides">Guides</h2> + +<h3 id="Concepts">Concepts</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt> + <dd>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.</dd> +</dl> + +<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt> + <dd>In this tutorial, the use of media on the web is introduced and covered in reasonable detail.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Other_topics">Other topics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> + <dd>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.</dd> +</dl> +</div> +</div> diff --git a/files/ko/web/media/formats/비디오코덱/index.html b/files/ko/web/media/formats/비디오코덱/index.html new file mode 100644 index 0000000000..5cccc89329 --- /dev/null +++ b/files/ko/web/media/formats/비디오코덱/index.html @@ -0,0 +1,1646 @@ +--- +title: 웹 비디오 코덱 가이드 +slug: Web/Media/Formats/비디오코덱 +translation_of: Web/Media/Formats/Video_codecs +--- +<p>압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:</p> + +<ul> + <li>HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.</li> + <li>보통 초당 30프레임이므로 HD 비디오 1초는 248,832,000바이트 (~249 MB)를 잡아 먹습니다.</li> + <li>HD 1분은 1.39 GB가 필요합니다.</li> + <li>일반적인 30분짜리 비디오 컨퍼런스의 경우 47.1 GB가 필요하며, 2시간짜리 영화는 무려<em> 166 GB</em>입니다.</li> +</ul> + +<p>비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.</p> + +<p>대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.</p> + +<p><span class="seoSummary">이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.</span></p> + +<h2 id="일반_코덱">일반 코덱</h2> + +<p>웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">코덱 이름 (축약어)</th> + <th scope="col">전체 코덱 이름</th> + <th scope="col">지원하는 컨테이너</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AV1">AV1</a></th> + <td>AOMedia Video 1</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a></th> + <td>Advanced Video Coding</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#H.263">H.263</a></th> + <td>H.263 Video</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a></td> + </tr> + <tr> + <th scope="row"><a href="#HEVC">HEVC (H.265)</a></th> + <td>High Efficiency Video Coding</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{anch("MP4V-ES")}}</th> + <td>MPEG-4 Video Elemental Stream</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{anch("MPEG-1")}}</th> + <td>MPEG-1 Part 2 Visual</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{anch("MPEG-2")}}</th> + <td>MPEG-2 Part 2 Visual</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#Theora">Theora</a></th> + <td>Theora</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a></th> + <td>Video Processor 8</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP9">VP9</a></th> + <td>Video Processor 9</td> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + </tbody> +</table> + +<h2 id="인코딩_관여_요소">인코딩 관여 요소</h2> + +<p>어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.</p> + +<p>요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를 많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.</p> + +<h3 id="인코딩_된_비디오에_영향을_끼치는_소스_포맷">인코딩 된 비디오에 영향을 끼치는 소스 포맷</h3> + +<p>소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.</p> + +<p>또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.</p> + +<table class="standard-table"> + <caption>인코딩 된 비디오의 품질과 크기에 영향을 줄 수 있는 비디오 포맷과 콘텐츠</caption> + <thead> + <tr> + <th scope="row">기능</th> + <th scope="col">품질에 영향</th> + <th scope="col">크기에 영향</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Color depth (bit depth)</th> + <td>색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강 [<code>rgba(255, 0, 0, 1)</code>] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다.</td> + <td>코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다.</td> + </tr> + <tr> + <th scope="row">프레임 레이트</th> + <td>이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 {{anch("Frame rate")}} 절을 참조하세요.</td> + <td>인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다.</td> + </tr> + <tr> + <th scope="row">움직임(Motion)</th> + <td>비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video.</td> + <td>움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다.</td> + </tr> + <tr> + <th scope="row">잡음(Noise)</th> + <td>픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠.</td> + <td>이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다.</td> + </tr> + <tr> + <th scope="row">해상도(width, height)</th> + <td>압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다.</td> + <td>해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠.</td> + </tr> + </tbody> +</table> + +<p>위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.</p> + +<h3 id="인코딩_결과물에_영향을_끼치는_코덱_설정">인코딩 결과물에 영향을 끼치는 코덱 설정</h3> + +<p>비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.</p> + +<p>또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.</p> + +<table class="standard-table"> + <caption>품질과 크기에 영향을 미치는 비디오 인코더 설정</caption> + <thead> + <tr> + <th scope="row">기능</th> + <th scope="col">품질에 영향</th> + <th scope="col">크기에 영향</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">무손실 압축</th> + <td>품질 손실 없음</td> + <td>손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다.</td> + </tr> + <tr> + <th scope="row"> + <p>손실 압축</p> + </th> + <td>특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다.</td> + <td>원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다.</td> + </tr> + <tr> + <th scope="row">품질 세팅</th> + <td>품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다.</td> + <td>보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요.</td> + </tr> + <tr> + <th scope="row">비트레이트</th> + <td>품질을 높이면 보통 비트레이트도 높아집니다.</td> + <td>비트레이트가 높으면 결과물 파일도 커지죠.</td> + </tr> + </tbody> +</table> + +<p>인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.</p> + +<h2 id="압축_아티팩트">압축 아티팩트</h2> + +<p><strong>아티팩트</strong>는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.</p> + +<p>이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 <strong>키 프레임</strong>(<strong>인트라-프레임</strong> 또는 <strong>i-프레임</strong>)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.</p> + +<h3 id="위신호Aliasing">위신호(Aliasing)</h3> + +<p>위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <h4 id="모아레_현상Moiré_patterns">모아레 현상(Moiré patterns)</h4> + + <p><strong>{{interwiki("모아레 현상-Moiré pattern")}}</strong>는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg" style="height: 250px; width: 205px;"></a></td> + </tr> + <tr> + <td> + <h4 id="계단_현상">계단 현상</h4> + + <p><strong>계단 현상</strong>은 공간적 아티팩트의 하나로 부드러워야 할 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg" style="height: 250px; width: 206px;"></a></td> + </tr> + <tr> + <td> + <h4 id="마차_바퀴_현상">마차 바퀴 현상</h4> + + <p><strong>마차 바퀴 현상</strong> (또는 <strong>{{interwiki("wikipedia", "스트로보 효과")}}</strong>)은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다. 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선 속도에 간섭하여 발생합니다.</p> + </td> + <td><a href="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"><img alt="" src="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"></a></td> + </tr> + </tbody> +</table> + +<h3 id="컬러_엣징Color_edging">컬러 엣징(Color edging)</h3> + +<p><strong>컬러 엣징</strong>은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.</p> + +<h3 id="선명도_손실">선명도 손실</h3> + +<p>비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.</p> + +<p>선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.</p> + +<h3 id="링잉_효과Ringing">링잉 효과(Ringing)</h3> + +<p>손실 압축 알고리즘은 링잉 효과 <strong>{{interwiki("wikipedia", "ringing artifacts", "ringing")}}</strong>를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.</p> + +<p><a href="https://mdn.mozillademos.org/files/16684/Ringing-effects.png"><img alt="Example of the ringing effect" src="https://mdn.mozillademos.org/files/16684/Ringing-effects.png" style="height: 368px; width: 350px;"></a></p> + +<p>위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 {{anch("Mosquito noise", "mosquito noise")}}와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.</p> + +<p>링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.</p> + +<h3 id="포스터라이징Posterizing">포스터라이징(Posterizing)</h3> + +<p><strong>포스터리제이션</strong>은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.</p> + +<p><a href="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg" style="height: 440px; width: 400px;"></a></p> + +<p>위 이미지상 흰머리 수리의 깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.</p> + +<h3 id="컨투어링Contouring">컨투어링(Contouring)</h3> + +<p><strong>컨투어링</strong> 또는 <strong>컬러 밴딩</strong>은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다. 결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.</p> + +<p><a href="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg"><img alt="Example of an image whose compression has introduced contouring" src="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg" style="height: 300px; width: 400px;"></a></p> + +<p>위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.</p> + +<h3 id="모스키토_노이즈Mosquito_noise">모스키토 노이즈(Mosquito noise)</h3> + +<p><strong>모스키토 노이즈</strong>는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 <strong>edge busyness</strong>가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는 {{anch("Ringing", "ringing")}} 효과와 유사합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16687/mosquito-effect-sm.png" style="height: 393px; width: 400px;"></p> + +<p>위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.</p> + +<p>모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.</p> + +<h3 id="움직임_보상_블록_경계면_아티팩트">움직임 보상 블록 경계면 아티팩트</h3> + +<p>일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.</p> + +<p><strong>{{interwiki("wikipedia", "움직임 보상")}}</strong>은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다. 그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 <strong>residual frame</strong>이라 부릅니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col" style="width: 216px;">원본 프레임</th> + <th scope="col" style="width: 216px;">인터-프레임 차이점</th> + <th scope="col" style="width: 216px;">움직임 보상 이후 차이점</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Original frame of video" src="https://mdn.mozillademos.org/files/16688/motion-comp-orig.jpg" style="height: 102px; width: 182px;"></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/16689/motion-comp-diff.jpg" style="height: 102px; width: 182px;"></td> + <td><img alt="Differences between the frames after shifting two pixels right" src="https://mdn.mozillademos.org/files/16690/motion-comp-compensated.jpg" style="height: 102px; width: 182px;"></td> + </tr> + <tr> + <td style="vertical-align: top;">시청자에게 보이는 최초 전체 프레임</td> + <td style="vertical-align: top;">이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다. 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을 써먹기에 아주 좋은 후보죠.</td> + <td style="vertical-align: top;">차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.</td> + </tr> + <tr> + <th colspan="3" style="font: italic 0.9em Arial, x-locale-body, sans-serif; vertical-align: middle;">Images from <a href="https://en.wikipedia.org/wiki/Motion_compensation#Illustrated_example">Wikipedia</a></th> + </tr> + </tbody> +</table> + +<p>움직임 보상에는 두 가지 형태가 있습니다: <strong>전역 움직임 보상</strong> 과 <strong>블록 움직임 보상</strong>입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.</p> + +<p>하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.</p> + +<h3 id="프레임_크기_감소">프레임 크기 감소</h3> + +<p>특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.</p> + +<h3 id="프레임_레이트_감소">프레임 레이트 감소</h3> + +<p>비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.</p> + +<p>사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.</p> + +<p>결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.</p> + +<h2 id="코덱_세부사항">코덱 세부사항</h2> + +<h3 id="AV1">AV1</h3> + +<p><strong>AOMedia Video 1</strong> (<strong>AV1</strong>) 코덱은 <a href="https://aomedia.org/">Alliance for Open Media</a> 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. {{anch("VP9")}}, {{anch("HEVC", "H.265/HEVC")}} 보다 압축율이 높으며, <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a>보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>에서 사용하기 위해 설계하였습니다.</p> + +<p>AV1은 현재 세 프로파일을 제공하며:<strong>main</strong>, <strong>high</strong>, <strong>professional</strong> 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 <strong>레벨</strong> 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.</p> + +<p>예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(<= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 파이어폭스와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.</p> + +<p>현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.</p> + +<p>위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps<sup><a href="#av1-foot-2">[2]</a></sup></td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대 120fps</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">프로필</th> + <th scope="col">색 깊이</th> + <th scope="col">크로마 서브샘플링</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Main</th> + <td>8 or 10</td> + <td>4:0:0 (그레이스케일) or 4:2:0</td> + </tr> + <tr> + <th scope="row">High</th> + <td>8 or 10</td> + <td>4:0:0 (그레이스케일), 4:2:0, or 4:4:4</td> + </tr> + <tr> + <th scope="row">Professional</th> + <td>8, 10, or 12</td> + <td>4:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">AV1 지원</th> + <td>70</td> + <td>75</td> + <td>67</td> + <td>No</td> + <td>57</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td>ISOBMFF<sup><a href="#av1-foot-1">[1]</a></sup>, MPEG-TS, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환성</th> + <td>예</td> + </tr> + <tr> + <th scope="row">유지 보수 기관</th> + <td><a href="https://aomedia.org/">Alliance for Open Media</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">https://aomediacodec.github.io/av1-spec/av1-spec.pdf</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>로열티 프리, 공개 포맷</td> + </tr> + </tbody> +</table> + +<p><a id="av1-foot-1" name="av1-foot-1">[1]</a> {{interwiki("wikipedia", "ISO Base Media File Format")}}</p> + +<p><a name="av1-foot-2">[2]</a> See the AV1 specification's <a href="https://aomediacodec.github.io/av1-spec/#levels">tables of levels</a>, which describe the maximum resolutions and rates at each level.</p> + +<h3 id="AVC_H.264"><a name="AVC">AVC</a> (H.264)</h3> + +<p>MPEG-4 스펙 집합 중 <strong>Advanced Video Coding</strong> (<strong>AVC</strong>) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.</p> + +<p>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 크로마 서브샘플링을 지원합니다.</p> + +<p>AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.</p> + +<p>AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.</p> + +<p>웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.</p> + +<p>많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 <a href="https://www.mpegla.com/programs/avc-h-264/">라이선스 요구사항</a>을 꼭 읽어보세요!</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>레벨에 따라 다름</td> + </tr> + <tr> + <th scope="row">지원 프레임레이트</th> + <td>레벨에 따라 다름; 300 fps까지 가능</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a>, 이미지안에 무손실 매크로 블록 생성 가능</td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 8,192 x 4,320 픽셀</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td> + <p>일반적이고 유효한 프로필:</p> + + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">프로필</th> + <th scope="col">색 깊이</th> + <th scope="col">크로마 서브샘플링</th> + </tr> + <tr> + <td>Constrained Baseline (CBP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Baseline (BP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Extended (XP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main (MP)</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>High (HiP)</td> + <td>8</td> + <td>4:0:0 (그레이스케일) and 4:2:0</td> + </tr> + <tr> + <td>Progressive High (ProHiP)</td> + <td>8</td> + <td>4:0:0 (그레이스케일) and 4:2:0</td> + </tr> + <tr> + <td>High 10 (Hi10P)</td> + <td>8 to 10</td> + <td>4:0:0 (그레이스케일) and 4:2:0</td> + </tr> + <tr> + <td>High 4:2:2 (Hi422P)</td> + <td>8 to 10</td> + <td>4:0:0 (그레이스케일), 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>High 4:4:4 Predictive</td> + <td>8 to 14</td> + <td>4:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>예; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} 또는 Advanced HDR/SL-HDR; 모두 ATSC의 파트</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">AVC/H.265 지원</th> + <td>4</td> + <td>12</td> + <td>35<sup><a href="#avc-foot-1">[1]</a></sup></td> + <td>9</td> + <td>25</td> + <td>3.2</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>예</td> + </tr> + <tr> + <th scope="row">유지 보수 기관</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding">https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding</a><br> + <a href="https://www.itu.int/rec/T-REC-H.264">https://www.itu.int/rec/T-REC-H.264</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>상용 특허 다수. 상용 사용 시 <a href="https://www.mpegla.com/programs/avc-h-264/">라이선스 필요</a>. 여러 특허 풀에 영향 가능</td> + </tr> + </tbody> +</table> + +<p><a id="avc-foot-1" name="avc-foot-1">[1]</a> 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.</p> + +<h3 id="H.263">H.263</h3> + +<p>ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.</p> + +<p>H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다. 하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.</p> + +<p>대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 비트레이트(<strong>BPPmaxKb)</strong>의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.</p> + +<p>H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.</p> + +<p>H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 <a href="https://www.itu.int/ITU-T/recommendations/related_ps.aspx?id_prod=4242">특허</a>에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>무제한, 단 보통 64kbps 미만</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>자유</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 1408 x 1152 픽셀<sup><a href="#h263-foot-2">[2]</a></sup></td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 비트레이트 (VFR) 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">H.263 support</th> + <td>No</td> + <td>No</td> + <td>No<sup><a href="#h263-foot-1">[1]</a></sup></td> + <td>No</td> + <td>No</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">컨테이너 지원</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">유지 보수 기관</th> + <td><a href="https://www.itu.net/">ITU</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://www.itu.int/rec/T-REC-H.263/">https://www.itu.int/rec/T-REC-H.263/</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음.</td> + </tr> + </tbody> +</table> + +<p><a id="h263-foot-1" name="h263-foot-1">[1]</a> 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.</p> + +<p><a id="h263-foot-2" name="h263-foot-2">[2]</a> Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.</p> + +<h3 id="HEVC_H.265"><a id="HEVC" name="HEVC">HEVC</a> (H.265)</h3> + +<p><strong><a href="http://hevc.info/">High Efficiency Video Coding</a></strong> (<strong>HVEC</strong>) 코덱은 ITU의 <strong>H.265 </strong>및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 {{anch("AVC")}}와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.</p> + +<p>예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.</p> + +<p>메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.</p> + +<p>HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. <a href="https://www.mpegla.com/programs/hevc/">MPEG LA</a>하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>최대 800,000 Kbps</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>레벨마다 다름; 최대 300 FPS 가능</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td> + <p>아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는 프로파일도 있습니다.</p> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">프로파일</th> + <th scope="col">색 깊이</th> + <th scope="col">크로마 서브샘플링</th> + </tr> + </thead> + <tbody> + <tr> + <td>Main</td> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main 10</td> + <td>8 to 10</td> + <td>4:2:0</td> + </tr> + <tr> + <td>Main 12</td> + <td>8 to 12</td> + <td>4:0:0 and 4:2:0</td> + </tr> + <tr> + <td>Main 4:2:2 10</td> + <td>8 to 10</td> + <td>4:0:0, 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>Main 4:2:2 12</td> + <td>8 to 12</td> + <td>4:0:0, 4:2:0, and 4:2:2</td> + </tr> + <tr> + <td>Main 4:4:4</td> + <td>8</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 10</td> + <td>8 to 10</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 12</td> + <td>8 to 12</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <td>Main 4:4:4 16 Intra</td> + <td>8 to 16</td> + <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">HEVC / H.265 support</th> + <td>No</td> + <td>18<sup><a href="#hevc-foot--1">[1]</a></sup></td> + <td>No<sup><a href="#hevc-foot-2">[2]</a></sup></td> + <td>11<sup><a href="#hevc-foot--1">[1]</a></sup></td> + <td>No</td> + <td>11</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://www.itu.net/">ITU</a> / <a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="http://www.itu.int/rec/T-REC-H.265">http://www.itu.int/rec/T-REC-H.265</a><br> + <a href="https://www.iso.org/standard/69668.html">https://www.iso.org/standard/69668.html</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>상용;<a href="https://www.mpegla.com/programs/hevc/">라이선스 요구사항</a>에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의</td> + </tr> + </tbody> +</table> + +<p><a id="hevc-foot--1" name="hevc-foot--1">[1]</a> Internet Explorer and Edge only supports HEVC on devices with a hardware codec.</p> + +<p><a id="hevc-foot-2" name="hevc-foot-2">[2]</a> Mozilla will not support HEVC while it is encumbered by patents.</p> + +<h3 id="MP4V-ES">MP4V-ES</h3> + +<p><strong>MPEG-4 Video Elemental Stream</strong> (<strong>MP4V-ES</strong>) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다. MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.</p> + +<p>원래 목적은 {{Glossary("RTP")}} 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>를 통한 모바일 통신에서도 쓰이고 있습니다.</p> + +<p>지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는<code>.mp4v</code>지만 <code>.mp4</code>로 잘못 표기된 경우도 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>5 Kbps 에서 1 Gbps 이상</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>명시적 제한 없음; 데이터 전송율에 의해 제한</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 4,096 x 4,096 픽셀</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색 깊이</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MP4V-ES support</th> + <td>No<sup><a href="#mp4ves-foot-2">[2]</a></sup></td> + <td>No</td> + <td>Yes<sup><a href="#mp4ves-foot-1">[1]</a></sup></td> + <td>No</td> + <td>No</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">Supporting/Maintaining 유지/보수 기관</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td>{{RFC(6416)}}</td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>상용; <a href="https://www.mpegla.com/">MPEG LA</a> and/or <a href="https://about.att.com/innovation/ip/patents/mpeg-4">AT&T</a>에서 필수 <a href="https://www.mpegla.com/programs/mpeg-4-visual/">라이선스 취득 필</a>요</td> + </tr> + </tbody> +</table> + +<p><a id="mp4ves-foot-1" name="mp4ves-foot-1">[1]</a> Firefox supports MP4V-ES in <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a> containers only.</p> + +<p><a name="mp4ves-foot-2">[2]</a> Chrome does not support MP4V-ES; however, Chrome OS does.</p> + +<h3 id="MPEG-1_Part_2_Video"><a id="MPEG-1" name="MPEG-1">MPEG-1</a> Part 2 Video</h3> + +<p><strong>MPEG-1 Part 2 Video</strong>는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 {{Glossary("ITU", "ITU's")}}의 개입 없이 순수히 MPEG가 만들었습니다.</p> + +<p>모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>최대 1.5 Mbps</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 4,095 x 4,095 픽셀</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">브라우저 호환</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MPEG-1 support</th> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>Yes</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td>MPEG</td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://www.iso.org/standard/22411.html">https://www.iso.org/standard/22411.html</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>Proprietary; however, all patents have expired, so MPEG-1 may be used freely</td> + </tr> + </tbody> +</table> + +<h3 id="MPEG-2_Part_2_Video"><a id="MPEG-2" name="MPEG-2">MPEG-2</a> Part 2 Video</h3> + +<p><span class="seoSummary"><strong><a href="https://en.wikipedia.org/wiki/H.262/MPEG-2_Part_2">MPEG-2 Part 2</a></strong> {{Glossary("ITU")}}가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다.</span> MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.</p> + +<p>MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.</p> + +<p>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 비트레이트로 지원합니다.</p> + +<p>그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>최대 100 Mbps; 레벨과 프로파일에 따라 다름</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">축약어</th> + <th scope="col">레벨 이름</th> + <th scope="col">지원 프레임 레이트</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">LL</th> + <td>Low Level</td> + <td>23.9, 24, 25, 29.97, 30</td> + </tr> + <tr> + <th scope="row">ML</th> + <td>Main Level</td> + <td>23.976, 24, 25, 29.97, 30</td> + </tr> + <tr> + <th scope="row">H-14</th> + <td>High 1440</td> + <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> + </tr> + <tr> + <th scope="row">HL</th> + <td>High Level</td> + <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">축약어</th> + <th scope="col">레벨 이름</th> + <th scope="col">최대 프레임 크기</th> + </tr> + <tr> + <th scope="row">LL</th> + <td>Low Level</td> + <td>352 x 288 pixels</td> + </tr> + <tr> + <th scope="row">ML</th> + <td>Main Level</td> + <td>720 x 576 pixels</td> + </tr> + <tr> + <th scope="row">H-14</th> + <td>High 1440</td> + <td>1440 x 1152 pixels</td> + </tr> + <tr> + <th scope="row">HL</th> + <td>High Level</td> + <td>1920 x 1152 pixels</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2" 프로파일에서 4:2:2 크로마 서브샘플링 지원.</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트(VFR) 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">MPEG-2 support</th> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>No</td> + <td>Yes</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, MPEG-TS (MPEG Transport Stream), <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://www.itu.int/rec/T-REC-H.262">https://www.itu.int/rec/T-REC-H.262</a><br> + <a href="https://www.iso.org/standard/61152.html">https://www.iso.org/standard/61152.html</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능. <a href="https://www.mpegla.com/programs/mpeg-2/">MPEG LA</a>에 의해 특허 관리</td> + </tr> + </tbody> +</table> + +<h3 id="Theora">Theora</h3> + +<p><a href="https://xiph.org/">Xiph.org</a>가 <strong>{{interwiki("wikipedia", "Theora")}}</strong>는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.</p> + +<p>Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.</p> + +<p>Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>최대 2 Gbps</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit 분자와 분모로 구성되어 있음</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>예<sup><a href="#theora-foot-1">[1]</a></sup></td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">Theora support</th> + <td>3</td> + <td>Yes<sup><a href="#theora-foot-2">[2]</a></sup></td> + <td>3.5</td> + <td>No</td> + <td>10.5</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://www.xiph.org/">Xiph.org</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://www.theora.org/doc/">https://www.theora.org/doc/</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>오픈 프리-로열티</td> + </tr> + </tbody> +</table> + +<p><a id="theora-foot-1" name="theora-foot-1">[1]</a> 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.</p> + +<p><a name="theora-foot-2">[2]</a> Edge supports Theora with the optional <a href="https://www.microsoft.com/en-us/p/web-media-extensions/9n5tdp8vcmhs?activetab=pivot:overviewtab">Web Media Extensions</a> add-on.</p> + +<h3 id="VP8">VP8</h3> + +<p><strong>Video Processor 8</strong> (<strong>VP8</strong>) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 {{anch("AVC")}}에 견줄만 합니다.</p> + +<p>브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.</p> + +<p>HTML 콘텐츠로써 특히 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 <em>반드시</em> 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>level별 제한이 없는 한 무제한 임의의 값</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>임의 값</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 일고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 16,384 x 16,384 픽셀</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td>Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이</td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>아니오</td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>예</td> + </tr> + <tr> + <th scope="row">지원 브라우저</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">VP8 support</th> + <td>25</td> + <td>14<sup><a href="#vp8-foot-1">[1]</a></sup></td> + <td>4</td> + <td>9</td> + <td>16</td> + <td>12.1<sup><a href="#vp8-foot-2">[2]</a></sup></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>예; VP8은 WebRTC의 필수 코덱 중 하나</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://www.google.com/">Google</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td>{{RFC(6386)}}</td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>라이선스 및 로열티로부터 자유로운 오픈 소스</td> + </tr> + </tbody> +</table> + +<p><a name="vp8-foot-1">[1]</a> Edge support for VP8 requires the use of <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.</p> + +<p><a id="vp8-foot-2" name="vp8-foot-2">[2]</a> Safari only supports VP8 in WebRTC connections.</p> + +<h3 id="VP9">VP9</h3> + +<p><strong>Video Processor 9</strong> (<strong>VP9</strong>)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.</p> + +<p>VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.</p> + +<p>VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 {{anch("VP8")}}). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.</p> + +<p>Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">지원 비트레이트</th> + <td>level 제한이 없는 한 무제한 임의의 값</td> + </tr> + <tr> + <th scope="row">지원 프레임 레이트</th> + <td>임의 값</td> + </tr> + <tr> + <th scope="row">압축</th> + <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 알고리즘</a></td> + </tr> + <tr> + <th scope="row">지원 프레임 크기</th> + <td>최대 65,536 x 65,536 픽셀</td> + </tr> + <tr> + <th scope="row">지원 컬러 모드</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Profile</th> + <th scope="col">색 깊이</th> + <th scope="col">크로마 서브샘플링</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Profile 0</th> + <td>8</td> + <td>4:2:0</td> + </tr> + <tr> + <th scope="row">Profile 1</th> + <td>8</td> + <td>4:2:0, 4:2:2, and 4:4:4</td> + </tr> + <tr> + <th scope="row">Profile 2</th> + <td>10 to 12</td> + <td>4:2:0</td> + </tr> + <tr> + <th scope="row">Profile 3</th> + <td>10 to 12</td> + <td>4:2:0, 4:2:2, and f:4:4</td> + </tr> + </tbody> + </table> + + <p>지원 색 공간: {{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")}}.</p> + </td> + </tr> + <tr> + <th scope="row">HDR 지원</th> + <td>예; HDR10+, <a href="https://en.wikipedia.org/wiki/Hybrid_Log-Gamma">HLG</a>, <a href="https://en.wikipedia.org/wiki/Perceptual_Quantizer">PQ</a></td> + </tr> + <tr> + <th scope="row">가변 프레임 레이트 (VFR) 지원</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">브라우저 호환성</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">기능</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">VP9 지원</th> + <td>29</td> + <td>14</td> + <td>28</td> + <td>No</td> + <td>10.6</td> + <td>No</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">지원 컨테이너</th> + <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td> + </tr> + <tr> + <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th> + <td>예</td> + </tr> + <tr> + <th scope="row">유지/보수 기관</th> + <td><a href="https://www.google.com/">Google</a></td> + </tr> + <tr> + <th scope="row">스펙</th> + <td><a href="https://www.webmproject.org/vp9/">https://www.webmproject.org/vp9/</a></td> + </tr> + <tr> + <th scope="row">라이선스</th> + <td>라이선스 및 로열티-프리 오픈 소스requirements</td> + </tr> + </tbody> +</table> + +<h2 id="코덱_선택하기">코덱 선택하기</h2> + +<p>어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:</p> + +<ul> + <li>오픈 포맷을 사용할건가요? 상용 코덱도 염두에 두고 있나요?</li> + <li>한 비디오를 여러 포맷으로 생산할 여력이 되나요? fallback 옵션을 제공할 수 있다면 의사 결정 과정을 단순화 할 수 있습니다.</li> + <li>호환성을 포기할 수 있는 브라우저가 있나요?</li> + <li>보장하는 커버리지 상 가장 오래된 브라우저는 어떤 것인가요? 예를 들어 지난 5년간 출시된 모든 브라우저를 지원할지, 1년 사이의 브라우저만을 지원할지?</li> +</ul> + +<p>아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.</p> + +<p>각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.</p> + +<h3 id="Recommendations_for_everyday_videos">Recommendations for everyday videos</h3> + +<p>우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.</p> + +<ol> + <li> + <p><strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> 컨테이너에 비디오는 <strong>{{anch("VP8")}}, 오디오는</strong> <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></strong> 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.</p> + + <pre class="brush: js"><video controls src="filename.webm"></video> +</pre> + </li> + <li> + <p><strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> 컨테이너에 비디오 코덱은 <strong>{{anch("AVC")}}</strong> (<strong>H.264</strong>) 오디오 코덱은 <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#AAC">AAC</a></strong> 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.</p> + + <pre class="brush: html"><video controls> + <source type="video/webm" + src="filename.webm"> + <source type="video/mp4" + src="filename.mp4"> +</video> +</pre> + </li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> {{HTMLElement("<video>")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 <code></video></code> 닫기 태그가 필요하다는 것을 잊지 마세요.</p> +</div> + +<h3 id="고품질_비디오_제공을_위한_추천">고품질 비디오 제공을 위한 추천</h3> + +<p>여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.</p> + +<ol> + <li> + <p>WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.</p> + + <pre class="brush: js"><video controls src="filename.webm"></video> +</pre> + </li> + <li> + <p>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을 사용합니다.</p> + + <pre class="brush: html"><video controls> + <source type="video/webm" + src="filename.webm"> + <source type="video/mp4" + src="filename.mp4"> +</video> +</pre> + </li> +</ol> + +<h3 id="비디오_보존_편집_믹싱을_위한_추천">비디오 보존, 편집, 믹싱을 위한 추천</h3> + +<p>웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.</p> + +<p>손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.</p> + +<h4 id="외부에_비디오_보존">외부에 비디오 보존</h4> + +<p>여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 <a href="https://www.videolan.org/developers/x264.html">x264</a> 유틸리티는 매우 높은 비트레이트로 {{anch("AVC")}} 인코딩을 할 수 있습니다:</p> + +<pre>x264 --crf 18 -preset ultrafast --output <em>outfilename.mp4</em> <em>infile</em></pre> + +<p>다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.</p> + +<h4 id="비디오_녹화">비디오 녹화</h4> + +<p>무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, {{anch("AVC")}} 또는 {{anch("AV1")}}를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>를 사용한다면, {{domxref("MediaRecorder")}} 객체를 생성하는 코드는 아래와 같습니다:</p> + +<pre class="brush: js">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);</pre> + +<p>위 예제에서 <code>MediaRecorder</code>를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 {{anch("AV1")}} 비디오 레코딩을, <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#FLAC">FLAC</a>으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.</p> + +<p><code>codecs</code> 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>av01</code></td> + <td>4문자 코드 (4CC-4 Character Code) {{anch("AV1")}} 코덱을 의미합니다.</td> + </tr> + <tr> + <td><code>2</code></td> + <td>프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile.</td> + </tr> + <tr> + <td><code>19H</code></td> + <td>레벨과 티어. AV 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#levels">A.3</a>의 표에서 설명, Level 6.3의 High tier를 의미합니다</td> + </tr> + <tr> + <td><code>12</code></td> + <td>색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다.</td> + </tr> + <tr> + <td><code>0</code></td> + <td>모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다.</td> + </tr> + <tr> + <td><code>000</code></td> + <td>크로마 서브샘플링 모드. AV1 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다.</td> + </tr> + <tr> + <td><code>09</code></td> + <td>사용할 색 공간. AV1 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다.</td> + </tr> + <tr> + <td><code>16</code></td> + <td>전송시 사용할 색 공간. 마찬가지로 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다.</td> + </tr> + <tr> + <td><code>09</code></td> + <td><a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다.</td> + </tr> + <tr> + <td><code>1</code></td> + <td>"full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다.</td> + </tr> + </tbody> +</table> + +<p>선택하고자 하는 코덱 문서에 <code>codecs</code> 파라미터 값이 받아들이는 설정이 설명되어 있습니다.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">웹 오디오 코덱 가이드</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Containers">미디어 컨테이너 포맷(파일 타입)</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Support_issues">웹 콘텐츠에서 미디어 사용시 이슈 해결</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">WebRTC에서 사용하는 코덱</a></li> + <li>{{RFC(6381)}}: The "Codecs" and "Profiles" parameters for "Bucket" media types</li> + <li>{{RFC(5334)}}: Ogg Media Types</li> + <li>{{RFC(3839)}}: MIME Type Registrations for 3GPP Multimedia Files</li> + <li>{{RFC(4381)}}: MIME Type Registrations for 3GPP2 Multimedia Files</li> + <li>{{RFC(4337)}}: MIME Type Registrations for MPEG-4</li> +</ul> diff --git a/files/ko/web/media/formats/컨테이너/index.html b/files/ko/web/media/formats/컨테이너/index.html new file mode 100644 index 0000000000..d4e45c294a --- /dev/null +++ b/files/ko/web/media/formats/컨테이너/index.html @@ -0,0 +1,1279 @@ +--- +title: 미디어 컨테이너 포맷 (파일 타입) +slug: Web/Media/Formats/컨테이너 +translation_of: Web/Media/Formats/Containers +--- +<p>오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. <span class="seoSummary">이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.</span></p> + +<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> 문서를 참고하세요.</p> + +<h2 id="일반적인_컨테이너_포맷">일반적인 컨테이너 포맷</h2> + +<p>미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 <code>.opus</code> 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.</p> + +<p>반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 <code>audio/mp3</code> MIME 타입과 <code>.mp3</code> 확장자를 사용합니다.</p> + +<h2 id="컨테이너_포맷파일_타입_인덱스" style="font-size: 1.4em;">컨테이너 포맷(파일 타입) 인덱스</h2> + +<p>특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.</p> + +<div class="index"> +<ul> + <li>{{anch("3GP")}}</li> + <li>{{anch("ADTS")}}</li> + <li>{{anch("FLAC")}}</li> + <li>{{anch("MPEG", "MPEG / MPEG-2")}}</li> + <li>{{anch("MP4", "MPEG-4 (MP4)")}}</li> + <li>{{anch("Ogg")}}</li> + <li>{{anch("QuickTime")}}</li> + <li>{{anch("WAVE")}}</li> + <li>{{anch("WebM")}}</li> +</ul> +</div> + +<h3 id="3GP">3GP</h3> + +<p><strong>3GP</strong> 또는 <strong>3GPP</strong> 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.</p> + +<p>이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.</p> + +<table class="standard-table"> + <caption>Base 3GP media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/3gpp</code></td> + <td><code>video/3gpp</code></td> + </tr> + <tr> + <td><code>audio/3gpp2</code></td> + <td><code>video/3gpp2</code></td> + </tr> + <tr> + <td><code>audio/3gp2</code></td> + <td><code>video/3gp2</code></td> + </tr> + </tbody> +</table> + +<p>위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.</p> + +<table class="standard-table"> + <caption>3GP가 지원하는 비디오 코덱.</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a>,<a href="#3gp-vid-footnote-1">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 (MP4v-es)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">VP8</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="3gp-vid-footnote-1" name="3gp-vid-footnote-1">[1]</a> FIrefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p> + +<p><a id="3gp-vid-footnote-2" name="3gp-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<table class="standard-table"> + <caption>3GP가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AMR-NB</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AMR-WB</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AMR-WB+</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AAC-LC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC v1</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC v2</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MP3</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="3gp-aud-footnote-1" name="3gp-aud-footnote-1">[1]</a> FIrefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p> + +<p><a id="3gp-aud-footnote-2" name="3gp-aud-footnote-2">[2]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="ADTS">ADTS</h3> + +<p><strong>Audio Data Transport Stream</strong> (<strong>ADTS</strong>) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.</p> + +<table class="standard-table"> + <caption>ADTS media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/aac</code><sup><a href="#adts-foot-1">[1]</a></sup></td> + </tr> + <tr> + <td><code>audio/mpeg</code><sup><a href="#adts-foot-1">[1]</a></sup></td> + </tr> + </tbody> +</table> + +<p><a id="adts-foot-1" name="adts-foot-1">[1]</a> The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the <code>audio/aac</code> 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 <code>audio/mpeg</code>.</p> + +<table class="standard-table"> + <caption>ADTS가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#adts-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">MP3</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="adts-aud-footnote-1" name="adts-aud-footnote-1">[1]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="FLAC">FLAC</h3> + +<p><strong>Free Lossless Audio Codec</strong> (<strong>FLAC</strong>)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.</p> + +<table class="standard-table"> + <caption>FLAC media MIME type</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/flac</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>FLAC이 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="MPEGMPEG-2"><a id="MPEG" name="MPEG">MPEG</a>/MPEG-2</h3> + +<p><strong>{{interwiki("wikipedia", "MPEG-1")}}과</strong> <strong>{{interwiki("wikipedia", "MPEG-2")}}</strong>은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.</p> + +<p>인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.</p> + +<p>MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.</p> + +<table class="standard-table"> + <caption>MPEG-1과 MPEG-2 media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/mpeg</code></td> + <td><code>video/mpeg</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>MPEG-1과 MPEG-2가 지원하는 비디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">MPEG-1 Part 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-2 Part 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>MPEG-1과 MPEG-2가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">MPEG-1 Audio Layer I</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer II</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="MPEG-4_MP4"><a id="MP4" name="MP4">MPEG-4 (MP4)</a></h3> + +<p><strong>{{interwiki("wikipedia", "MPEG-4")}}</strong> (<strong>MP4</strong>) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.</p> + +<p>최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 <a href="https://www.apple.com/">Apple</a>이 개발한 {{interwiki("wikipedia", "QuickTime file format")}}에서 파생된 {{interwiki("wikipedia", "ISO base media file format")}}에서 다시 파생되었습니다.</p> + +<p>MPEG-4 미디어 타입을 표기할 때 (<code>audio/mp4</code> or <code>video/mp4</code>), MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p> + +<table class="standard-table"> + <caption>기본 MPEG-4 media MIME 타입</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/mp4</code></td> + <td><code>video/mp4</code></td> + </tr> + </tbody> +</table> + +<p>위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p> + +<table class="standard-table"> + <caption>MPEG-4가 지원하는 비디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AV1</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 Visual</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">VP9</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="mp4-vid-footnote-1" name="mp4-vid-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<p><a id="mp4-vid-footnote-2" name="mp4-vid-footnote-2">[2]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p> + +<table class="standard-table"> + <caption>MPEG-4가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#mp4-aud-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Opus</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="mp4-aud-footnote-1" name="mp4-aud-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<h3 id="Ogg">Ogg</h3> + +<p><strong>{{interwiki("wikipedia", "Ogg")}}는 </strong><a href="https://www.xiph.org/">Xiph.org Foundation</a>이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 <a href="https://xiph.org/ogg/">Xiph.org documents about the Ogg format</a>를 확인할 수 있습니다.</p> + +<table class="standard-table"> + <caption>기본 Ogg media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/ogg</code></td> + <td><code>video/ogg</code></td> + </tr> + </tbody> +</table> + +<p>MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#Ogg"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.</p> + +<table class="standard-table"> + <caption>Ogg가 지원하는 비디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Theora</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">VP8</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">VP9</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Ogg가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">FLAC</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Opus</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Vorbis</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="QuickTime">QuickTime</h3> + +<p><strong>QuickTime</strong> 파일 포맷(<strong>QTFF</strong>, <strong>QT</strong>, <strong>MOV</strong>) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 <code>.mov</code>는 최초 영화에서 쓰이기 위해 개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.</p> + +<p>QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 <em>사용해선 안됩니다</em>. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.</p> + +<p>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 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.</p> + +<p>추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.</p> + +<p>QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.</p> + +<table class="standard-table"> + <caption>Base QuickTime media MIME type</caption> + <thead> + <tr> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>video/quicktime</code></td> + </tr> + </tbody> +</table> + +<p><code>video/quicktime</code> 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.</p> + +<p>MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p> + +<table class="standard-table"> + <caption>QuickTime이 지원하는 비디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Cinepak</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Component Video</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">DV</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">H.261</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">H.263</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-4 Part 2 Visual</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Motion JPEG</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Sorenson Video 2</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Sorenson Video 3</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>QuickTime이 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AAC</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">ALaw 2:1</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Apple Lossless (ALAC)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">HE-AAC</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">Microsoft ADPCM</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">µ-Law 2:1 (u-Law)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="WAVE_WAV"><a id="WAVE" name="WAVE">WAVE</a> (WAV)</h3> + +<p>Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 <code>.wav</code> 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.</p> + +<p>이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..</p> + +<p>WAVE 포맷은 1991년 처음 발표되었습니다.</p> + +<table class="standard-table"> + <caption>WAVE media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/wave</code></td> + </tr> + <tr> + <td><code>audio/wav</code></td> + </tr> + <tr> + <td><code>audio/x-wav</code></td> + </tr> + <tr> + <td><code>audio/x-pn-wav</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>WAVE가 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">ADPCM (Adaptive Differential Pulse Code Modulation)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">GSM 06.10</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">LPCM (Linear Pulse Code Modulation)</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">MPEG-1 Audio Layer III (MP3)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + <tr> + <th scope="row">µ-Law (u-Law)</th> + <td></td> + <td></td> + <td>No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="WebM">WebM</h3> + +<p><strong>{{interwiki("wikipedia", "WebM")}}</strong> (Web Media)는 {{interwiki("wikipedia", "Matroska")}}에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.</p> + +<p>WebM은 2010년 처음 소개되었습니다..</p> + +<table class="standard-table"> + <caption>WebM media MIME types</caption> + <thead> + <tr> + <th scope="col">Audio</th> + <th scope="col">Video</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/webm</code></td> + <td><code>video/webm</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>WebM이 지원하는 비디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">AV1</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#av1-vid-footnote-1">1</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">AVC (H.264)</th> + <td></td> + <td></td> + <td>Yes<sup><a href="#av1-vid-footnote-2">2</a></sup></td> + <td></td> + </tr> + <tr> + <th scope="row">VP8</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">VP:9</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<p><a id="av1-vid-footnote-1" name="av1-vid-footnote-1">[1]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p> + +<p><a id="av1-vid-footnote-2" name="av1-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p> + +<table class="standard-table"> + <caption>WebM이 지원하는 오디오 코덱</caption> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th> + <th colspan="4" scope="col" style="text-align: center;">Browser support</th> + </tr> + <tr> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Opus</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + <tr> + <th scope="row">Vorbis</th> + <td></td> + <td></td> + <td>Yes</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="알맞은_컨테이너_선택하기">알맞은 컨테이너 선택하기</h2> + +<p>여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.</p> + +<h3 id="가이드라인">가이드라인</h3> + +<p>최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.</p> + +<ul> + <li>저사양 단말 또는 저속 네트워크를 사용하는 고객을 대상으로 하고 있다면 3GP 컨테이너와 적절한 압축 코덱을 고려해 볼 수 있습니다.</li> + <li>인코딩시 필수 사항이 있다면 컨테이너 선택 시 적절한 코덱을 지원하는 지 확인해야 합니다.</li> + <li>미디어가 상용이 아니며 오픈 포맷일 경우 FLAC(오디오), WebM(비디오) 등의 오픈 컨테이너 포맷을 고려해 보세요.</li> + <li>어떠한 이유로 미디어를 한가지 포맷으로 제공해야 한다면 많은 디바이스와 브라우저에 널리 쓰여지는 MP3(오디오), MP4(비디오, 오디오)등의 포맷을 선택하세요.</li> + <li>미디어가 오디오만 있다면 오디오 전용 컨테이너를 사용하는게 합당합니다. 현재는 특허가 모두 만료되어 널리 쓰여지는 MP3가 좋은 선택입니다. WAVE도 좋지만 비압축이므로 대용량 오디오 샘플의 경우에는 사용을 주의하세요. 모든 타겟 브라우저가 지원한다면 무손실 압축을 지원하는 FLAC이 최선입니다.</li> +</ul> + +<p>슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.</p> + +<h3 id="컨테이너_선택_가이드">컨테이너 선택 가이드</h3> + +<p>아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.</p> + +<h4 id="오디오_전용_파일">오디오 전용 파일</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">만약에...</th> + <th scope="col">추천 컨테이너 포맷</th> + </tr> + </thead> + <tbody> + <tr> + <td>일반 재생 목적으로 압축 파일 사용</td> + <td>MP3 (MPEG-1 Audio Layer III)</td> + </tr> + <tr> + <td>무손실 압축 파일</td> + <td>FLAC with ALAC fallback</td> + </tr> + <tr> + <td>무압축 파일</td> + <td>WAV</td> + </tr> + </tbody> +</table> + +<p>이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.</p> + +<h4 id="비디오_파일">비디오 파일</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">만약에...</th> + <th scope="col">추천 컨테이너 포맷</th> + </tr> + <tr> + <td>가능한 오픈 포맷을 사용한 일반 비디오</td> + <td>WebM (MP4 호환 추가)</td> + </tr> + <tr> + <td>일반 비디오</td> + <td>MP4 (WebM, Ogg 호환 추가)</td> + </tr> + <tr> + <td>저속 네트워크상의 고효율 압축</td> + <td>3GP (MP4 호환 추가)</td> + </tr> + <tr> + <td>구형 단말/브라우저 지원</td> + <td>QuickTime (AVI, MPEG-2 호환 추가)</td> + </tr> + </thead> +</table> + +<p>몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.</p> + +<h2 id="다양한_컨테이너간_호환성_극대화">다양한 컨테이너간 호환성 극대화</h2> + +<p>호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.</p> + +<p>구현하려면 우선 {{htmlattrxref("src", "video")}} 어트리뷰트 없이 <code><video></code> (또는 <code><audio></code>) 엘리먼트를 생성합니다. 그 후 <code><video></code> 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.</p> + +<p>아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>첫번째 비디오는 WebM 포맷입니다({{htmlattrxref("type", "video")}} 어트리뷰트가 <code>video/webm</code>). {{Glossary("user agent")}}는 재생이 불가능 한 경우 <code>type</code> 이 <code>video/mp4</code> 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.</p> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441">ETSI 3GPP</a></td> + <td>3GP 컨테이너 포맷 정의</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/53943.html">ISO/IEC 14496-3</a> (MPEG-4 Part 3 Audio)</td> + <td>ADTS 포함 한 MP4 오디오 정의</td> + </tr> + <tr> + <td><a href="https://xiph.org/flac/format.html">FLAC Format</a></td> + <td>FLAC 포맷 규정</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/19180.html">ISO/IEC 11172-1</a> (MPEG-1 Part 1 Systems)</td> + <td>MPEG-1 컨테이너 포맷 정의</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/74427.html">ISO/IEC 13818-1</a> (MPEG-2 Part 1 Systems)</td> + <td>MPEG-2 컨테이너 포맷 정의</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/75929.html">ISO/IEC 14496-14</a> (MPEG-4 Part 14: MP4 file format)</td> + <td>MPEG-4 (MP4) version 2 컨테이너 포맷 정의</td> + </tr> + <tr> + <td><a href="https://www.iso.org/standard/55688.html">ISO/IEC 14496-1</a> (MPEG-4 Part 1 Systems)</td> + <td>오리지널 MPEG-4 (MP4) 컨테이너 포맷 정의</td> + </tr> + <tr> + <td>{{RFC(3533)}}</td> + <td>Ogg 컨테이너 포맷 정의</td> + </tr> + <tr> + <td>{{RFC(5334)}}</td> + <td>Ogg 미디어 타입 및 확장자 정의</td> + </tr> + <tr> + <td><a href="https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html">QuickTime File Format Specification</a></td> + <td>QuickTime movie (MOV) 포맷 정의</td> + </tr> + <tr> + <td><a href="https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt">Multimedia Programming Interface and Data Specifications 1.0</a></td> + <td>공식 WAVE 스펙에 가까운 문서</td> + </tr> + <tr> + <td><a href="https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-">Resource Interchange File Format</a> (used by WAV)</td> + <td>RIFF 포맷 정의; WAVE는 RIFF의 한 형태</td> + </tr> + <tr> + <td><a href="https://www.webmproject.org/docs/container/">WebM Container Guidelines</a></td> + <td>WebM 용 Matroska 적용 가이드</td> + </tr> + <tr> + <td><a href="https://matroska.org/technical/specs/index.html">Matroska Specifications</a></td> + <td>WebM 기반 Matroska 컨테이너 포맷 스펙</td> + </tr> + <tr> + <td><a href="https://w3c.github.io/media-source/webm-byte-stream-format.html">WebM Byte Stream Format</a></td> + <td><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>를 통한 WebM 바이트 스트림 포맷</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<table class="standard-table"> + <thead> + <tr> + <th rowspan="2" scope="row" style="vertical-align: bottom;">컨테이너 포맷 이름</th> + <th colspan="3" rowspan="1" scope="col" style="text-align: center; border-right: 2px solid #d4dde4;">오디오</th> + <th colspan="3" rowspan="1" scope="col" style="text-align: center;">비디오</th> + </tr> + <tr> + <th scope="col" style="vertical-align: bottom;">MIME type</th> + <th scope="col" style="vertical-align: bottom;">Extension(s)</th> + <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th> + <th scope="col" style="vertical-align: bottom;">MIME type</th> + <th scope="col" style="vertical-align: bottom;">Extension(s)</th> + <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="vertical-align: bottom;">3GP</th> + <td style="vertical-align: top;"><code>audio/3gpp</code></td> + <td style="vertical-align: top;"><code>.3gp</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/3gpp</code></td> + <td style="vertical-align: top;"><code>.3gp</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">ADTS (Audio Data Transport Stream)</th> + <td style="vertical-align: top;"><code>audio/aac</code></td> + <td style="vertical-align: top;"><code>.aac</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">FLAC</th> + <td style="vertical-align: top;"><code>audio/flac</code></td> + <td style="vertical-align: top;"><code>.flac</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th rowspan="2" scope="row" style="vertical-align: top;">MPEG-1 / MPEG-2 (MPG or MPEG)</th> + <td style="vertical-align: top;"><code>audio/mpeg</code></td> + <td style="vertical-align: top;"><code>.mpg</code><br> + <code>.mpeg</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td rowspan="2" style="vertical-align: top;"><code>video/mpeg</code></td> + <td rowspan="2" style="vertical-align: top;"><code>.mpg</code><br> + <code>.mpeg</code></td> + <td rowspan="2" style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <td style="vertical-align: top;"><code>audio/mp3</code></td> + <td style="vertical-align: top;"><code>.mp3</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">MPEG-4 (MP4)</th> + <td style="vertical-align: top;"><code>audio/mp4</code></td> + <td style="vertical-align: top;"><code>.mp4</code><br> + <code>.m4a</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/mp4</code></td> + <td style="vertical-align: top;"><code>.mp4</code><br> + <code>.m4v</code><br> + <code>.m4p</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">Ogg</th> + <td style="vertical-align: top;"><code>audio/ogg</code></td> + <td style="vertical-align: top;"><code>.oga</code><br> + <code>.ogg</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/ogg</code></td> + <td style="vertical-align: top;"><code>.ogv</code><br> + <code>.ogg</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">QuickTime Movie (MOV)</th> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">—</td> + <td style="vertical-align: top;"><code>video/quicktime</code></td> + <td style="vertical-align: top;"><code>.mov</code></td> + <td style="vertical-align: top;"></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">WAV (Waveform Audiofile)</th> + <td style="vertical-align: top;"><code>audio/wav</code></td> + <td style="vertical-align: top;"><code>.wav</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + <td style="vertical-align: top;">—</td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">WebM</th> + <td style="vertical-align: top;"><code>audio/webm</code></td> + <td style="vertical-align: top;"><code>.webm</code></td> + <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td> + <td style="vertical-align: top;"><code>video/webm</code></td> + <td style="vertical-align: top;"><code>.webm</code></td> + <td style="vertical-align: top;">Firefox</td> + </tr> + </tbody> +</table> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li> + <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li> +</ul> diff --git a/files/ko/web/media/formats/코덱파라미터/index.html b/files/ko/web/media/formats/코덱파라미터/index.html new file mode 100644 index 0000000000..43cce1aa1f --- /dev/null +++ b/files/ko/web/media/formats/코덱파라미터/index.html @@ -0,0 +1,971 @@ +--- +title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 +slug: Web/Media/Formats/코덱파라미터 +translation_of: Web/Media/Formats/codecs_parameter +--- +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div> + +<p>기본적으로, <code>video/mp4</code>, <code>audio/mpeg</code> 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 비디오라고 해서 MIME 타입을 <code>video/mp4</code>만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.</p> + +<p>때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 <code>codecs</code> 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.</p> + +<p><span class="seoSummary">이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 <code>codecs</code> 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.</span></p> + +<h2 id="일반_문법">일반 문법</h2> + +<p>기본적인 MIME 미디어 타입 표현은 미디어 타입(<code>audio</code>, <code>video</code>, 등)으로 시작하며, 슬래쉬 문자 (<code>/</code>) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:</p> + +<dl> + <dt><code>audio/mpeg</code></dt> + <dd>MP3 같은 <a href="/en-US/docs/Web/Media/Formats/Containers#MPEG">MPEG</a> 파일 타입의 오디오 파일입니다.</dd> + <dt><code>video/ogg</code></dt> + <dd><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> 파일 타입의 비디오 파일입니다.</dd> + <dt><code>video/mp4</code></dt> + <dd><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 파일 타입을 사용하는 비디오입니다.</dd> + <dt><code>video/quicktime</code></dt> + <dd>애플 <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a> 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.</dd> +</dl> + +<p>위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 <code>codecs</code> 파라미터를 추가하여 명시할 수 있습니다.</p> + +<p>세미콜론 (<code>;</code>)을 붙이고 <code>codecs=</code> 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.</p> + +<dl> + <dt><code>audio/ogg; codecs=vorbis</code></dt> + <dd><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> 오디오 트랙을 포함하는 <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> 컨테이너 파일입니다.</dd> + <dt><code>video/webm; codecs="vp8, vorbis"</code></dt> + <dd><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a> 비디오와 <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> 오디오를 포함하는 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> 컨테이너 파일입니다.</dd> + <dt><code>video/mp4; codecs="avc1.4d002a"</code></dt> + <dd><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a> (H.264) 코덱에 Main Profile, Level 4.2을 가지는 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 컨테이너 파일입니다.</dd> +</dl> + +<p>코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자{{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}를 사용하는 경우 MIME 타입을 기술하는 문자열의 <code>codecs</code> 파라미터를 <code>codecs*</code> (애스터리크(<code>*</code>) 추가됨에 유의)로 변경해야 합니다. JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><code>codecs</code> 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.</p> +</div> + +<h2 id="컨테이너별_코덱_옵션">컨테이너별 코덱 옵션</h2> + +<p>아래 컨테이너들은 <code>codecs</code> 파라미터에 확장 옵션을 지원합니다:</p> + +<div class="index"> +<ul> + <li>{{anch("ISO-BMFF", "3GP")}}</li> + <li>{{anch("AV1")}}</li> + <li>{{anch("ISO-BMFF", "ISO BMFF")}}</li> + <li>{{anch("ISO-BMFF", "MPEG-4")}}</li> + <li>{{anch("ISO-BMFF", "QuickTime")}}</li> + <li>{{anch("WebM")}}</li> +</ul> +</div> + +<p>링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.</p> + +<h3 id="AV1">AV1</h3> + +<p>AV1의 <code>codecs</code> 문법은<a href="https://aomediacodec.github.io/av1-isobmff">AV1 Codec ISO Media File Format Binding</a> 스펙 문서의, 섹션 5: <a href="https://aomediacodec.github.io/av1-isobmff/#codecsparam">Codecs Parameter String</a>에 정의되어 있습니다.</p> + +<pre class="notranslate">av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]</pre> + +<p>아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..</p> + +<table class="standard-table"> + <caption>AV1 코덱 파라미터 문자열 요소</caption> + <thead> + <tr> + <th scope="col">요소</th> + <th scope="col">내용</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>P</code></td> + <td> + <p>한자리 숫자 프로파일 번호:</p> + + <table class="standard-table"> + <caption>AV1 프로파일 번호</caption> + <thead> + <tr> + <th scope="col">프로파일 번호</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>"Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10 비트 색 깊이 지원.</td> + </tr> + <tr> + <td>1</td> + <td>"High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원.</td> + </tr> + <tr> + <td>2</td> + <td>"Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색 깊이 추가 지원</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>LL</code></td> + <td>두자리 숫자 레벨 번호, X.Y 형태의 레벨 포맷으로 변환 됨, <code>X = 2 + (LL >> 2)</code>, <code>Y = LL & 3</code>. 자세한 내용은 AV1 스펙 문서의 <a href="https://aomediacodec.github.io/av1-spec/#levels">Appendix A, section 3</a> 참조.</td> + </tr> + <tr> + <td><code>T</code></td> + <td>한자리 문자 티어 표시. Main 티어라면 (<code>seq_tier</code> equals 0), 문자는 <code>M</code>. High 티어는 (<code>seq_tier</code> is 1) <code>H</code>. High 티어는 4.0 이상 레벨에서만 가능합니다.</td> + </tr> + <tr> + <td><code>DD</code></td> + <td>두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른 속성에서 지원 가능한 값이여야 합니다.</td> + </tr> + <tr> + <td><code>M</code></td> + <td>한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로 모노크롬 이미지를 가집니다. 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}}를 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0 (모노크롬 아님)입니다.</td> + </tr> + <tr> + <td><code>CCC</code></td> + <td> + <p><code>CCC</code> 는 세자리 숫자로 크로마 서브샘플링을 표기합니다. 첫번째 숫자는 <code>subsampling_x</code>, 두 번째 숫자는 <code>subsampling_y</code>. 둘다 1인경우, 세번째 값은 <code>chroma_sample_position</code>; 아닌 경우 세번째 값은 항상 0입니다. <code>M</code> 값과 더불어 크로마 서브샘플링 포맷을 구성하는 요소입니다:</p> + + <table class="standard-table"> + <caption>크로마 서브샘플링 결정 방식</caption> + <thead> + <tr> + <th scope="col">subsampling_x</th> + <th scope="col">subsampling_y</th> + <th scope="col">Monochrome flag</th> + <th scope="col">Chroma subsampling format</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + <td>YUV 4:4:4</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + <td>YUV 4:2:2</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + <td>YUV 4:2:0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + <td>YUV 4:0:0 (Monochrome)</td> + </tr> + </tbody> + </table> + + <p><code>CCC</code>의 세번째 값은 크로마 샘플 위치(chroma sample position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을 의미합니다.</p> + + <p>기본 값은 <code>110</code> (4:2:0 크로마 서브샘플링)입니다.</p> + </td> + </tr> + <tr> + <td><code>cp</code></td> + <td>두자리 숫자 <code>color_primaries</code> 값은 미디어의 색 공간을 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은 <code>09</code>입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1 스펙 문서의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">Color config semantics section</a> 를 참조하세요. 기본값은 <code>01</code> (ITU-R BT.709)입니다.</td> + </tr> + <tr> + <td><code>tc</code></td> + <td>두자리 숫자 <code>transfer_characteristics</code> 값. 이 값은 소스에서 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는 <code>14</code>입니다. 기본 값은 <code>01</code> (ITU-R BT.709)입니다.</td> + </tr> + <tr> + <td><code>mc</code></td> + <td>두자리 숫자 <code>matrix_coefficients</code> 상수는 RGB 컬러 채널을 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어 BT.709의 표준 계수 값은 <code>01</code>로 표현합니다. 기본 값은 <code>01</code> (ITU-R BT.709)입니다.</td> + </tr> + <tr> + <td><code>F</code></td> + <td>한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(<code>1</code>), 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(<strong>studio swing representation</strong>이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing representation 적용)입니다.</td> + </tr> + </tbody> +</table> + +<p><code>M</code> (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:</p> + +<dl> + <dt><code>av01.2.15M.10.0.100.09.16.09.0</code></dt> + <dd>AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.</dd> + <dt><code>av01.0.15M.10</code></dt> + <dd>AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.</dd> +</dl> + +<h3 id="ISO_Base_Media_File_Format_MP4_QuickTime_and_3GP"><a id="ISO-BMFF" name="ISO-BMFF">ISO Base Media File Format: MP4, QuickTime, and 3GP</a></h3> + +<p>모든 미디어 타입은 {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF)를 기반으로 하며 <code>codecs</code> 문법을 공유합니다. 이들 미디어 타입은 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> (또 사실상 MPEG-4를 기반으로 하고 있으므로 <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a>도 포함)과 <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>를 포함합니다. MIME 타입의 <code>codecs</code> 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:</p> + +<table class="standard-table"> + <caption>ISO BMFF codecs 파라미터를 지원하는 기본 MIME 타입</caption> + <thead> + <tr> + <th scope="col">MIME 타입</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/3gpp</code></td> + <td>3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td> + </tr> + <tr> + <td><code>video/3gpp</code></td> + <td>3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td> + </tr> + <tr> + <td><code>audio/3gp2</code></td> + <td>3GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td> + </tr> + <tr> + <td><code>video/3gp2</code></td> + <td>3GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td> + </tr> + <tr> + <td><code>audio/mp4</code></td> + <td>MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td> + </tr> + <tr> + <td><code>video/mp4</code></td> + <td>MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td> + </tr> + <tr> + <td><code>application/mp4</code></td> + <td>오디오/비디오가 아닌 MPEG-4 컨테이너 미디어</td> + </tr> + </tbody> +</table> + +<p><code>codecs</code> 파라미티에는 간단하게 컨테이너 명(<code>3gp</code>, <code>mp4</code>, <code>quicktime</code>, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(<code>.</code>)으로 구분된 요소를 다수 가질 수 있습니다.</p> + +<p><code>codecs</code> 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(<code>.</code>)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a>는 6자리 16진수로 구성되어 있습니다.</p> + +<p>따라서 지원하는 코덱 문법은 아래와 유사합니다:</p> + +<dl> + <dt><code>cccc[.pp]*</code> (Generic ISO BMFF)</dt> + <dd><code>cccc</code> 는 4 글자 코덱 ID이며 <code>pp</code>는 0~2자리 인코딩 된 문자입니다.</dd> + <dt><code>mp4a.oo[.A]</code> (MPEG-4 audio)</dt> + <dd><code>oo</code> 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 <code>A</code> 는 한자리 숫자<em>오디오</em> OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 <a href="http://mp4ra.org/#/object_types">Object Types page</a> 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 <code>mp4a.ad</code>로 기술합니다. 자세한 내용은 {{anch("MPEG-4 audio")}}를 참조하세요.</dd> + <dt><code>mp4v.oo[.V]</code> (MPEG-4 video)</dt> + <dd>마찬가지로 <code>oo</code> 는 미디어 콘텐츠를 명시하는 OTI 값이며, <code>V</code> 는 한자리 숫자 <em>비디오</em> OTI 값입니다.</dd> + <dt><code>avc1.oo[.PPCCLL]</code> (AVC video)</dt> + <dd> + <p><code>oo</code> 는 콘텐츠를 명시하는 OTI 값이며, while <code>PPCCLL</code> 는 6자리 16진수로써 프로파일 넘버 (<code>PP</code>), 제약 플래그 (<code>CC</code>), 레벨 (<code>LL</code>)을 의미합니다. <code>PP</code>로 가능한 값은 {{anch("AVC profiles")}}를 참조하세요.</p> + + <p>제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 <code>constraint_set0_flag</code>)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 <em>반드시</em> 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.</p> + + <p>레벨 값은 고정 소수점이므로 숫자 <code>14</code> (10진법 20) 은 레벨 2.0을 의미하며 <code>3D</code> (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.</p> + </dd> +</dl> + +<h4 id="AVC_프로파일">AVC 프로파일</h4> + +<p>아래의 AV 프로파일 넘버는 <code>codecs</code> 파라미터에서 사용하며 제약 요소 값은 <code>CC</code>로 사용할 수 있습니다.</p> + +<table class="standard-table"> + <caption><code>codecs</code> 파라미터에서 AVC 프로파일과 제약 요건을 명세하기 위한 값</caption> + <thead> + <tr> + <th scope="col">프로파일</th> + <th scope="col">넘버(Hex)</th> + <th scope="col">제약 (byte)</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Constrained Baseline Profile (CBP)</strong><br> + CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다.</td> + <td><code>42</code></td> + <td><code>40</code></td> + </tr> + <tr> + <td><strong>Baseline Profile (BP)</strong><br> + CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다. CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다.</td> + <td><code>42</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Extended Profile (XP)</strong><br> + 고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다.</td> + <td><code>58</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Main Profile (MP)</strong><br> + MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 <em>사용하지 않습니다</em>. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다.</td> + <td><code>4D</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>High Profile (HiP)</strong><br> + 현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다.</td> + <td><code>64</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Progressive High Profile (PHiP)</strong><br> + 필드 코딩 지원을 제거한 High Profile입니다.</td> + <td><code>64</code></td> + <td><code>08</code></td> + </tr> + <tr> + <td><strong>Constrained High Profile</strong><br> + 양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다.</td> + <td><code>64</code></td> + <td><code>0C</code></td> + </tr> + <tr> + <td><strong>High 10 Profile (Hi10P)</strong><br> + 10 비트 컬러 모드 지원을 제거한 High Profile입니다.</td> + <td><code>6E</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>High 4:2:2 Profile (Hi422P)</strong><br> + Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다.</td> + <td><code>7A</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>High 4:4:4 Predictive Profile (Hi444PP)</strong><br> + Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다.</td> + <td><code>F4</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>High 10 Intra Profile</strong><br> + all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다.</td> + <td><code>6E</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><strong>High 4:2:2 Intra Profile</strong><br> + all-intra-frame에 Hi422를 적용한 프로파일입니다.</td> + <td><code>7A</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><strong>High 4:4:4 Intra Profile</strong><br> + all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다.</td> + <td><code>F4</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><strong>CAVLC 4:4:4 Intra Profile</strong><br> + all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다.</td> + <td><code>44</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Scalable Baseline Profile</strong><br> + 화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, {{interwiki("wikipedia", "SVC")}} Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다.</td> + <td><code>53</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Scalable Constrained Baseline Profile</strong><br> + 실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만, <a href="https://github.com/w3c/webrtc-svc">SVC를 활성화</a>하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다.</td> + <td><code>53</code></td> + <td><code>04</code></td> + </tr> + <tr> + <td><strong>Scalable High Profile</strong><br> + 방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다.</td> + <td><code>56</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Scalable Constrained High Profile</strong><br> + 실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다.</td> + <td><code>56</code></td> + <td><code>04</code></td> + </tr> + <tr> + <td><strong>Scalable High Intra Profile</strong><br> + 비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다.</td> + <td><code>56</code></td> + <td><code>20</code></td> + </tr> + <tr> + <td><strong>Stereo High Profile</strong><br> + 양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다.</td> + <td><code>80</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Multiview High Profile</strong><br> + 시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 <em>지원하지 않습니다</em>.</td> + <td><code>76</code></td> + <td><code>00</code></td> + </tr> + <tr> + <td><strong>Multiview Depth High Profile</strong><br> + High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다.</td> + <td><code>8A</code></td> + <td><code>00</code></td> + </tr> + </tbody> +</table> + +<h4 id="MPEG-4_audio">MPEG-4 audio</h4> + +<p><code>codecs</code> 목록의 값 항목이 <code>mp4a</code>로 시작한다면, 문법은 아래와 같아야 합니다:</p> + +<pre class="notranslate">mp4a.oo[.A]</pre> + +<p><code>oo</code> 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 <a href="http://mp4ra.org/">MP4 Registration Authority</a>에서 규정하고 있으며 <a href="http://mp4ra.org/#/object_types">list of the possible OTI values</a>에서 가용한 값을 확인할 수 있습니다. 특수한 값인 <code>40</code>; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI <code>40</code> 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.</p> + +<p>Audio Object Type는 두자리 <em>10진수</em>로 이루어져 있습니다(<code>codecs</code> 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 <code>codecs</code> 표현 값은 <code>mp4a.40.2</code> 입니다.</p> + +<p>그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 <code>codecs</code> 값은 <code>mp4a.40.17</code> 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. <code>mp4a.40.02</code> 처럼요.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 <code>0</code> 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.</p> +</div> + +<p>Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.</p> + +<table class="standard-table"> + <caption>MPEG-4 audio object types</caption> + <thead> + <tr> + <th scope="col">ID</th> + <th scope="col">Audio Object Type</th> + <th scope="col">Profile support</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>0</code></td> + <td>NULL</td> + <td></td> + </tr> + <tr> + <td><code>1</code></td> + <td>AAC Main</td> + <td>Main</td> + </tr> + <tr> + <td><code>2</code></td> + <td>AAC LC (Low Complexity)</td> + <td>Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2</td> + </tr> + <tr> + <td><code>3</code></td> + <td>AAC SSR (Scalable Sampling Rate)</td> + <td>Main</td> + </tr> + <tr> + <td><code>4</code></td> + <td>AAC LTP (Long Term Prediction)</td> + <td>Main, Scalable, HQ</td> + </tr> + <tr> + <td><code>5</code></td> + <td>SBR (Spectral Band Replication)</td> + <td>HE-AAC, HE-AAC v2</td> + </tr> + <tr> + <td><code>6</code></td> + <td>AAC Scalable</td> + <td>Main, Scalable, HQ</td> + </tr> + <tr> + <td><code>7</code></td> + <td>TwinVQ (Coding for ultra-low bit rates)</td> + <td>Main, Scalable</td> + </tr> + <tr> + <td><code>8</code></td> + <td>CELP (Code-Excited Linear Prediction)</td> + <td>Main, Scalable, Speech, HQ, LD</td> + </tr> + <tr> + <td><code>9</code></td> + <td>HVXC (Harmonic Vector Excitation Coding)</td> + <td>Main, Scalable, Speech, LD</td> + </tr> + <tr> + <td><code>10</code> – <code>11</code></td> + <td><em>Reserved</em></td> + <td></td> + </tr> + <tr> + <td><code>12</code></td> + <td>TTSI (Text to Speech Interface)</td> + <td>Main, Scalable, Speech, Synthetic, LD</td> + </tr> + <tr> + <td><code>13</code></td> + <td>Main Synthetic</td> + <td>Main, Synthetic</td> + </tr> + <tr> + <td><code>14</code></td> + <td>Wavetable Synthesis</td> + <td></td> + </tr> + <tr> + <td><code>15</code></td> + <td>General MIDI</td> + <td></td> + </tr> + <tr> + <td><code>16</code></td> + <td>Algorithmic Synthesis and Audio Effects</td> + <td></td> + </tr> + <tr> + <td><code>17</code></td> + <td>ER AAC LC (Error Resilient AAC Low-Complexity)</td> + <td>HQ, Mobile Internetworking</td> + </tr> + <tr> + <td><code>18</code></td> + <td><em>Reserved</em></td> + <td></td> + </tr> + <tr> + <td><code>19</code></td> + <td>ER AAC LTP (Error Resilient AAC Long Term Prediction)</td> + <td>HQ</td> + </tr> + <tr> + <td><code>20</code></td> + <td>ER AAC Scalable (Error Resilient AAC Scalable)</td> + <td>Mobile Internetworking</td> + </tr> + <tr> + <td><code>21</code></td> + <td>ER TwinVQ (Error Resilient TwinVQ)</td> + <td>Mobile Internetworking</td> + </tr> + <tr> + <td><code>22</code></td> + <td>ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)</td> + <td>Mobile Internetworking</td> + </tr> + <tr> + <td><code>23</code></td> + <td>ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation)</td> + <td>LD, Mobile Internetworking</td> + </tr> + <tr> + <td><code>24</code></td> + <td>ER CELP (Error Resilient Code-Excited Linear Prediction)</td> + <td>HQ, LD</td> + </tr> + <tr> + <td><code>25</code></td> + <td>ER HVXC (Error Resilient Harmonic Vector Excitation Coding)</td> + <td>LD</td> + </tr> + <tr> + <td><code>26</code></td> + <td>ER HILN (Error Resilient Harmonic and Individual Line plus Noise)</td> + <td></td> + </tr> + <tr> + <td><code>27</code></td> + <td>ER Parametric (Error Resilient Parametric)</td> + <td></td> + </tr> + <tr> + <td><code>28</code></td> + <td>SSC (Sinusoidal Coding)</td> + <td></td> + </tr> + <tr> + <td><code>29</code></td> + <td>PS (Parametric Stereo)</td> + <td>HE-AAC v2</td> + </tr> + <tr> + <td><code>30</code></td> + <td>MPEG Surround</td> + <td></td> + </tr> + <tr> + <td><code>31</code></td> + <td><em>Escape</em></td> + <td></td> + </tr> + <tr> + <td><code>32</code></td> + <td>MPEG-1 Layer-1</td> + <td></td> + </tr> + <tr> + <td><code>33</code></td> + <td>MPEG-1 Layer-2 (MP2)</td> + <td></td> + </tr> + <tr> + <td><code>34</code></td> + <td>MPEG-1 Layer-3 (MP3)</td> + <td></td> + </tr> + <tr> + <td><code>35</code></td> + <td>DST (Direct Stream Transfer)</td> + <td></td> + </tr> + <tr> + <td><code>36</code></td> + <td>ALS (Audio Lossless)</td> + <td></td> + </tr> + <tr> + <td><code>37</code></td> + <td>SLS (Scalable Lossless)</td> + <td></td> + </tr> + <tr> + <td><code>38</code></td> + <td>SLS Non-core (Scalable Lossless Non-core)</td> + <td></td> + </tr> + <tr> + <td><code>39</code></td> + <td>ER AAC ELD (Error Resilient AAC Enhanced Low Delay)</td> + <td></td> + </tr> + <tr> + <td><code>40</code></td> + <td>SMR Simple (Symbolic Music Representation Simple)</td> + <td></td> + </tr> + <tr> + <td><code>41</code></td> + <td>SMR Main (Symbolic Music Representation Main)</td> + <td></td> + </tr> + <tr> + <td><code>42</code></td> + <td><em>Reserved</em></td> + <td></td> + </tr> + <tr> + <td><code>43</code></td> + <td>SAOC (Spatial Audio Object Coding)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td> + <td></td> + </tr> + <tr> + <td><code>44</code></td> + <td>LD MPEG Surround (Low Delay MPEG Surround)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td> + <td></td> + </tr> + <tr> + <td><code>45</code> and up</td> + <td><em>Reserved</em></td> + <td></td> + </tr> + </tbody> +</table> + +<p><a name="audio-object-types-foot-1">[1]</a> SAOC and LD MPEG Surround are defined in <a href="https://www.iso.org/standard/54838.html">ISO/IEC 14496-3:2009/Amd.2:2010(E)</a>.</p> + +<h3 id="WebM">WebM</h3> + +<p>WebM <code>codecs</code> 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:</p> + +<table class="standard-table"> + <caption>WebM MIME <code>codecs</code> 파라미터 예시</caption> + <thead> + <tr> + <th scope="col">MIME 타입</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>video/webm;codecs="vp8"</code></td> + <td>VP8 코덱 WebM 비디오; 오디오 미정의.</td> + </tr> + <tr> + <td><code>video/webm;codecs="vp9"</code></td> + <td>VP9 코덱 WebM 비디오.</td> + </tr> + <tr> + <td><code>audio/webm;codecs="vorbis"</code></td> + <td>Vorbis 오디오 WebM 파일.</td> + </tr> + <tr> + <td><code>audio/webm;codecs="opus"</code></td> + <td>Opus 오디오 WebM 파일.</td> + </tr> + <tr> + <td><code>video/webm;codecs="vp8,vorbis"</code></td> + <td>VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일.</td> + </tr> + <tr> + <td><code>video/webm;codecs="vp9,opus"</code></td> + <td>A WebM container with VP9 video and Opus audio.</td> + </tr> + </tbody> +</table> + +<p><code>vp8.0</code>, <code>vp9.0</code> 문자열도 가능하지만, 비추천합니다.</p> + +<h4 id="ISO_Base_Media_File_Format_문법">ISO Base Media File Format 문법</h4> + +<p><code>codecs</code> 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 <a href="#ISO-BMFF">ISO Base Media File Format</a> 에 정의된 문법에 따라 <em>비디오</em> 콘텐츠를 기술하기 시작했습니다. 본 문법은 <a href="https://www.webmproject.org/vp9/mp4">VP Codec ISO Media File Format Binding</a>의, <a href="https://www.webmproject.org/vp9/mp4/#codecs-parameter-string">Codecs Parameter String</a> 섹션에 정의되어 있습니다. 오디오 코덱은 <code>vorbis</code> 또는 <code>opus</code>로 표시되어 있습니다.</p> + +<p><code>codecs</code> 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(<code>.</code>)으로 구분된 2자리 숫자가 반복됩니다.</p> + +<pre class="notranslate">cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]</pre> + +<p>처음부터 5개 요소는 필수이며; <code>cp</code> (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.</p> + +<table class="standard-table"> + <caption>WebM codecs parameter components</caption> + <thead> + <tr> + <th scope="col">Component</th> + <th scope="col">Details</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cccc</code></td> + <td> + <p>4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와 같습니다:</p> + + <table class="standard-table"> + <caption>Web-M 지원 코덱 4자리 코드</caption> + <thead> + <tr> + <th scope="col">Four-character code</th> + <th scope="col">Codec</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>vp08</code></td> + <td>VP8</td> + </tr> + <tr> + <td><code>vp09</code></td> + <td>VP9</td> + </tr> + <tr> + <td><code>vp10</code></td> + <td>VP10</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>PP</code></td> + <td> + <p>2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을 추가합니다.</p> + + <table class="standard-table"> + <caption>WebM 프로파일 숫자</caption> + <thead> + <tr> + <th scope="col">프로파일</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00</code></td> + <td>크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상 컴포넌트 당 8비트만 허용.</td> + </tr> + <tr> + <td><code>01</code></td> + <td>크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용.</td> + </tr> + <tr> + <td><code>02</code></td> + <td>크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트 허용.</td> + </tr> + <tr> + <td><code>03</code></td> + <td>크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>LL</code></td> + <td>두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨 3은 <code>30</code> 레벨 6.1은 <code>61</code>.</td> + </tr> + <tr> + <td><code>DD</code></td> + <td>휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10, 12입니다.</td> + </tr> + <tr> + <td><code>CC</code></td> + <td> + <p>크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래 표에 있습니다; 자세한 내용은 {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} 를 참조하세요.</p> + + <table class="standard-table"> + <caption>WebM 크로마 서브샘플링 구분자</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">크로마 서브샘플링 포맷</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00</code></td> + <td>4:2:0 with the chroma samples sited interstitially between the pixels</td> + </tr> + <tr> + <td><code>01</code></td> + <td>4:2:0 chroma subsampling with the samples colocated with luma (0, 0)</td> + </tr> + <tr> + <td><code>02</code></td> + <td>4:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)</td> + </tr> + <tr> + <td><code>03</code></td> + <td>4:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)</td> + </tr> + <tr> + <td><code>04</code></td> + <td><em>Reserved</em></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>cp</code></td> + <td> + <p><a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본 요소와 이후 요소는 전부 비필수값입니다.</p> + + <p>Color primaries 요소에 가능한 값은 아래와 같습니다.:</p> + + <table class="standard-table"> + <caption>ISO/IEC Color primary identifiers</caption> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Details</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00</code></td> + <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td> + </tr> + <tr> + <td><code>01</code></td> + <td>고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지 리갈 레인지를 표현합니다.</td> + </tr> + <tr> + <td><code>02</code></td> + <td>알 수 없거나 application에서 활용하기 위해 사용합니다.</td> + </tr> + <tr> + <td><code>03</code></td> + <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td> + </tr> + <tr> + <td><code>04</code></td> + <td>BT.470 System M, NTSC (미국 내 표준 화질 TV 표준)</td> + </tr> + <tr> + <td><code>05</code></td> + <td>BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM</td> + </tr> + <tr> + <td><code>06</code></td> + <td>BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. <em><code>7</code>과 동일함.</em></td> + </tr> + <tr> + <td><code>70</code></td> + <td>{{Glossary("SMPTE")}} 240M (historical). <em>Functionally identical to <code>6</code>과 동일함.</em></td> + </tr> + <tr> + <td><code>08</code></td> + <td>일반 필름</td> + </tr> + <tr> + <td><code>09</code></td> + <td>BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.</td> + </tr> + <tr> + <td><code>10</code></td> + <td>SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). DCDM을 위한 비압축 형식.</td> + </tr> + <tr> + <td><code>11</code></td> + <td>SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와 환경 조건에 대해 기술.</td> + </tr> + <tr> + <td><code>12</code></td> + <td>SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.</td> + </tr> + <tr> + <td><code>13</code> – <code>21</code></td> + <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td> + </tr> + <tr> + <td><code>22</code></td> + <td>EBU Tech 3213-E</td> + </tr> + <tr> + <td><code>23</code> – <code>255</code></td> + <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>tc</code></td> + <td>비디오의 <code>transferCharacteristics</code> 값을 2자리 숫자로 표현. This value is from Section 8.2 of <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때 transfer characteristics 을 정의합니다.</td> + </tr> + <tr> + <td><code>mc</code></td> + <td><code>matrixCoefficients</code> 속성 값을 2자리 숫자로 표현 <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게 사용되는지 같은 섹션에서 확인할 수 있습니다.</td> + </tr> + <tr> + <td><code>FF</code></td> + <td>색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이 <code>00</code> 인 경우 강제로 제한하며, <code>01</code> 인 경우 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로 가능한 풀 레인지 값을 허용합니다.</td> + </tr> + </tbody> +</table> + +<h4 id="WebM_media_type_예시">WebM media type 예시</h4> + +<dl> + <dt><code>video/webm;codecs="vp08.00.41.08,vorbis"</code></dt> + <dd>VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.</dd> + <dt><code>video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"</code></dt> + <dd>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 포맷.</dd> +</dl> + +<h2 id="codecs_파라미터_사용하기">codecs 파라미터 사용하기</h2> + +<p><code>codecs</code> 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 {{HTMLElement("audio")}} , {{HTMLElement("video")}} 엘레먼트 생성 시 {{HTMLElement("source")}} 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..</p> + +<p>{{domxref("MediaSource.isTypeSupported()")}} 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> + <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Guide to video codecs used on the web</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li> +</ul> 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 +--- +<p><span class="seoSummary">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.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="References">References</h2> + +<h3 id="HTML">HTML</h3> + +<p>These articles cover HTML features for media developers.</p> + +<dl> + <dt>{{HTMLElement("audio")}}</dt> + <dd>The <code><audio></code> 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.</dd> + <dt>{{HTMLElement("video")}}</dt> + <dd>The <code><video></code> 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. <code><video></code> 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.</dd> + <dt>{{HTMLElement("track")}}</dt> + <dd>The HTML <code><track></code> element can be placed within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to provide a reference to a <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format subtitle or caption track to be used when playing the media. Accessible from JavaScript as {{domxref("HTMLTrackElement")}} objects.</dd> + <dt>{{HTMLElement("source")}}</dt> + <dd>The HTML <code><source></code> 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.</dd> +</dl> + +<h3 id="APIs">APIs</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></dt> + <dd>The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt> + <dd>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 <code><audio></code> element, a media stream, or to disk.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>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.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Media/Overview">Overview of media technology on the web</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Accessibility">Accessibility guide for media in web design</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></dt> + <dd>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.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Other_topics">Other topics</h2> + +<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt> + <dd>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 <code><canvas></code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/API/WebVR_API">WebVR</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/API/WebXR_API">WebXR</a></dt> + <dd>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.</dd> +</dl> +</div> +</div> |