브라이트코브 플레이어 샘플: 인기 동영상 오버레이

제한 사항

플레이어 예제

플레이어는 아래 CodePen에 내장되어 있습니다. 오버레이는 비디오를 일시 중지하거나 비디오가 종료될 때 나타납니다. API 응답과 함께 지난 24시간 동안 가장 많이 본 동영상 6개를Analytics API얻으려는 에 대한 요청이 표시됩니다.

펜보기인기 동영상 오버레이 / 최종 화면게시자 : Brightcove Learning Services ( 쫑끼리 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

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

플레이어/HTML 구성

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

플레이어 구성

이 샘플은 반응 형 플레이어를 사용하지만 고정 플레이어 용 소스 코드도 사용할 수 있습니다.

기타 HTML

추가하는 것을 잊지 마십시오id속성video플레이어 소스 코드의 태그.

		<video-js id="myPlayerID"
			...

응용 프로그램 흐름

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

• 페이지 DOM 요소를 가져옵니다.
• Analytics API에 대한 요청을 설정합니다.
• 프록시 코드를 호출하여 Analytics API에 요청합니다.
• 오버레이 콘텐츠를 포맷합니다.
• 인기있는 비디오를로드하고 재생합니다.

페이지 DOM 요소 가져 오기

페이지의 DOM 요소에 대한 참조를 가져옵니다. 우리는 이것들을 사용하여Analytics API요청 및 응답. 또한 프록시 URL 및Analytics API기본 URL.

Analytics API에 대한 요청 설정

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

		// +++ Setup API request +++

이 샘플은 어제 동영상 조회수가 가장 많은 6 개의 동영상을 반환합니다.

Analytics API에 요청하기

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

		// +++ Make a request to the Analytics API +++

프록시 코드를 사용하여 HTTP GET 요청을Analytics API RESTful 웹 서비스. 반환 된 데이터를 JSON 형식으로 구문 분석합니다. 오류가 발생하면 오류 메시지를 표시합니다.

오버레이 컨텐츠 서식 지정

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

		// +++ Format the overlay content +++

오버레이 내용의 서식을 지정하려면 다음을 수행합니다.

1. Analytics API의 응답에서 동영상 ID를 추출합니다.
2. 사용플레이어 카탈로그 Analytics API에서 반환 된 각 동영상 ID에 대한 동영상 개체를 가져옵니다.
3. 오버레이 용 HTML을 생성합니다.
4. 새로 생성 된 관련 비디오 콘텐츠로 오버레이 플러그인을 초기화하십시오. 오버레이가 표시되면 인기있는 비디오 썸네일 그리드가 표시됩니다. 비디오 재생이 일시 중지되거나 종료되었을 때 오버레이를 표시합니다. 기본 비디오가 재생 중일 때 오버레이를 숨깁니다.

인기 비디오로드 및 재생

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

		// +++ Load and play popular video +++

사용자가 선택한 인기 동영상을로드하고 재생을 시작하는 함수를 만듭니다.

응용 프로그램 스타일 지정

CSS는 오버레이에서 동영상 미리보기 이미지의 스타일을 지정합니다.

플러그인 코드

일반적으로 JavaScript를 브라이트코브 플레이어 플러그인으로 변환할 때 명목상의 변경이 필요합니다. 필요한 변경 사항 중 하나는ready()메소드의 표준 사용을 플러그인을 정의하는 코드로 대체하는 것입니다.

다음은 플레이어와 함께 작동하는 자바 스크립트 코드에 매우 일반적으로 사용되는 시작이다:

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

첫 번째 줄을 변경하여 표준 구문을 사용하여 브라이트코브 플레이어 플러그인을 시작합니다.

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

앞서 언급했듯이이 문서의 해당 GitHub 저장소에서 플러그인의 JavaScript 코드를 볼 수 있습니다. popular-videos-overlay.js .

플레이어와 플러그인 사용하기

플러그인의 CSS 및 JavaScript 파일이 인터넷 액세스 가능 위치에 저장되어 있으면 플레이어와 함께 플러그인을 사용할 수 있습니다. Studio의 플레이어 모듈에서플레이어를선택한 다음Plugins섹션에서 CSS 및 JavaScript 파일에 URL을 추가하고 옵션이 필요한 경우이름및옵션을추가 할 수 있습니다.