BC () 및 getPlayer () 메소드를 사용하여

이 항목에서는bc()getPlayer()각각의 기능과 사용 모범 사례를 포함한 방법. 또한이 문서에는getPlayer()videojs() Brightcove Player에 대한 참조를 얻는 방법.

서문

Brightcove Player로 개발할 때 기본 요구 사항은 플레이어에 대한 참조를 얻는 것입니다. 이를 수행하는 모범 사례는 Brightcove Player 6.x의 수명 동안 변경되었습니다. 따라야 할 모범 사례는 다음과 같습니다 (각 글 머리 기호에 대한 세부 정보는이 문서의 뒷부분에 있음).

  • 버전을 사용할 때 플레이어에 대한 참조를 얻으려면<video>태그에서 다음 중 하나를 수행하십시오.
    • v6.16.0 이상사용videojs.getPlayer()방법.
    • v6.16.0 이전사용videojs()방법.
  • 사용할 때고급 (인 페이지 삽입)플레이어 구현의 모범 사례는 다음과 같습니다.
    • v6.11.0 이상사용<video-js>꼬리표.
    • v6.11.0 이전사용<video>꼬리표.
  • 페이지에서 플레이어를 수동으로 인스턴스화하는 경우bc()플레이어에 대한 참조를 생성합니다.

getPlayer()videojs()

Brightcove Player로 일정 기간 동안 개발을 해왔다면 플레이어에 대한 참조를 가져 와서 저장하는 데 사용되는 다음과 유사한 코드를 거의 확실하게 보셨을 것입니다. myPlayer변하기 쉬운:

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

사용하는 경우 v6.16.0 이상 API를 더 깔끔하게 사용하고 권장하는 모범 사례로player.getPlayer()대신 , 여기에 표시된대로 :

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

video-js태그 대video꼬리표

Brightcove Player 용 v6.11.0 이상사용하는 것이 가장 좋습니다. <video-js>위에<video> . 그 이유는 다음과 같습니다.

  • 사용<video-js>당신이 얻을 수있는 네이티브 컨트롤 문제의 플래시를 방지합니다<video>요소. 이에 대한 예는 Chrome 버전 67 이상입니다. Chrome은 잠시 동안 깨진 비디오 아이콘을 표시합니다. <video>태그가 Brightcove Player로 변환됩니다. 아이콘은 다음과 같이 나타납니다.
    크롬 깨진 비디오 아이콘
  • 비 비디오 클라우드 미디어를 사용할 때와 같은 일부 경우<video-js>플레이어가 초기화 프로세스를 더 많이 제어 할 수 있습니다. 이렇게하면 브라우저와 관련된 자동 브라우저 동작을 방지 할 수 있습니다. <video>요소.

bc()방법 세부 정보

그만큼bc()메서드는 선택한 시간에 플레이어를 인스턴스화하는 데 사용됩니다. 그만큼플레이어 인스턴스화 지연문서는 사용 사례 및 구현에 대해 설명합니다. 그만큼 Brightcove 플레이어 샘플 : 수직 볼륨 제어의 또 다른 사용을 보여줍니다bc()플레이어가 인스턴스화되기 전에 발생해야하는 볼륨 컨트롤의 방향을 수직으로 변경하려는 메서드입니다.

메서드의 구문은 다음과 같습니다.

  bc(id,options)

여기서:

  • id :
    • 설명: 동영상 요소 또는 동영상 요소 ID
    • 데이터 유형 : 문자열 | 요소
    • 필수 : true
  • options :
    • 설명: 설정 제공을위한 옵션 개체
    • 데이터 형식: 객체
    • 필수 : 거짓
  • 이 메서드는 Brightcove Player 인스턴스를 반환합니다.

예를 들어, 다음을 가질 수 있습니다. video-js태그와 JavaScript를 차례로 클릭하여 플레이어를 구성합니다.

  <video-js id="myPlayerID"
     data-embed="default"
     data-application-id=""
     controls=""
     width="640" height="360"></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  
  <script type="text/javascript">
    // +++ Define the player options +++
    var options = {
      controlBar: {
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    };
  
    // +++ Add the player attributes +++
    var myPlayerEl = document.getElementById("myPlayerID");
    myPlayerEl.setAttribute('data-account', 1752604059001);
    myPlayerEl.setAttribute('data-player', 'default');
    myPlayerEl.setAttribute('data-video-id', 5557662144001);
  
    // +++ Create the player +++
    bc(myPlayerEl, options);
  </script>

일반 플레이어 구성 옵션 (자세한 내용은플레이어 구성 가이드 ), 다음과 함께 사용할 수 있습니다. bc()방법:

유효한 구성 옵션
autoplay
language
languages
loop
muted
playsinline
preload
techOrder