브라이트코브 플레이어 샘플: 비디오가 시작될 때 페이지에서 다른 플레이어 중지

이 항목에서는 비디오 재생이 플레이어 중 하나에서 시작될 때 페이지에서 다른 모든 Brightcove 플레이어를 일시 중지하는 방법을 알아 봅니다. 문서에 설명 된 기능을 사용하려면 Brightcove Player 버전 5.0.3 이상이 필요합니다.

플레이어 예제

동영상 중 하나를 재생하기 시작합니다. 그런 다음 다른 플레이어에서 비디오를 재생하고 재생 중인 다른 플레이어에서 비디오 재생이 중지되는지 확인합니다.

펜보기동영상이 시작될 때 18179- 다른 플레이어-페이지-중지게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

코드펜 사용

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

Result버튼을 클릭하여 플레이어의 실제 표시를 토글합니다.
HTML/CSS/JS버튼을 클릭하여 코드 유형 중 하나를 표시합니다.
이 문서의 뒷부분에서 응용 프로그램에 사용되는 논리, 흐름 및 스타일링에 대해서는Player/HTML 구성 , 응용 프로그램 흐름 및 응용 프로그램스타일 지정섹션에서 설명합니다. 이러한 섹션의 정보와 함께 따르는 가장 좋은 방법은 다음과 같습니다.
1. CodePen에서EDIT ON CODEPEN버튼을 클릭하고 하나의 브라우저/브라우저 탭에서 코드를 사용할 수 있습니다.
2. CodePen에서 표시할 코드를 조정합니다. CodePen 내에서 다른 코드 섹션의 너비를 변경할 수 있습니다.
3. 다른 브라우저/브라우저 탭에서플레이어/HTML 구성 , 응용 프로그램 흐름 및/또는 응용 프로그램 스타일 지정섹션을 봅니다. 이제 코드 설명을 따라 동시에 코드를 볼 수 있습니다.

개발 순서

일반적으로 샘플의 경우이 섹션에서는 한 페이지에서 Brightcove Player 플러그인 사용으로 이동하는 개발 방법을 제안합니다. 이 경우 코드는 페이지의 모든 플레이어에서 동시에 작동하며 한 플레이어에게 플러그인으로 할당 할 수 없으므로 플러그인 코드가 표시되지 않습니다.

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

API 메소드	API 이벤트
플레이 ()	플레이
일시 중지 ()

플레이어/HTML 구성

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

플레이어 구성

Brightcove Player에는 특별한 구성이 필요하지 않지만 HTML 내부 페이지에는 세 가지 고유 한 플레이어가 있습니다. <div>레이아웃 제어를위한 태그.

기타 HTML

다른 HTML 요소는 페이지에 추가되지 않습니다.

응용 프로그램 흐름

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

페이지에 몇 명의 플레이어가 있는지 확인합니다.
플레이어를 반복하여 Brightcove 플레이어로 초기화하고play각각의 이벤트 리스너.
매번play이벤트가 처리되면 플레이어를 반복하고 이벤트를 전달한 플레이어의 이름이없는 모든 플레이어를 일시 중지합니다.

플레이어에 대한 루프를 만들고 각 플레이어에 이벤트 핸들러를 할당합니다.

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

// ### Determine the available player IDs ###

한 페이지에 여러 플레이어가있는 경우 개체 이름에 저장됩니다. videojs.players플레이어의 이름 인 키로. JavaScript를 사용합니다. Object.keys()실제 플레이어 개체가 아닌 루프를 위해 원하는 플레이어의 이름을 추출하는 메서드입니다. 루프에서 이벤트 핸들러를 할당 한 다음 플레이어를 배열로 푸시합니다.

처리`play`이벤트 및 다른 플레이어 재생 중지