브라이트코브 플레이어 샘플: 재생 API 페이징

제한 사항

플레이어 예제

이 예제에서는 브라이트코브 플레이어를 사용하여 재생목록의 처음 3개 비디오와 함께 플레이어에 비디오를 표시합니다. 선택다음 동영상버튼을 눌러 재생 목록의 다음 3 개 동영상을 표시합니다. 재생 목록의 마지막 동영상 세트에 도달하면 표시되는 동영상이 재생 목록의 시작 부분을 둘러 쌉니다.

펜보기 18171- 재생 API 페이징게시자 : Brightcove Learning Services ( 쫑끼리 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

재생 API

이 예에서는 Playback API를 사용하여 지정된 재생 목록에서 동영상을 반환합니다. 재생 목록의 동영상을 페이지로 이동하기 위해이 예에서는 다음 요청 URL 매개 변수를 사용합니다.

• limit -Playback API에서 반환 할 동영상 수를 정의합니다.
• offset -Playback API의 재생 목록에서 건너 뛸 동영상 수를 설정합니다.

사용된 API/플러그인 리소스

플레이어/HTML 구성

이 섹션에서는 플레이어 생성 시 필요한 특수 구성에 대해 자세히 설명합니다. 또한 페이지 내장 플레이어 구현 코드 이외에 페이지에 추가해야 하는 다른 HTML 요소에 대해서도 설명합니다.

플레이어 구성

• Video Cloud Studio에서플레이어모듈 다음설정부분. 선택편집하다버튼을 누르고 다음을 수행하십시오.
  • 설정재생 목록 표시옵션활성화 됨 .
  • 크기 조정옵션을반응형으로설정합니다.
  • 웹 페이지에 맞게 플레이어 크기를 설정합니다.

기타 HTML

추가하다다음 동영상버튼을 눌러 재생 목록의 다음 3 개 동영상 세트를 가져옵니다.

선택사항: 컨테이너를 추가하여 현재 재생 API 요청 URL을 표시합니다.

응용 프로그램 흐름

이 응용 프로그램의 기본 논리는 다음과 같습니다.

• 첫 번째 동영상 세트를로드합니다.
• 다음 비디오 듣기 단추
• 요청 URL을 만듭니다.
• 다음 비디오 데이터 세트를 가져옵니다.
• 현재 재생 목록을 플레이어에로드합니다.

첫 번째 동영상 세트로드

라벨이 붙은 코드를 찾으십시오:

    // +++ Load first set of videos +++

사용catalog지정된 재생 목록 ID에 대한 재생 목록 개체를 가져옵니다. 이 첫 번째 동영상 세트를 플레이어에로드합니다.

다음 비디오 듣기 단추

라벨이 붙은 코드를 찾으십시오:

    // +++ Listen for Next Videos button +++

재생 목록의 다음 동영상 세트를로드하려면 이벤트 리스너를 추가하세요.

요청 URL 생성

라벨이 붙은 코드를 찾으십시오:

    // +++ Create request URL +++

다음을 사용하여 Playback API 요청 URL을 만듭니다. limit과offset매개 변수.

비디오 데이터 가져 오기

라벨이 붙은 코드를 찾으십시오:

    // +++ Get video data +++

재생 API를 호출하여 재생 목록의 다음 동영상 세트를 가져옵니다.

비디오 데이터로드

라벨이 붙은 코드를 찾으십시오:

    // +++ Load video data +++

재생 API를 호출하여 재생 목록의 다음 동영상 세트를 가져옵니다. 플레이어에 첫 번째 비디오를로드합니다. 배열의 비디오를 플레이어의 재생 목록에로드합니다.

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      ...
      });

    videojs.registerPlugin('pluginName', function(options) {
      var myPlayer = this;
      ...
      });