이 도움말에서는 미디어 스트리밍의 고급 개념을 알아보고 끝날 때쯤에는 다양한 스트리밍 사용 사례, 프로토콜, 확장 프로그램을 잘 이해하게 됩니다. 먼저 스트리밍이 실제로 무엇인지 설명해 보겠습니다.
미디어 스트리밍은 미디어 콘텐츠를 조금씩 전송하고 재생하는 방법입니다. 플레이어는 네트워크에 최적화되지 않으면 느려질 수 있는 단일 파일을 로드하는 대신 타겟 미디어가 개별 데이터 청크로 분할되는 방식을 설명하는 매니페스트 파일을 읽습니다. 미디어 청크는 나중에 런타임 시 동적으로 다시 연결됩니다. 아마도 나중에 알아볼 다른 비트 전송률로 연결될 것입니다.
웹사이트에서 스트리밍을 제공하려면 서버가 범위 HTTP 요청 헤더를 지원해야 합니다. Accept-Ranges
머리글에 대한 자세한 내용은 <video> 및 <source> 태그 도움말을 참고하세요.
스트리밍 사용 사례
미디어 청크와 스트림을 설명하는 필수 매니페스트를 생성하는 것은 간단하지는 않지만 스트리밍을 사용하면 <video>
요소를 정적 소스 파일 세트로 가리키는 것만으로는 달성할 수 없는 흥미로운 사용 사례를 활용할 수 있습니다. 웹페이지에 미디어를 추가하는 방법은 다음 섹션에서 자세히 알아봅니다. 먼저 <video>
요소에 여러 파일을 로드하는 것 이상을 수행하려면 멀티미디어 스트리밍의 몇 가지 사용 사례를 알아야 합니다.
- 가변 품질 스트리밍은 미디어 청크가 여러 비트 전송률로 인코딩되고 클라이언트의 현재 사용 가능한 대역폭에 맞는 최고 품질의 미디어 청크가 미디어 플레이어로 반환되는 것입니다.
- 라이브 방송은 미디어 청크가 인코딩되어 실시간으로 제공되는 곳입니다.
- 미디어 삽입은 플레이어가 미디어 소스를 변경하지 않아도 광고와 같은 다른 미디어가 스트림에 삽입되는 것을 말합니다.
스트리밍 프로토콜
웹에서 가장 흔히 사용되는 두 가지 스트리밍 프로토콜은 HTTP 동적 적응형 스트리밍 (DASH)과 HTTP 라이브 스트리밍 (HLS)입니다. 이러한 프로토콜을 지원하는 플레이어는 생성된 매니페스트 파일을 가져와 요청할 미디어 청크를 파악한 후 최종 미디어 환경으로 결합합니다.
<video>
을 사용하여 스트림 재생
많은 브라우저에서 스트림을 기본적으로 재생하지 않습니다. HLS 재생에 대한 일부 네이티브 지원이 있지만 브라우저는 일반적으로 네이티브 DASH 스트림 재생을 지원하지 않습니다. 즉, <video>
요소의 <source>
를 매니페스트 파일로 가리키는 것만으로는 충분하지 않은 경우가 많습니다.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
단점으로 보일 수 있는 것이 실제로는 숨겨진 강점일 수 있습니다. 스트림은 강력하며 스트림을 사용하는 애플리케이션의 요구사항은 다릅니다.
매니페스트 파일은 일반적으로 단일 미디어의 여러 변형을 설명합니다. 다양한 비트 전송률, 여러 오디오 트랙, 심지어 서로 다른 형식으로 인코딩된 동일한 미디어를 생각해 보세요.
일부 애플리케이션은 버퍼에 더 많은 양의 동영상을 보관하고 싶을 수 있고, 다른 애플리케이션은 예정된 에피소드의 동영상 처음 몇 초를 미리 가져오고 싶을 수 있으며, 또 다른 애플리케이션은 적응형 스트리밍을 위한 자체 로직을 구현하고 싶을 수 있습니다. 재생을 위한 미디어 스트림을 생성하는 일종의 내장 브라우저 기능이 있으면 좋겠지만, 그런 기능이 있습니다.
미디어 소스 확장 프로그램
다행히 W3C에서는 JavaScript가 미디어 스트림을 생성할 수 있는 미디어 소스 확장 프로그램 (MSE)을 정의했습니다. 간단히 말해 MSE를 사용하면 개발자가 MediaSource
객체를 <video>
요소에 연결하고 MediaSource
인스턴스에 연결된 버퍼로 펌핑되는 모든 미디어 데이터를 재생할 수 있습니다.
기본 예시
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
위의 단순화된 예는 다음 몇 가지 사항을 보여줍니다.
<video>
의 관점에서는 URL에서 미디어 데이터를 수신하는 것입니다.- 생성된 URL은
MediaSource
인스턴스의 포인터일 뿐입니다. MediaSource
인스턴스는 하나 이상의SourceBuffer
인스턴스를 만듭니다.- 그런 다음
fetch
를 사용하여 바이너리 미디어 데이터를 버퍼에 추가합니다.
이러한 기본 개념은 간단하며 DASH 및 HLS 호환 동영상 플레이어를 처음부터 작성하는 것도 가능하지만 대부분의 경우 이미 존재하는 성숙한 오픈소스 솔루션(예: Shaka Player, JW Player, Video.js 등) 중 하나를 선택합니다.
하지만 간단한 <video>
요소만 사용하여 오프라인 미디어 재생을 제공하는 자체 기본 스트리밍 미디어 웹사이트를 개발하는 방법을 보여주는 Kino라는 데모 미디어 PWA를 만들었습니다. 로드맵에는 프레임워크와 디지털 권리 관리를 비롯한 다양한 기능을 지원할 계획이 있습니다. 그러니 때때로 업데이트를 확인하거나 기능을 요청해 주세요.
오프라인 스트리밍이 가능한 PWA 도움말에서 자세히 알아보세요.
미디어 청크 형식
오랫동안 DASH와 HLS는 미디어 청크를 서로 다른 형식으로 인코딩해야 했습니다. 그러나 2016년에 DASH에서도 지원하는 형식인 HLS에 표준 단편화된 MP4 (fMP4) 파일 지원이 추가되었습니다.
fMP4
컨테이너와 H.264
코덱을 사용하는 동영상 청크는 두 프로토콜에서 모두 지원되며 대부분의 플레이어에서 재생할 수 있습니다. 이를 통해 콘텐츠 제작자는 동영상을 한 번만 인코딩할 수 있으므로 시간과 디스크 공간을 절약할 수 있습니다.
더 나은 품질과 더 작은 파일 크기를 얻으려면 VP9
와 같이 더 효율적인 형식을 사용하여 여러 미디어 청크 세트를 인코딩하는 것이 좋습니다. 하지만 그 전에 먼저 웹용 미디어 파일을 준비하는 방법을 알아야 합니다. 다음은 이 내용입니다.