여러분도 알고 있는 사실이지만 Flash Player가 공식적으로 중단되면서 HTML5 플레이어는 새로운 산업표준이 되었습니다. 따라서 비오 스트리밍 옵션을 고려할 때가 되었습니다. 이 블로그에서는 HTML5 플레이어의 동작 방식을 요약하고 라이브 및 VOD(주문형 비디오) 콘텐츠를 스트리밍할 때 꼭 필요한 플레이어중 베스트 플레이어 여섯 가지를 소개합니다.
HTML5플레이어는 어떻게 동작하나요?
HTML5는 MSE(Media Source Extension)를 도입했을 때 <video> 및 <audio>요소의 기능을 강화하여 추가 플러그인을 사용하지 않고도 웹페이지 또는 애플리케이션에서 직접 콘텐츠를 스트리밍할 수 있도록 했습니다.
JavaScript 라이브러리를 기반으로 구축된 새로운 사양을 통해 비디오 및 오디오 청크를 사용하여 스트리밍을 생성하고 적응형 비트레이트 스트리밍(Adaptive Bitrate Streaming) 및 EME(Encrypted Media Extension) 보호된 콘텐츠 재생과 같은 기본 HTML위에 구축할 추가 기능을 위한 토대를 마련했습니다.
HTML5플레이어는 모든 최신 브라우저에서 지원되며 거의 모든 장치에서 재생할 수 있도록 비디오 콘텐츠를 포함하는 가장 간단한 방법입니다.
2021년에는 여러 HTML5플레이어를 사용할 수 있지만 오픈소스와 유료 및 상업용 옵션중에서 선택해야만 합니다. 둘 사이의 주요 차이점은 오픈 소스 플레이어는 무료로 다운로드하고 사용자 정의를 할 수 있는 반면 유료 상용 옵션은 이미 내장된 중요한 기능과 통합을 제공한다는 것입니다. 고려해야 할 또 다른 차이점은 오픈 소스 플레이어가 빠른 속도를 제공하는 경향이 있습니다. 개발자 커뮤니티의 지속적인 기여로 인한 버그 수정과 유료 플레이어는 잠재적 버그에 대해 회사에 문의해야만 합니다. 즉 상용 옵션은 광범위한 기능 및 통합 목록을 제공하여 개발시간을 절약할 수 있으므로 예산 및 개발 요구사항에 따라 선택할 수 있습니다.
오픈소스를 선택하든 상업용을 선택하든 두 HTML5 플레이어 유형 모두 와우자에서 지원되며 동일한 기본 아키텍쳐를 제공합니다.
1. HTML5 < 비디오> 또는 <오디오> 요소
2. 원하는 높이와 너비 치수 (Dimension)
3. 정의된 미디어 소스 URL
4. 사용자 정의 가능한 콘트롤
HTML5 비디오 플레이어는 HTML에 매우 쉽게 포함할 수 있습니다. 동영상 파일의 재생을 테스트하려는 경우 아래 샘플코드는 HTML5 웹페이지에 삽입할 내용입니다.
와우자 스트리밍 엔진 또는 와우자 스트리밍 클라우드에서 테스트 스트리밍을 구성하고 소스로 제공되는 HLS재생 URL을 복사하기만 하면 됩니다. 그런 다음 해당 재생 URL을 코드에 소스 (src)로 붙여 넣을 수 있습니다.
<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="http://[wowza-ip-address]:1935/live/[myStream]/playlist.m3u8"></video>
</body>
</html>
Flash가 사라진 후에도 와우자와 같은 미디어 서버는 여전히 RTMP소스를 인제스트하고 HTMP5플레이어에서 HLS를 통해 전달하기 위해 다시 패키징할 수 있습니다. Adobe Flash가 죽었다는 것이 공식적이지만 RTMP 스트리밍도 마찬가지라는 의미는 아닙니다.
이제 HTMP5 비디오 플레이어의 동작 방식을 이해했으므로 2021년 주요 6가지 비디오 플레이어를 살펴보겠습니다.
이 리스트는 오픈소스 및 유료 옵션이 모두 포함되어 있으며 특정 순서없이 표시됩니다.
톱6 HTML5 비디오 플레이어
1. Video.js
오픈소스 플레이어인 Video.js는 기본 자바 스크립트와 CSS를 사용하지만 쉽게 사용자 정의를 할 수 있으며 현재 40,000개 이상의 웹사이트에서 사용되고 있습니다. HLS와 MPEG-DASH를 통한 ABR(Adaptive Bitrate Streaming)과 함께 MP4 및 WebM파일뿐만 아니라 라이브 스트리밍에 대한 재생지원을 제공합니다.
Video.js는 또한 플레이어에서 바로 Google Analytics를 추적할 수 있는 인기있는 플러그인을 제공합니다.
주요 특징
① Vimeo 및 유투브 통합
② 고급기능을 위한 100개 이상의 플러그인 제공
③ HLS, MPEG-DASH, MP4 및 WebM
④ 분석, 광고, 브랜드로고 삽입
⑤ 재생목록, Chromecast, ABR
2. THEOPlayer
THEOPlayer는 광범위한 비디오 에코 시스템에서 사전 통합을 제공하는 상업용 HTML5 기반 비디오 플레이어입니다. 웹, 모바일웹, 모바일, 셋톱박스, 캐스팅 장치 및 스마트TV는 거의 모두 THEOPlayer에서 지원되며 시청률에 대한 인상적인 도달 범위를 지원합니다. 가장 인기있는 기능중 하나는 apple의 Low Latency HLS스트리밍을 제공하는 SDK로 이를 지원하는 최초의 공급업체중 하나입니다.
주요 특징
① HLS, Low Latency HLS
② MPEG-DASH, DASH용 Low Latency CMAF
③ DRM 및 암호화
④ Monetization 및 광고
⑤ 분석 및 ABR
3. Flowplayer (와우자 미디어 시스템 인수)
Flowplayer는 사용 가능한 가장 빠른 로딩 HTML5 플레이어중 하나로 업계 명성을 얻고 있습니다. 이 Flowplayer는 무료 평가판 및 다양한 지원옵션을 제공하는유료가 있으며 기본적으로 한 달에 $25(Standard)부터 유료가 제공됩니다. Flowplayer를 통한 몇 가지 흥미로운 통합은 실시간 분석, 헤더비딩, 구독 및 페이퍼뷰 솔루션으로 이를 통한 다양한 수익 창출 기회를 가질 수 있습니다.
주요 특징
① 수 많은 수상 경험이 있는 수익창출옵션
② 실시간 분석 및 진단
③ HLS, MPEG-DASH, MP4 및 WebM
④ 고급광고 스케줄링
⑤ 재생목록 및 Chromecast, ABR
4. hls.js
Java Script 라이브러리에 구축된 hls.js는 HLS 클라이언트를 구현하여 HTML5 <video>요소 위에서 직접 동작합니다. hls.js의 두 가지 주요 기능에는 HLS및 fragmented MP4(fMP4)에 대한 지원과 MPEG-2 및 AAC/MP3 스트리밍을 fragmented MP4로 변환(또는 재패키징)하는 기능이 포함됩니다. 광범위한 API 라이브러리를 제공하여 버퍼크기, 세그럼트 길이 및 비트 전송률과 같은 매개변수를 미세 조정할 수 있습니다. hls.js는 HLS를 스트리밍하는 기능은 최신 브라우저에서 거의 보편적이지만 HTML5에서 MSE(Media Source Extension)지원이 필요합니다.
주요 특징
① fragmented MP4 지원
② ABR로 VOD 및 라이브 재생목록
③ VOD 및 라이브 재생목록을 위한 대체 오디오
④ 자막, 캡션, 분석, 시간 지정 메타데이터
⑤ 오류/빌트인 재시도 매카니즘에 대한 복원력
5. Clappr
GitHub의 커뮤니티에서 만든 최초의 오픈 소스 HTML5 플레어어중 하나로 알려진 Clappr는 .js를 기반으로 하며 HTML5의 기본<video>요소도 사용합니다. Clappr플레이어는 CSS에서 고도로 사용자 정의를 할 수 있으며 사용자 친화적이라는 찬사를 받고 있고 API라이브러리에 쉽게 액세스할 수 있습니다. 스마트폰, 태블릿, 데스크톱 및 TV에서 원활한 비디오 콘텐츠 전달을 기대할 수 있습니다. Clappr 사용자는 커스터 마이징을 위한 전문 플러그인 목록에 깊은 인상을 받을 것입니다.
주요 특징
① HLS 및 DASH재생
② PIP지원
③ 360° 비디오 지원
④ 재생 상태용 플러그인
⑤ DVR, 구글분석 및 자막
6. dash.js
dash.js 플레이어는 MSE(Media Source Extension)를 지원하는 모든 브라우저에서 MPEG-DASH 재생을 제공하며 Javascript를 기반으로 합니다. DASH가 적응형 비트레이트 스트리밍 (Adaptive Bitrate Streaming)프로토콜일 경우 dash.js플레이어는 최고의 적응형 스트리밍 알고리즘중 하나를 제공합니다. DASH Industry Forum의 공식 레퍼런스 플레이어이므로 프로덕션 환경에서 높은 품질과 안정성을 기대할 수 있습니다. 코덱과 브라우저에 구애받지 않고 브라우저간 DRM을 지원합니다. 마지막으로 dash.js는 새로운 Low Latency DASH프로토콜을 지원합니다.
주요 특징
① 고품질 MPEG-DASH 재생
② Low Latency DASH 지원
③ 고급 ABR 알고리즘 제공
④ 크로스 브라우저 DRM l및 캡션
⑤ 라이브 재생 캐치업
결론
확실히 2021년에 선택할 수 있는 HTML5플레이어가 많이 있지만 적합한 플레이어를 식별하는 열쇠는 자신의 비디오 서비스에 위해 비디오 재생 요구사항을 충족하는 플레이어를 찾는 것입니다.
Comments