HTML5 미디어 소스 확장: 프로덕션 비디오를 웹으로 가져오기

지난 10년 동안 Flash 및 Silverlight와 같은 플러그인은 브라우저에서 풍부한 비디오 소비를 가능하게 하여 YouTube 및 Netflix와 같은 인기 있는 서비스를 지원했습니다. 그러나 이 접근 방식은 지난 몇 년 동안 HTML5로 이동했습니다.

거의 2년 전에 W3C는 특히 비디오용으로 새로운 HTML 요소 및 API 세트와 함께 제공되는 HTML5 사양의 최종 권장 사항을 발표했습니다. 그들 중 일부는 웹 페이지에서 더 많은 의미론을 목표로 하지만 새로운 기능을 도입하지 않습니다. 다른 것들은 Adobe Flash, Microsoft Silverlight 또는 Java와 같은 플러그인 없이도 웹의 가능성을 확장하고 개발자의 가능성을 향상시킵니다.

SmashingMag에 대한 추가 정보:

• 웹 기술로 네이티브 경험 제공
• HTML5 세부 정보 요소에 대한 완전한 폴리필 만들기
• 프로그레시브 웹 앱 초보자 가이드
• HTML5 로고: 어떻게 생각하세요?

예를 들어 Google은 Firefox와 마찬가지로 NPAPI(이러한 플러그인에서 사용하는 API)의 제거를 발표했고 Microsoft는 플러그인 없는 브라우징을 옹호하기 때문에 이것은 특히 중요합니다. 이러한 공급업체는 여전히 Flash 플레이어를 제공하지만 제공하지 않는 것은 시간 문제일 뿐입니다. 또한 모바일 장치의 브라우저는 대부분 플러그인을 지원하지 않고 Flash 플레이어가 없기 때문에 그 이상입니다.

새로운 HTML5 요소 중 일부와 동영상에서 개선된 점을 살펴보겠습니다.

• <canvas> 는 그래프, 게임 그래픽 등을 렌더링하는 스크립트를 제공합니다. 이를 Canvas JavaScript API라고도 합니다. canvas 요소는 WebGL과 함께 사용하여 그래픽 카드의 GPU를 사용하여 2D 및 3D 그래픽을 렌더링할 수도 있습니다.
• <video> 를 사용하면 즉시 사용할 수 있는 비디오 재생이 가능합니다. 정말 대단합니다. 이것은 마침내 웹에서 플러그인 없는 멀티미디어를 현실로 만듭니다. 실제로 브라우저 공급업체는 Opera Mini를 제외하고 최신 브라우저에서 보편적으로 지원되는 MPEG-4/H.264라는 단일 형식에 동의하는 것 같습니다.
• <audio> 를 사용하면 웹 페이지의 오디오 콘텐츠를 즉시 재생할 수 있습니다. 비디오와 마찬가지로 지원할 컨테이너 형식 및 코덱에 대한 결정은 브라우저 공급업체에 맡겨집니다.
• <track> 은 비디오의 자막 및 캡션과 같은 시간이 지정된 텍스트 트랙에 사용할 수 있습니다. WebVTT 파일은 기본적으로 지원됩니다.

대부분의 새로운 요소는 모든 최신 브라우저에서 구현되기 때문에 HTML5 비디오 플레이어 코드에 대해 알려지고 한동안 사용되었습니다. 사양이 안정적입니다. 그래도 W3C는 할 일이 많이 남아 있습니다.

저에게 W3C가 작업하고 있는 가장 중요한 표준은 현재 "Candidate Recommendation" 상태인 "Media Source Extensions"(MSE) 표준입니다. 이 JavaScript API를 사용하면 <video> , <audio> 및 기타 요소에 대한 미디어 스트림을 생성할 수 있으므로 순수한 HTML5 및 JavaScript에서 MPEG-DASH와 같은 적응형 스트리밍 표준이 가능합니다.

또 다른 흥미로운 것은 HTML5 및 JavaScript에서 보호된 콘텐츠를 재생할 수 있는 "암호화된 미디어 확장" 표준입니다. 그러나 이것은 현재 "작업 초안"이며 마무리하는 데 시간이 걸릴 것입니다.

우리는 새로운 표준을 환영하며 단일 구현으로 거의 모든 장치에서 멀티미디어를 볼 수 있는 Flash 플레이어나 플러그인이 필요하지 않은 시대를 고대하고 있습니다.

왜 MPEG-DASH인가?

MPEG-DASH 스트리밍 형식과 HTML5에서 사용되는 이유를 살펴보겠습니다. MPEG-DASH(DASH는 HTTP를 통한 동적 적응 스트리밍의 약자)는 MPEG 및 ISO(ISO/IEC 23009-1)에서 승인한 공급업체 독립적인 국제 표준입니다. Apple HLS, Microsoft Smooth Streaming 및 Adobe HDS와 같은 이전 적응형 스트리밍 기술은 공급업체에 독립적인 스트리밍 서버 또는 재생 클라이언트에 대한 지원이 제한된 공급업체에서 출시되었습니다. 벤더에 의존적인 상황은 분명히 바람직하지 않았고, 그래서 표준화 기구는 조화 프로세스를 시작했고, 그 결과 2012년 MPEG-DASH가 비준되었습니다.

간단히 말해서 MPEG-DASH의 목표와 이점은 다음과 같습니다.

• 비디오 재생 중 시작 지연과 버퍼링 및 지연을 줄입니다.
• 클라이언트의 대역폭 상황에 계속 적응하십시오.
• 클라이언트 기반 스트리밍 로직을 사용하여 최고의 확장성과 유연성을 제공합니다.
• 기존의 비용 효율적인 HTTP 기반 CDN, 프록시 및 캐시를 사용합니다.
• HTTP를 사용하여 NAT 및 방화벽을 효율적으로 우회합니다.
• 동일한 파일에서 여러 동시 DRM 체계의 신호, 전달 및 사용을 통해 공통 암호화를 활성화합니다.
• 단순 접합 및 (타겟팅된) 광고 삽입을 활성화합니다.
• "트릭 모드"를 효율적으로 지원합니다.
• 그리고 훨씬 더!

최근 몇 년 동안 MPEG-DASH는 HTML5의 video 및 audio 태그를 통해 DASH 재생을 가능하게 하는 HTML5 MSE와 웹 브라우저에서 DRM으로 보호된 재생을 가능하게 하는 HTML5 암호화 미디어 확장과 같은 새로운 표준화 노력에 통합되었습니다. . 또한 MPEG-DASH를 사용한 DRM 보호는 MPEG-CENC(공통 암호화용)를 사용하여 여러 시스템에서 조화를 이룹니다. 다양한 스마트 TV 플랫폼에서 MPEG-DASH 재생은 Hybrid Broadcast Broadband TV(HbbTV 1.5 및 HbbTV 2.0)와의 통합을 통해 가능합니다.

또한 MPEG-DASH 표준의 사용은 DASH 산업 포럼 및 DASH-AVC/264 권장 사항에 대한 업계의 노력과 DASH-HEVC/265 사용 권장 사항과 같은 미래 지향적인 이니셔티브에 의해 단순화되었습니다. MPEG-DASH 내의 H.265/HEVC.

오늘날 MPEG-DASH는 최근에 이 새로운 표준으로 전환한 Netflix 및 Google과 같은 서비스에 의해 가속화되어 점점 더 많이 배포되고 있습니다. 이 두 가지 주요 트래픽 소스를 통해 MPEG-DASH는 이미 전체 인터넷 트래픽의 50%를 차지합니다.

MSE는 어떻게 작동합니까?

이제 MSE의 세부 사항과 개발자가 사용할 수 있는 방법을 살펴보겠습니다. MSE는 JavaScript가 audio 및 video 태그에 대한 미디어 스트림을 동적으로 구성할 수 있도록 HTMLMediaElement 를 확장하는 사양입니다. 이전에는 이러한 태그가 전체 파일(예: MP4 파일)에만 액세스할 수 있었기 때문에 불가능했습니다. 이 접근 방식을 프로그레시브 스트리밍 또는 프로그레시브 다운로드라고도 하며, 미디어 파일이 다운로드되고 동시에 재생되어 의사 스트리밍이 가능하기 때문입니다.

그러나 이것은 검색 능력이 부족하고 비디오 및 오디오 품질을 사용자의 대역폭 상황에 적응시킬 가능성이 없습니다. audio 및 video 태그에 대한 입력으로 JavaScript에서 미디어 스트림을 구성함으로써 개발자는 이제 미디어 스트림을 사용자 컨텍스트에 동적으로 적용하여 스트리밍 경험을 개선할 수 있습니다.

언급한 바와 같이 MPEG-DASH는 MSE가 선택한 스트리밍 형식입니다. 따라서 HTML5 MSE 기반 비디오 플레이어를 구축하는 데 필요한 단계를 살펴보겠습니다.

1. MPEG-DASH에서 MPD라고 하는 매니페스트 파일을 다운로드하고 구문 분석합니다. 이 파일은 비디오 스트림의 품질 수준 및 해상도, 오디오 언어 및 자막, 미디어 세그먼트의 이름과 같은 비디오 스트림의 세부 정보를 설명합니다. HTTP 기반 원본 서버 또는 CDN에 있는 파일.
2. 클라이언트 장치에서 사용 가능한 대역폭을 추정하고 버퍼 없는 스트리밍을 달성하기 위해 적절한 비디오 품질을 선택하고 JavaScript에서 미디어 세그먼트를 다운로드합니다.
3. 다운로드한 미디어 세그먼트를 JavaScript의 MSE 버퍼에 넘겨줍니다.
4. 일반적으로 하드웨어에서 video 태그를 통해 비디오를 디코딩하고 렌더링합니다.

이것이 Netflix 및 YouTube에서 사용되는 HTML5 기반 적응형 스트리밍 플레이어가 작동하는 방식입니다. DASH-IF 오픈 소스 프로젝트 dash.js 및 Bitdash HTML5 플레이어와 같이 개발자와 콘텐츠 제공자가 HTML5에서 적응형 비트 전송률 스트리밍으로 쉽게 전환할 수 있는 매우 성숙한 솔루션이 이미 있습니다.

MPEG-DASH 콘텐츠 생성도 간단하며 x264 및 MP4Box와 같은 오픈 소스 도구와 Bitcodin과 같은 상용 인코딩 서비스에서 지원됩니다.

그러나 MSE의 사용은 MPEG-DASH에 국한되지 않습니다. 점점 더 많은 프로젝트(hls.js 포함)와 플레이어(Bitdash 포함)가 MSE를 사용하여 HTML5에서 Apple의 HLS 형식을 지원합니다. MPEG2-TS 컨테이너인 HLS 미디어 세그먼트를 HTML5 및 MPEG-DASH에서 요구하는 ISO 기본 미디어 파일 형식으로 트랜스멀티플렉싱하여 이를 수행합니다.

DRM용 암호화된 미디어 확장

현재 DRM 시장에서 주요 변화가 일어나고 있습니다. Silverlight와 같은 NPAPI 플러그인의 즉각적인 하락으로 인해 Chrome 및 Firefox에서 주요 DRM 시스템인 PlayReady가 중단되었습니다. 이로 인해 거의 모든 프리미엄 콘텐츠 제공업체는 기술을 전환하고 미래 지향적인 솔루션을 찾아야 하기 때문에 어려운 상황에 처하게 됩니다.

프리미엄 스트리밍 미디어 게시자 는 PC 및 Android 장치의 Chrome 및 Firefox에서 콘텐츠를 보호하기 위해 Microsoft의 PlayReady DRM에 의존할 수 없습니다. 콘텐츠 보호 및 스트리밍 플랫폼 전략을 재평가해야 하며 미래 지향적인 솔루션을 찾은 다음 곧 기술을 전환해야 합니다.

많은 콘텐츠 제공자들에게 MPEG-DASH는 선택 기술로 떠올랐습니다. DASH 프로젝트는 빠른 속도로 출시되었으며 Widevine DRM을 사용하는 MSE 및 EME(암호화된 미디어 확장)가 가장 실행 가능한 대안으로 보입니다. 또한 MPEG-CENC는 하나의 보호 콘텐츠 버전으로 별도의 DRM 시스템을 지원할 수 있으며 EME는 MPEG-DASH 기반 콘텐츠의 MSE를 기반으로 합니다.

따라서 한 콘텐츠 버전에 대해 Chrome 및 Android용 Widevine Modular, Internet Explorer 및 Edge용 Microsoft PlayReady, Firefox용 Adobe Primetime과 같은 다양한 DRM 시스템의 조합은 콘텐츠 제공자가 MPEG로 전환할 추가 인센티브를 제공합니다. -DASH는 스트리밍, DRM 및 CDN의 유연성을 감안할 때 국제 표준입니다.

MSE 및 EME에 대한 브라우저 지원

HTML5 및 특히 MSE의 브라우저 공급업체가 몇 년 동안 느리게 채택한 후 이제 대다수가 HTML5를 지원하는 것을 볼 수 있습니다. 이는 EME에도 적용되지만 이 경우 각 공급업체는 다른 DRM 시스템을 사용하고 생태계는 조금 더 차별화됩니다.

그러나 사용자의 99%에 도달하려면 MSE를 지원하지 않는 브라우저, 특히 이전 브라우저 버전과 iOS의 Safari도 지원하는 비디오 스트리밍 설정이 있어야 합니다. Bitdash 플레이어에서 볼 수 있듯이 MSE에서 사용하는 것과 동일한 MPEG-DASH 콘텐츠를 재생할 수 있는 Flash 기반 플레이어를 사용하여 구형 브라우저를 쉽게 제공할 수 있습니다. iOS 기기를 지원하려면 HLS라고 하는 Apple의 스트리밍 형식을 사용해야 합니다. MSE와 같은 개방형 표준은 Apple에서 지원하지 않지만 OS X의 Safari에서는 지원됩니다.

다음 매트릭스는 오늘날 브라우저와 플랫폼 전반에 걸친 MSE 및 EME 지원 상태에 대한 개요를 제공합니다(Bitmovin 제공).

HTML5 비디오의 미래

새로운 미디어 코덱이 시장에 출시되면서 비디오 압축의 효율성이 더욱 높아졌습니다. 이는 4K 및 UHD와 같은 고품질 형식과 모바일 장치로 스트리밍하는 데 특히 중요합니다. 가장 일반적인 코덱은 HEVC/h.265 이며, 이는 지금부터 몇 년 안에 기본 코덱이 될 수 있습니다(특허 상황이 엉망이 되지 않는다면). 또한 재생을 위해 브라우저에 내장된 MSE를 활용하고 MPEG-DASH를 스트리밍 형식으로 사용하여 이 개방형 표준의 유연성을 보여줍니다.

비디오 플레이어 개발자는 SourceBuffer를 생성할 때 코덱의 속성을 변경하는 것과 같은 몇 가지 간단한 조정만 수행하면 됩니다. 기본 브라우저가 HEVC 디코딩(대부분 하드웨어 디코더에 의해 수행됨)을 지원하는 경우 HTML5에서 HEVC MPEG-DASH 스트림을 볼 수 있습니다! HEVC를 지원하는 Microsoft Edge와 같은 브라우저에서 성공적으로 테스트했습니다. 또한 Google은 최근 Chromium 브라우저에 대한 지원을 발표했습니다.

그럼에도 불구하고 HEVC는 아직 대다수의 인터넷 비디오 자산에 사용할 수 없으며 소수의 장치만 이를 디코딩할 수 있습니다. 그리고 물론 이 코덱이 이 도시에 있는 유일한 코덱은 아닙니다. 공개 및 로열티 프리 비디오 인코딩 형식 VP9(VP8의 후속 제품)는 더 나은 인코딩 효율성을 목표로 하며 이미 Google Chrome 및 Microsoft Edge와 같은 인기 있는 브라우저에서 지원되며 이 코덱은 MSE와도 호환됩니다. 그러나 어떤 코덱이 일상적인 스트리밍 루틴에 포함될지 예측할 수 없습니다. 그러나 그것이 VP8/9, AVC 또는 HEVC이든, MSE와 MPEG-DASH는 준비되어 있습니다!

다가오는 트렌드는 360도 비디오로, HTML5에서 사용하기 매우 쉽습니다. 개발자는 MSE의 적응형 스트리밍 지원을 활용하고 그 위에 JavaScript 또는 WebGL 렌더링 레이어를 추가하여 360도 경험을 할 수 있습니다. 최근에 HTML5, JavaScript, DASH 및 WebGL을 사용하여 가상 현실을 위한 Netflix와 같은 서비스를 구축하는 방법과 이 주제에 대해 이야기했습니다.

결론

이 기사가 웹상의 비디오 상태와 미래에 대한 좋은 개요를 제공했기를 바랍니다. MSE 및 EME는 Flash 및 Silverlight와 같은 플러그인을 대체하는 웹 비디오에 대한 개방형 표준 에코시스템을 향한 큰 단계입니다. 또한 HTML5는 데스크톱, 모바일 및 스마트 TV 환경을 포함하는 오늘날의 다중 플랫폼 세계에서 선택되는 플랫폼에 사용되고 있습니다.

MPEG-DASH와 같은 스트리밍 표준과 함께 콘텐츠 제공업체는 플랫폼과 장치 전반에 걸쳐 통합된 비디오 솔루션을 가질 수 있습니다. 버퍼링을 방지하고 로딩 시간을 줄이며 각 사용자의 대역폭과 장치 상황에 최상의 품질을 제공하는 적응형 스트리밍 형식을 통해 사용자 경험을 향상시킬 수 있습니다.