브라이트코브 플레이어 로더

이 항목에서는 Brightcove Player Loader를 사용하여 최신 빌드 도구를 사용하여 Brightcove Player를로드하는 방법을 알아 봅니다. 이 라이브러리는 더 많은 기술 고객을위한 도구로 간주됩니다.

플레이어 로더 개요

Brightcove Player 사용자가 인 페이지 임베드 또는 iframe 플레이어 구현을 복사하여 붙여 넣기를 원하지 않는 경우이 모듈은 웹 애플리케이션에 번들로 제공되며 통합 코드를 작성하여 다운로드 할 필요없이 Brightcove 플레이어를 사용할 수있는 방법을 제공합니다. 플레이어를 삽입합니다. 이 도구는 게시 된 모든 Brightcove Player를 다운로드하여 DOM에 포함시킬 수있는 Brightcove 라이브러리의 문제를 해결합니다.

이 라이브러리는 일반적인 에버그린 브라우저, Chrome, Firefox, Edge 및 Safari를 지원합니다.

이 문서는 본질적으로 Brightcove Player Loader의 예제 사용을 제공합니다. 자세한 내용은 도서관의 brightcove / 플레이어 로더 GitHub 저장소.

Brightcove Player와 함께 사용할 수있는 웹팩이 있습니다. 이에 대한 자세한 내용은플레이어 로더 웹팩 플러그인 GitHub 저장소.

설치

라이브러리는 다음을 사용하여 NPM을 사용하여 설치됩니다.

npm install --save @brightcove/player-loader

라이브러리 포함

사용을 위해 라이브러리를 포함하는 다른 방법은 GitHub 저장소도서관을 위해.

Promise를 사용한 구현

사용할 수 있습니다자바 스크립트 약속도서관과 함께. 이 라이브러리가 작동하는 데 약속이 필요하지는 않지만 권장됩니다. 기본적으로이 라이브러리는 글로벌 약속을 찾습니다. 그러나 다음을 통해 Promise 구현을 명시 적으로 제공 할 수 있습니다. Promise이 문서의 뒷부분에 자세히 설명되어 있습니다.

다음은 Promise를 사용한 라이브러리 구현을 보여줍니다. 핵심 개념은 다음을 사용하여 플레이어에 대한 참조를 얻는 것입니다. var myPlayer = success.ref;에then약속 처리 섹션 :

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
    brightcovePlayerLoader({
      refNode: document.querySelector('#theDiv'),
      accountId: '1752604059001',
      playerId: 'wHBRh9M3o',
      videoId: '4607357817001'
    })
    .then(function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    })
    .catch(function(error) {
      console.log('error', error);
    })
  </script>

</body>

</html>

콜백을 사용한 구현

콜백을 사용하여 플레이어 로더를 구현할 수도 있습니다. onSuccess과onFailure콜백 함수.

다음은 콜백을 사용한 라이브러리 구현을 보여줍니다. 핵심 개념은 다음을 사용하여 플레이어에 대한 참조를 얻는 것입니다. var myPlayer = success.ref;에onSuccess콜백 함수 :

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
  brightcovePlayerLoader({
    refNode: document.querySelector('#theDiv'),
    accountId: '1752604059001',
    playerId: 'wHBRh9M3o',
    videoId: '4607357817001',
    onSuccess: function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    },
    onFailure(error) {
      console.log('error', error);
    }
  });
  </script>

</body>

</html>

재생 제한 사용

Brightcove Player Loader에서 재생 제한을 사용하려면 플레이어에 대한 참조를 가져오고 JSON 웹 토큰(JWT)을 전달하기만 하면 됩니다.

예를 들면 다음과 같습니다.

    <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <title>Brightcove Player</title>
          <meta charset="UTF-8">
          <script crossorigin
              src="player-loader/dist/brightcove-player-loader.min.js"></script>
      </head>
      
      <body>
          <main>
              <h1>Brightcove Player</h1>
              <div id="theDiv"></div>
      
          </main>
      </body>
      <script>
          var myJwtToken = "your jwt token";
          var myVideoId = "your video Id";
      
          // +++ Add the Brightcove Player +++
          brightcovePlayerLoader({
              refNode: document.querySelector('#theDiv'),
              accountId: 'your account Id',
              playerId: 'your player Id',
            onSuccess: function (success) {
              // Get a reference to the BC Player
              var myPlayer = success.ref;
              console.log('success', success);
              
              myPlayer.ready(function () {
                // This should ideally be set in the player configuration
                myPlayer.catalog.setPolicyKey(null);
                myPlayer.catalog.setBcovAuthToken(myJwtToken);
                myPlayer.catalog.get({
                  id: myVideoId,
                  type: 'video'
              }).
                  then(function (data) {
                    myPlayer.catalog.load(data);
                    myPlayer.muted(true);
                    myPlayer.play();
                  }).
                  catch(function (error) {
                    throw new Error(error);
                  });
              });
            },
            onFailure(error) {
              console.log('error', error);
            }
          });
    </script>
    </html>

사용 가능한 매개 변수

이름: accountId

데이터 형식:문자열 | 숫자

기술:
Video Cloud 계정 ID.

이름: applicationId

데이터 유형:문자열

설명:
생성 된 삽입에 적용 할 애플리케이션 ID입니다.

이름: catalogSearch

데이터 형식:문자열 | 목적

설명:
수행 할 비디오 클라우드 카탈로그 검색. 이것은 간단한 문자열 검색이거나 일치하는 개체 일 수 있습니다. 목록getSearch()방법 . JSON으로 직렬화 할 수없는 문자열이 아닌 값이 주어지면 이 매개 변수는 무시됩니다.

이름: catalogSequence

데이터 유형: 어레이 | 목적

기술:
수행 할 비디오 클라우드 카탈로그 시퀀스입니다. 참조목록getLazySequence()방법자세한 내용은. JSON으로 직렬화 할 수없는 문자열이 아닌 값이 주어지면 이 매개 변수는 무시됩니다.

이름: embedId

데이터 형식:끈

기술:
플레이어의 Brightcove Player 내장 ID입니다. 기본값은'default' . 기본값은 대부분의 사용자에게 적합합니다.

이름: embedOptions

데이터 유형: 객체

기술:
임베드 생성을위한 특정 옵션을 제공하는 데 사용됩니다. 주요 수치는 다음과 같습니다.

`embedOptions.pip`	부울	만약`true` , 임베드를`<div class="vjs-pip-container">`요소. 지원이 필요할 때 사용해야합니다. Brightcove Picture-in-Picture 플러그인 . 기본값은 입니다`false` .
`embedOptions.playlist`	부울	만약`true` , 추가합니다`<div class="vjs-playlist">`삽입 후 요소. 지원이 필요할 때 사용해야합니다. Brightcove Playlist UI 플러그인 . 기본값은 입니다`false` .
`embedOptions.responsive`	부울 \| 목적	소스 코드를 사용자 지정하여 다음을 사용하여 반응 형 크기의 플레이어를 생성하는 데 사용됩니다. intrinsic ratio래퍼 접근 방식. true 인 경우 컨테이너를 채울 16 : 9 종횡비의 반응 형 임베드 코드를 생성합니다. 기본값은 입니다`false` . 다음 하위 속성을 사용하여이를 사용자 지정하기 위해 개체를 제공 할 수 있습니다. :`aspectRatio` 가로 세로 비율을 16 : 9 이외의 값 (예 : '4 : 3')으로 맞춤 설정하는 데 사용되는 문자열입니다. :`maxWidth` 플레이어의 최대 너비를 제한하는 데 사용되는 문자열입니다. 픽셀 (예 : '960px')과 같은 CSS 단위를 사용해야합니다.
`embedOptions.unminified`	부울	만약`true` , 플레이어의 축소되지 않은 버전을 사용합니다. 이것은 디버깅 목적으로 유용 할 수 있지만 더 큰 플레이어 다운로드 비용이 발생합니다. 프로덕션에는 권장되지 않습니다! 기본값은 입니다`false` .

이름: embedType

데이터 유형:문자열

기술:
생성 할 소스 코드 유형입니다. 이 매개 변수의 값은 다음 중 하나여야 합니다.

'in-page'또는brightcovePlayerLoader.EMBED_TYPE_IN_PAGE : 고급 소스 코드라고도하는이 코드는 플레이어를 최상위 웹 페이지에 직접 삽입합니다.
'iframe'또는brightcovePlayerLoader.EMBED_TYPE_IFRAME : 기본 소스 코드라고도하며 플레이어를 <iframe> 요소로 삽입합니다.

기본값은'in-page' .

이름: onEmbedCreated

데이터 유형: 기능 (요소)

기술:
삽입 요소를 맞춤 설정하는 데 사용되는 콜백video-js요소 또는iframe요소)가 DOM에 삽입되거나embedOptions플레이어가 다운로드되고 초기화되기 전에 embed 요소는 변경 될 수 있으며,이 콜백이 요소를 반환하는 경우 해당 요소가 embed 요소로 사용됩니다. 잠재적 인 사용 사례는 속성을 추가 / 제거하거나 소스 또는 트랙과 같은 하위 요소를 추가하는 것입니다.

이름: onFailure

데이터 유형: 기능 (오류)

기술:
실패를 처리 할 수있는 콜백 함수Promise사용할 수 없거나 원하지 않습니다. 이 함수를 전달하면 가 반환되지 않습니다. Promise 그것은 하나를 얻습니다Error개체를 인수로 사용합니다. 이 함수의 반환 값은 무시됩니다.

이름: onSuccess

데이터 유형: 기능 (객체)

기술:
성공을 처리 할 수있는 콜백 함수Promise사용할 수 없거나 원하지 않습니다. 이 함수를 전달하면 가 반환되지 않습니다. Promise 그것은 하나를 얻습니다Success개체를 인수로 사용합니다. 이 함수의 반환 값은 무시됩니다.

이름: options

데이터 유형: 객체

기술:
Video.js 옵션 객체플레이어 생성 과정에서 전달합니다. 이러한 옵션은 Brightcove Player 구성에 지정된 모든 설정보다 우선합니다. 이 매개 변수는 iframe 삽입과 함께 사용할 수 없습니다.

이름: playerId

데이터 유형:문자열

기술:
Brightcove 플레이어 플레이어 ID. 기본값은'default' .

이름: playlistId

데이터 형식:문자열 | 숫자

설명:
Video Cloud 재생 목록 ID 또는 재생 목록 참조 ID.

이름: playlistVideoId

데이터 형식:문자열 | 숫자

설명:

다음에 의해 지정된 결과 재생 목록에서 찾을 수있는 Video Cloud 비디오 ID playlistId . 이 매개 변수는 다음과 같은 경우 무시됩니다. playlistId누락.

이름: Promise

데이터 유형: 기능 (기능)

기술:
명시 적으로 제공하는 데 사용Promise이행. 제공되는 경우 이는 모든 글로벌Promise . 기본값은window.Promise

이름: refNode

데이터 유형: 요소 | 끈

설명:
Required
플레이어가 삽입 될 DOM 요소입니다. DOM 요소로 제공되지 않는 경우 문자열로 제공 될 수 있습니다. document.querySelector .

이름: refNodeInsert

데이터 유형:문자열

기술:
플레이어가 참조 DOM 요소 (refNode에 의해 지정됨)에 상대적으로 삽입되는 방식입니다. 이 매개 변수의 값은 다음 중 하나여야 합니다.

'append'또는brightcovePlayerLoader.REF_NODE_INSERT_APPEND : 플레이어는 참조 노드의 마지막 자식이됩니다.
'prepend'또는brightcovePlayerLoader.REF_NODE_INSERT_PREPEND : 플레이어는 참조 노드의 첫 번째 자식이됩니다.
'before'또는brightcovePlayerLoader.REF_NODE_INSERT_BEFORE : 플레이어는 참조 노드의 이전 형제가됩니다.
'after'또는brightcovePlayerLoader.REF_NODE_INSERT_AFTER : 플레이어는 참조 노드 다음의 형제가됩니다.
'replace'또는brightcovePlayerLoader.REF_NODE_INSERT_REPLACE : 참조 노드가 제거되고 플레이어가 교체합니다.

이름: videoId

데이터 형식:문자열 | 숫자

기술:
Video Cloud 비디오 ID 또는 비디오 참조 ID.