앞으로 몇 달에 걸쳐 새로운 플레이어를 사용자 지정하는 방법, 보안, 트랜스코딩과 같은 주제를 다룰 기술 중심 시리즈 기사의 첫 번째 기사에 오신 것을 환영합니다. 브라이트코브가 새로운 제품을 출시할 때마다 잠재 고객, 클라이언트, 파트너로부터 비슷한 맥락의 질문이 제기되기 때문에 이러한 주제에 대해 이야기하고 싶었습니다. 예를 들어, 브라이트코브의 플래시 기반 스마트플레이어에 투자한 고객들은 어디서부터 시작해야 하는지, 새로운 플레이어가 제공하는 사용자 지정 범위는 어느 정도인지 알고 싶어했습니다.
브라이트코브 플레이어는 가능한 한 HTML5를 사용하는 최신 버전의 비디오 플레이어입니다. 브라이트코브가 후원하는 오픈 소스프로젝트인 Video.js로 시작되었다는 사실에 관심을 가질 수 있습니다. 지금은 계속 개선되고 있으며, 개발자가 방문자를 위한 고유한 비디오 경험을 제작하는 데 드는 상당한 시간 투자 문제를 해결해주고 있습니다. 이 기술을 활용하는 방법에 대한 몇 가지 예를 살펴보겠습니다.
간편한 HTML5 동영상 플레이어 커스터마이징
사용자 지정은 보통 사람들에게 우려를 불러일으키는 단어입니다. 걱정하지 마세요. 플레이어는 HTML5로 제작되었기 때문에 사용자 정의 및 확장성이 뛰어납니다. 웹 자산에 맞게 비디오 플레이어 스킨의 색상을 변경하고, 메트릭을 수집하는 동시에 이를 분석 플랫폼(브라이트코브 애널리틱스 제외)으로 전송하고 페이지 내 상호 작용을 허용하고 싶다면 이 모든 것을 할 수 있습니다. 약간의 JS 및 CSS 지식만 있으면 동영상 플레이어를 원하는 대로 손쉽게 커스터마이징할 수 있습니다.
동영상 플레이어 스킨을 사용자 정의하는 것은 간단하며 대부분 CSS를 기반으로 합니다. 플레이어 버튼 변경, 재생 영역 축소, 재생 버튼 위치 변경 등 다양한 작업을 수행할 수 있습니다. 스튜디오의 플레이어 모듈을 사용하면 재생 영역의 색상을 변경하는 등 간단한 커스터마이징이 가능합니다. 보다 정교한 변경을 원하면 페이지 수준에서 플레이어의 CSS를 재정의하거나 플레이어에 CSS 파일을 추가하세요.
비디오 플레이어 스킨 사용자 지정의 예
비디오 플레이어 플러그인으로 상호 작용 구축
플레이어의 가장 강력한 측면은 플레이어 상호작용을 유도하는 플러그인과 온페이지 JS/CSS입니다. 이러한 동영상 플레이어 API를 사용하면 이벤트를 수신한 다음 조치를 취하거나 프로그래밍할 수 있습니다. 다운로드 버튼을 추가하는 것처럼 간단할 수도 있고, 구글 애널리틱스나 옴니트리에 지표를 전송하는 것처럼 복잡할 수도 있습니다.
리소스: 빠른 플러그인 개발 시작하기
페이지가 아닌 플러그인에 인터랙션을 빌드하는 한 가지 이유는 플러그인이 동영상 플레이어 코드 내에 존재할 수 있기 때문입니다. 플레이어 빌드 프로세스의 일부로 플러그인의 JS 코드가 수집되어 플레이어의 JS 파일에 볼트로 고정되므로 각 플레이어 요청에 대해 하나의 파일만 전송하면 됩니다. 실제로 저는 플러그인을 만들 때 비디오 플레이어가 포함된 페이지에서 호출되는 JS 파일에 기능을 빌드하는 것으로 시작합니다. 이렇게 하면 플러그인 코드를 검토하고 개발자 콘솔을 보면서 플러그인 코드를 조정할 수 있습니다. 원하는 기능을 원하는 지점까지 플러그인이 완성되면 코드를 플러그인으로 패키징하여 플레이어에 첨부합니다.
동영상 플레이어에 관련 링크를 코딩하면 모든 관련 콘텐츠를 한데 모을 수 있습니다.
브라이트코브 플레이어에는 Video.js 플레이어의 핵심이 포함되어 있으므로, 브라이트코브 플레이어와 함께 사용할 수 있는 기존의 방대한 플러그인 라이브러리가 있습니다. 참고: VideoJS 라이브러리의 모든 플러그인이 브라이트코브 플레이어에서 테스트된 것은 아니므로 있는 그대로 제공됩니다.
플레이어용 CSS 및/또는 JS 파일을 호스팅할 공간이 필요한 경우, 이러한 파일을 git과 유사한 저장소에 저장할 수 있는 기능도 제공합니다. 리포지토리는 전송 시스템 API를 사용하여 각 계정에 대해 생성할 수 있습니다. 저장소를 생성하고 파일을 저장소에 푸시하면 플레이어가 플러그인 섹션에서 해당 파일을 참조할 수 있습니다.
비디오 플레이어 사용자 지정의 예
플레이어로 무엇을 할 수 있을지 영감을 얻고 싶으신가요? 브라이트코브 영업 엔지니어가 큐레이션한 플레이어 라운지에서 플레이어 커스터마이징의 훌륭한 예시를 확인할 수 있으며, 단계별 지침이 포함된 방법 문서도 공유되어 있습니다. 브라이트코브 플레이어 설명서의 코드 샘플 섹션을 살펴보고 빠르게 시작하세요. 이 글이 브라이트코브 플레이어에 대한 호기심을 자극하고 플레이어의 기능을 확장하는 것이 얼마나 쉬운지 알게 되셨기를 바랍니다. 다음 시간에는 트랜스코딩에 대해 다뤄보겠습니다.
