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

    비디오 섬네일 그리드

    이 샘플에서는이 예제를 사용하는 방법을 Playback API ID별로 비디오 그룹을 검색하고 그리드로 표시 한 다음 비디오를 player 사용자가 미리보기 이미지를 클릭하면 즉, 간단한 비디오 포털을 구축합니다.

    개요

    동안 Brightcove Gallery 비디오 포털 구축을위한 강력한 시스템을 제공하며 간단한 자체 포털을 구축 할 수도 있습니다. 당신이로드하지 않으려면 player 사용자가 비디오를 선택하기 전에 웹 페이지에서이 샘플과 같이 비디오 축소판 표를 표시 할 수 있습니다. 썸네일을 선택하면 Brightcove Player 선택한 비디오가 페이지에로드됩니다.

    필요한 것

    이 포털을 구축하기 위해 필요한 것은 다음과 같습니다.

    • A Video Cloud 계정
    • 요청을 인증하기위한 검색 가능 정책 키 Playback API
    • 일부 웹 개발 기술 (HTML, CSS 및 JavaScript)

    디자인 고려 사항

    비디오 데이터 얻기

    비록 CMS API 또는 Playback API 비디오 데이터를 가져 오는 데 사용할 수 있습니다. Playback API 몇 가지 이유로 여기에서 확실한 선택입니다.

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

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

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

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

    그리고, %20 이 검색 문자열에서 URI로 인코딩 된 공간이 있습니다. 검색 구문에 대한 자세한 내용은 CMS /Playback API: 비디오 검색.

    그리고, player

    특별한 요구 사항은 없습니다 player -기본 Brightcove Player 잘 작동합니다.

    일부 사용자는 비디오를 전혀 보지 못할 수 있으므로 대역폭을 사용하여 player 필요할 때까지 우리는 Brightcove Player 짐을 싣는 사람 로드 player 동영상을 처음 재생할 때 동적으로 선택합니다. 성능을 극대화하기 위해 Brightcove Player 자바 스크립트이지만 player 로더가없는 경우이를 자동으로 수행합니다.

    정책 키 얻기

    모든 정책 키가 자동으로 생성됩니다 Brightcove Player에스. 그러나 보안상의 이유로 표준 정책 키를 사용하여 비디오를 검색 할 수는 없습니다. Playback API. 이 샘플에서는 검색 가능 키가 필요합니다. 당신은 하나를 사용하여 하나를 만들 수 있습니다 Policy API가장 쉬운 방법은 Brightcove 학습 샘플 앱 검색 가능 키를 얻는 옵션을 확인하십시오.

    샘플 앱

    이 앱의 코드

    이 앱의 코드는 이 GitHub 저장소.

    코데 핀

    펜보기 비디오 그리드 샘플 Brightcove 학습 서비스 제공 (@rcrooks1969) 의 위에 코드 펜.

    CodePen 사용

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

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

    31 년 2020 월 XNUMX 일에 마지막으로 업데이트 된 페이지