지원 고객 지원 문의 | 시스템 상태 시스템 상태
페이지 내용

    비디오 축소판 격자

    이 샘플에서는 Playback API를 사용하여 ID별로 동영상 그룹을 검색하고, 그리드에 표시하고, 사용자가 썸네일을 클릭 할 때 플레이어에서 비디오를 시작하는 방법 (즉, 간단한 비디오 포털을 구축하는 방법) 을 배웁니다.

    개요

    브라이트코브 갤러리는비디오 포털을 구축하기 위한 강력한 시스템을 제공하지만 간단한 DIY 포털을 구축할 수도 있습니다. 사용자가 비디오를 선택하기 전에 웹 페이지에 플레이어를 로드하지 않으려면 이 샘플에 표시된 대로 비디오 축소판 격자를 표시할 수 있습니다. 썸네일을 선택하면 선택한 비디오가 포함된 페이지에 브라이트코브 플레이어가 로드됩니다.

    필요한 것

    이 포털을 구축하는 데 필요한 모든 것은 다음과 같습니다.

    • 비디오 클라우드 계정
    • 재생 API에 대한 요청을 인증하기 위한 검색 사용 정책 키
    • 일부 웹 개발 기술 (HTML, CSS, 자바 스크립트)

    설계 고려 사항

    비디오 데이터 가져오기

    CMS API또는 재생 API를 사용하여 비디오 데이터를 가져올 수 있지만 재생 API는 다음과 같은 몇 가지 이유로 분명한 선택입니다.

    • 응답 데이터가 캐시되기 때문에 (최대 20분 동안) 훨씬 빠릅니다.
    • 비디오를 재생하는 데 필요한 모든 데이터를 반환하지만 에서는 비디오 메타데이터와 비디오 소스를 가져오려면 두 개의 별도 요청이CMS API필요합니다.
    • CORS가 지원되므로 서버 측 프록시 앱을 통해 API 요청을 라우팅 할 필요가 없습니다.

    그러나 재생 API는 비디오 데이터를 가져오는 두 가지 방법을 제공합니다. id (또는 참조 ID) 로 비디오를 가져 오는 기본 방법이 있으며 ID 배열을 쉽게 반복하여 각 ID를 요청할 수 있습니다. 그러나 그다지 효율적이지는 않습니다.

    더 나은 옵션은 비디오 검색 방법을 사용하는 것입니다. 이 방법을 사용하면 ID로 모든 비디오를 찾아 하나의 요청으로 반환 할 수 있습니다. 요청에 대한 검색 매개 변수는 다음과 같습니다.

    q=id:6543217890%20id:1234567890%20id:987654321...

    %20검색 문자열의 은 URI로 인코딩된 공간입니다. 검색 구문에 대한 자세한 내용은CMS/재생 API를 참조하십시오. 동영상 검색 .

    더 플레이어

    플레이어에게는 특별한 요구 사항이 없습니다. 기본 브라이트코브 플레이어가 정상적으로 작동합니다.

    일부 사용자는 비디오를 전혀 보지 않을 수 있으므로 필요할 때까지 대역폭을 사용하여 플레이어를로드하지 않아도됩니다. 브라이트코브 플레이어 로더를사용하여 비디오를 재생하도록 처음 선택할 때 동적으로 플레이어를 로드합니다. 성능을 극대화하기 위해 브라이트코브 플레이어 JavaScript도 미리 로드하지만 플레이어 로더가 아직 존재하지 않을 경우 자동으로 이 작업을 수행합니다.

    정책 키 가져오기

    정책 키는 모든 브라이트코브 플레이어에 대해 자동으로 생성됩니다. 그러나 보안상의 이유로 표준 정책 키는 Playback API를 사용하여 비디오를 검색할 수 없습니다. 이 샘플에서는 검색 가능 키가 필요합니다. Policy API를사용하여 만들 수 있지만 가장 쉬운 방법은브라이트코브 학습 샘플 앱을사용하고 검색 가능 키를 가져오는 옵션을 선택하는 것입니다.

    샘플 앱

    이 앱의 코드

    GitHub 저장소에서이응용 프로그램의 코드를 찾을 수 있습니다.

    코드펜

    펜보기비디오 그리드 샘플게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

    코드펜 사용

    위의 CodePen을 효과적으로 사용하기위한 몇 가지 팁은 다음과 같습니다.

    • 결과버튼을 클릭하여 플레이어의 실제 표시를 토글합니다.
    • HTML/CSS/JS버튼을 클릭하여 코드 유형 중 하나를 표시합니다.
    • 오른쪽 상단모서리에있는 CodePen에서 편집을클릭하여이 CodePen을 자신의 계정으로 포크하십시오.
    • GitHub 저장소에서이샘플과 관련된 모든 코드를 찾으십시오.