플레이어 이벤트

개요

Brightcove Player에는 비디오 재생을 제어 할 수있는 많은 이벤트가 있습니다. 이 항목에서는 다양한 유형의 이벤트에 대한 개요를 제공합니다.

Brightcove Player 이벤트의 전체 목록은플레이어 메소드 / 이벤트 API참조 문서. 이 문서는 플레이어를 구성하는 실제 코드의 일부인 이벤트를 반영합니다.

미디어 이벤트

그만큼 HTML 생활 표준문서는 웹 애플리케이션에 필요한 HTML 및 API 개발에 대한 정보를 제공하는 훌륭한 리소스입니다. 이 문서는 웹 진화에 관심이있는 사람들의 증가하는 커뮤니티 인 WHATWG (Web Hypertext Application Technology Working Group)에서 최신 상태로 유지하는 "살아있는"문서입니다.

Brightcove Player는 HTML 프레임 워크 위에서 실행되며 다음을 트리거합니다. 미디어 이벤트 .

이 문서의 이벤트와 관련된 몇 가지 용어는 다음과 같습니다.

막힌

MediaController는 재생이 완료된 경우 차단 된 것으로 간주됩니다. 일시 중지 . 미디어 요소는 컨트롤러가차단 된 미디어 컨트롤러 .

MediaController

ㅏ MediaController여러 미디어 요소의 재생을 조정하는 개체입니다.

미디어 요소

ㅏ미디어 요소오디오 데이터 또는 비디오 및 오디오 데이터를 사용자에게 제공합니다.

노예

기본적으로 각 미디어 요소에는MediaController . 미디어 요소가MediaController , 그들은노예컨트롤러에. 컨트롤러는 종속 된 각 미디어 요소의 재생 속도와 볼륨을 수정합니다. 슬레이브 요소 중 하나가 예기치 않게 중단되면 컨트롤러는 다른 슬레이브 요소를 중지합니다.

버퍼링 및 QoS 이벤트

다음은 버퍼링 및 서비스 품질 (QoS)과 관련된 이벤트의 하위 집합입니다.

시작 이벤트

플레이어가 초기화되고 비디오 재생을 준비 할 때 발생하는 많은 이벤트가 있습니다. 발송 될 순서대로 여기에 나열됩니다.

• :loadstart 플레이어가 초기화 될 때 전달되고, 재생할 새 소스를 제공하는 경우 다시 초기화되는 경우 전달됩니다.

• :loadedmetadata 플레이어에 초기 기간 및 크기 정보가있을 때, 즉 첫 번째 세그먼트가 다운로드 될 때 전달됩니다. 라이브 비디오의 경우loadedmetadata사용자가 재생을 클릭 할 때까지 이벤트가 전달되지 않습니다. 이는 사용자가 재생을 클릭 할 때까지 라이브 비디오가 세그먼트 다운로드를 시작하지 않기 때문입니다.
• :loadeddata 플레이어가 현재 재생 위치에서 데이터를 다운로드했을 때 전달됩니다.

다음 CodePen은 수신 및 전달되는 시작 이벤트를 보여줍니다. CodePen 위에 마우스를 올려 놓으면재실행이벤트 전달을 다시 보려면 오른쪽 하단에있는 버튼을 클릭하십시오. 코드를 실험하려면 CODEPEN에서 편집헤더의 링크를 클릭하여 편집 환경으로 이동합니다. 클릭 할 수 있습니다 JS버튼을 클릭하여 이벤트 리스너를 추가하는 JavaScript를 확인합니다.

펜보기시작 이벤트 데모게시자 : Brightcove Learning Services ( @bcls ) 의 위에 CodePen .

ready () 메서드

그만큼ready()방법은 이벤트처럼 보인다는 점에서 이중적인 성격을 가지고 있지만 방법처럼 사용합니다. 이 메서드 / 이벤트는 플레이어가 명령을받을 준비가되었음을 의미합니다.

그만큼ready()메서드는 이벤트 리스너와 다릅니다. ready이벤트가 이미 발생했습니다. ready()즉시 방법. Brightcove Player를 사용한 개발의 시작점을 제공하기 위해 다음과 같이 사용되는 방법을 자주 볼 수 있습니다.

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

ready () 대 on ( 'loadedmetadata', ...)

사용ready()예를 들어 프로그래밍 방식으로 플러그인을 추가하는 등 플레이어와 상호 작용하려는 경우 올바르게 작동합니다. 예를 들어 비디오와 즉시 상호 작용하려면play() , 위의 코드 스 니펫이 항상 올바르게 작동하는 것은 아닙니다. 더 나은 접근 방식은loadedmetadata예를 들어, 비디오와 상호 작용하려면 :

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

요약하면 플레이어와 상호 작용하려면 다음을 사용할 수 있습니다.

videojs.getPlayer('myPlayerID').ready()

플레이어에서 비디오와 즉시 상호 작용하려면 다음을 사용하십시오.

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})

광고 이벤트

플레이어에 광고 라이브러리 및 기능을 포함하려면 다음을 사용할 수 있습니다. IMA3 플러그인아니면 그 FreeWheel 플러그인 . 이것은 videojs 광고 프레임 워크 (videojs-contrib-ads). 두 광고 플러그인 모두 다음 표에 표시된 광고 이벤트를 전달할 수 있습니다. 또한 각각 구현에 특정한 특정 이벤트가 있습니다.

bc-catalog-error 이벤트

스크립트 블록의 일반ready()섹션에서 오류를 처리하면 문제가 발생할 수 있습니다. 예를 들어 플레이어가 준비되기 전에bc-catalog-error이벤트가 전달될 수 있으며ready()섹션에서 오류를 수신하면 오류를 처리 할 수 없습니다. 이 문제는 지리적 필터링을 사용하거나, 동영상이 게시되지 않았거나, 동영상이 일정 범위를 벗어났거나, 다른 계정에 있을 때 발생할 수 있습니다. 전체 토론 및 예제를 처리하려면bc-catalog-error이벤트, 참조플레이어 카탈로그문서.

진행 및 시간 업데이트

차이점에 대해 혼란이 발생할 수 있습니다. progress과timeupdate이벤트. Brightcove Player는 HTML5 비디오를 기반으로하며 해당 표준에서progress브라우저가 데이터를 다운로드 할 때 이벤트가 전달됩니다. 그만큼timeupdate현재 재생 위치가 변경되면 이벤트가 전달됩니다.

이는 Brightcove의 Smart Player 사용자에게 혼동을 줄 수 있습니다. progress이벤트는 무엇을timeupdate Brightcove Player API에서 수행됩니다.

timeupdate 리스너 제거주의

경우에 따라 추가 한 이벤트 리스너를 제거 할 수 있습니다. timeupdate행사. 사용 사례는 Brightcove 플레이어 샘플 : 미리보기 후 Play 등록문서. 이 상황에서는 플레이어가 일정 시간 범위에서 일시 중지되도록하고timeupdate시간 확인을 위해 익명의 이벤트 핸들러 함수 정의를 사용하십시오. 한 번만 일시 중지하고 싶으므로 이벤트 리스너를 제거해야합니다. 당신은 단순히하기를 원하지 않습니다 :

myPlayer.off('timeupdate');

물론 이것은 모든 이벤트 리스너를 제거하여timeupdate , 그리고이 작업을 수행하는 다른 문제 중에서 시간 스크러버가 진행되는 것을 방지합니다. 해야 할 일은 일반적인 함수 정의 구문 (함수 선언)을 사용하여 함수를 만든 다음 하나의 이벤트 리스너 만 제거하는 것입니다. 축약 된 코드는 다음과 같습니다.

 // Add the event handler
myPlayer.on('timeupdate', timeupdateHandler);

// Handle the event then remove JUST this event listener on timeupdate
function timeupdateHandler(evt) {
  ...
  myPlayer.off('timeupdate', timeupdateHandler);
}

분석 이벤트

비콘이 Analytics 데이터 수집기로 전송 될 때마다 이벤트가 트리거됩니다. 비콘이나 특정 신호를들을 수 있습니다.

모든 비콘 듣기

수신 한 모든 분석 비콘을 추적 할 수 있습니다. analytics-beacon행사:

player.on('analytics-beacon', function(e) {
  videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});

특정 비콘 수신

수신 한 특정 분석 비콘을 추적 할 수 있습니다. analytics-beacon-{beacon_name}행사.

{beacon_name}데이터 수집기로 전송되는 플레이어 이벤트의 이름입니다. 이러한 이벤트의 전체 목록은데이터 수집 API 참조 .

예

player.on('analytics-beacon-video-impression', function(e) {
  videojs.log('sent an impression beacon!', e.params);
});

메서드 체인을 지원하지 않습니다.

Brightcove Player 버전 6부터 이벤트를 사용한 메서드 체인은 더 이상 지원되지 않습니다. 이것은 당신이 이것을 할 수 없다는 것을 의미합니다 :

player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});