HLS 및 DASH 적응 형 스트리밍을 사용하여 웹 사이트에 HTML5 비디오 플레이어를 삽입하는 방법

Adobe의 Flash Player는 오랫동안 인터넷의 기본 비디오 플레이어로 사용되었습니다. 오랫동안 군림했지만 더 빠르고 효율적이며 파일 관리가 더 쉬운 프로토콜로 대체되고 있습니다. Google 크롬도 Flash를 차단하기 시작했으며 곧 Adobe Flash에 대한 지원이 완전히 종료됩니다. 이 레거시 프로토콜을 완전히 대체하는 데 시간이 좀 걸릴 수 있지만 확실히 이점이 있습니다. 일부 최신 브라우저는 HLS (HTTP Live Streaming)를 기본적으로 지원합니다.



HTML5 및 HLS는 오픈 소스 프로토콜이므로 누구나 코드를 수정하고 웹 사이트에서 사용할 수 있으며 비용이 전혀 들지 않습니다. HLS 비디오 스트리밍을 사용하면 비디오를 다양한 재생 품질 표준으로 인코딩하고, 자막을 포함하고, 대역폭에 따라 비디오 품질을 최적화 할 수 있습니다. HTML 네이티브로 인해 태그, HTML5 스트리밍이 코드에 포함되어 HLS 및 DASH를 통해 쉽게 스트리밍 할 수 있습니다. DASH 및 HLS는 비디오 스트림을 HTML5 비디오 플레이어에 사용할 수있는 작은 세그먼트로 나눕니다. 동영상이 재생되기 전에 버퍼링해야하는 시간과 스트림을 볼 때 발생할 수있는 끊김 문제를 줄여줍니다. 이점은 시청자에게만 국한되지 않고 콘텐츠 제공자에게도 적용됩니다.

JWPlayer를 사용하여 웹 사이트에 HTML5 비디오 플레이어 삽입

시작하기 전에 JWPlayer를 여기 . 적응 형 스트리밍 목적으로 사용되는 HLS 및 DASH의 등장으로 사용자에게 공정한 혜택을 제공하는 많은 비디오 플레이어가 등장했습니다. 시간이 지남에 따라 도전을 견디고 ESPN 및 Sony Pictures와 같은 사람들이 사용하는 플레이어 중 하나가 JWPlayer입니다. 콘텐츠를 업로드하고 HTML5, iOS, Android 및 Fire OS에 비디오 플레이어를 삽입하는 작업은 더 나은 사용자 경험을 위해 사용자가 조정할 수있는 JWPlayer의 기본 코드를 사용하여 쉽게 수행됩니다. 그러나 오늘 우리는 HTML5 비디오 플레이어와 더 나은 적응 형 스트리밍을 위해 HLS 및 DASH를 사용할 수있는 방법에 중점을 둡니다.



JW Player는 무엇을 제공합니까?

동영상을 업로드하고 재생 목록으로 만들 수있는 플랫폼을 제공하는 것 외에도 JWPlayer를 사용하면 광고 일정 및 맞춤 보고서에 대한 보고서를 제공하여 업로드 된 동영상의 실시간 통계를 볼 수 있습니다.



맞춤형 보고서



JWPlayer는 캡션, 썸네일, 메타 데이터 등을 쉽게 관리 할 수 ​​있도록하여 CMS 기반 웹 사이트의 콘텐츠 관리를 쉽게 만듭니다. 따라서 JWPlayer의 사용 및 이점은 단순히 HTML5 비디오를 포함하는 비디오 플레이어를 넘어 확장됩니다.

JWPlayer에 동영상 업로드

동영상 업로드

HTML5 웹 사이트에 JWPlayer 삽입을 시작하기 전에 먼저 해당 비디오를 JWPlayer 플랫폼에 업로드하는 것이 중요합니다. 고맙게도 업로드 할 파일을 선택하기 만하면되므로 매우 복잡한 작업은 아닙니다.



동영상이 업로드되면 해당 동영상의 메타 데이터 섹션 편집을 시작하고 분석을보고 트래픽 등을 모니터링하거나 HLS에 대한 소스를 얻고 자산 탭에서 자막을 업로드 할 수 있습니다.

HLS 및 DASH 비디오 플레이어 사용자 지정

비디오 플레이어를 삽입하기 전에 먼저 사이트에 플레이어 라이브러리를 추가해야합니다. 이 업적을 달성 할 수있는 세 가지 방법이 있습니다. API 호출로 자체 호스팅, 클라우드 호스팅 및 클라우드 호스팅됩니다. 클라우드 호스팅과 API 호출을 통한 클라우드 호스팅의 차이점은 단순히 API 호출을 기반으로합니다. API 호출을 통해 비디오 플레이어의 구현을 관리하려는 개발자는 이것을 사용하는 것이 좋습니다. 자체 호스트의 경우 플레이어 버전은 사용자가 완전히 제어합니다. 플레이어의 라이센스는 자동으로 회전되지 않으며 셀프 호스트를 사용할 때 수동으로 수행해야합니다.

클라우드 호스팅 플레이어 사용자 지정

여기에서 볼 수 있듯이 클라우드 호스팅 플레이어는 원하는대로 사용자 지정하고 다듬을 수 있습니다. 예를 들어 플레이어는 반응 형 크기 또는 고정 크기를 가질 수 있습니다. 재생은 루프, 시작시 음소거 등으로 설정할 수 있습니다. 또한 플레이어의 기본 색상, 비디오 권장 사항 등을 변경할 수도 있습니다.

이 모든 작업을 마치면 클라우드 호스팅 플레이어 라이브러리 코드를 웹 페이지의 JWPlayer가 웹 사이트에로드 될 수 있도록 태그를 지정합니다.

비디오 플레이어 삽입

기본적으로 JWPlayer는 자동으로 HTML5 미디어 엔진을 선호하므로 기본 환경 설정에 대해 걱정할 필요가 없습니다. 그러나 일부 경우에는이를 변경해야 할 수도 있습니다. 이 경우 플레이어를 사용자 지정하고 원하는대로 설정할 수 있습니다.

웹 페이지의 태그에 클라우드 호스팅 플레이어 라이브러리를 업로드 한 후 다음 단계는 포함 된 코드를 업로드하는 것입니다. 먼저 태그에 JWPlayer가 나타나야하는 곳. 을 부르다 설정() 재생 목록 속성을 사용하여 타겟팅 된 .

아래는 샘플의 예입니다. 설정() JWPlayer 개발자 자신이 제공하는 코드 :

jwplayer ( 'myElement'). setup ({ 'playlist': 'https://example.com/myVideo.mp4