단계별: 플레이어 관리

이 문서에서는 플레이어 관리 API의 기본 작업에 대한 실습을 제공합니다.

서문

이 단계별 문서에서는 다음 작업을 수행합니다.

  • 플레이어 생성
  • 비디오를 자동 재생하도록 플레이어 업데이트
  • 플러그인을 추가하여 플레이어 사용자 지정
  • 플레이어의 구성 표시

시작하기

이 단계별 문서에서 취하는 접근 방식은 curl 문을 사용하여 플레이어 서비스 API와 통신하는 것입니다. curl 도구는 명령줄에서 URL 구문으로 데이터를 전송하는 데 사용됩니다. 컬에 대한 자세한 내용은 https://curl.haxx.se 에서 확인할 수있습니다.

단순함을 위해이 단계별 문서 에서처럼 curl을 사용할 필요는 없습니다. 물론 좋아하는 언어를 사용하여 API와 통신 할 수 있습니다. 기본 인증, AJAX 및 JavaScript를 사용하여 플레이어 생성, 모든 플레이어 표시, 플레이어 삭제 등과 같은 기본 작업을 위한 미니 앱을 작성하는 방법을 보여주는 플레이어 관리설정 샘플을확인해 보세요.

API 사용을 시작하기 전에 몇 가지 예비 단계를 수행해야합니다. 이것들은:

  • 스튜디오에 로그인합니다. 여러 계정이있는 경우 드롭 다운을 사용하여 새 플레이어를 만들 계정을 선택합니다. 자격 증명 시스템이 제대로 작동하려면이 계정에 대한 관리자 권한이 있어야합니다. 사용자에게 관리자 권한이 있는지 확실하지 않은 경우 사용자 설정 페이지로 이동하여 역할과 함께 나열된 사용자를 확인합니다.
  • Studio의 모듈 목록에서 HOME을 선택했는지 확인하십시오. 페이지 왼쪽 상단에서 계정 이름 바로 아래에서계정 ID를 복사할 수있습니다.
    복사 할 계정 ID
  • 명령 줄에서 다음을 입력하여 환경 변수에 계정 ID 값을 할당합니다. 
            export ACCOUNT_ID=YourAccountID
  • 인증은 curl 문의 일부로 계정 이메일 주소를 제공하여 처리되며 API는 비밀번호를 입력하라는 메시지를 표시합니다. 이메일 주소가 자주 사용되므로 해당 값도 환경 변수에 할당합니다. 
            export EMAIL=YourEmailAddress

이제 API를 사용할 준비가되었습니다.

플레이어 생성

이제 플레이어 관리 API를 호출하여 플레이어를 만들 수 있습니다. 이 API 호출은플레이어 관리 API 개요문서에 자세히 설명되어 있습니다. 다음 curl 문을 복사하여 명령 줄에 붙여 넣는 것이 좋습니다.

다음 단계는 플레이어를 만드는 데 도움이됩니다.

  1. 첫 번째 curl 문은 플레이어를 만들고 이름과 설명을 할당합니다. 명령줄에 이 명령문을 붙여넣고 Enter키를 누르면 암호를 입력하라는 메시지가 표시됩니다. 
            curl \
          --header "Content-Type: application/json" \
          --user $EMAIL \
          --request POST \
          --data '{
            "name": "My New Player Name v2",
            "description": "My new player description"
            }' \
          https://players.api.brightcove.com/v1/accounts/{account_id}/players

    서버가 JSON 형식으로 응답 데이터를 반환하는 것을 볼 수 있습니다.

            {
          "id": "S1qN4xeG7",
          "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
          "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
          "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
          "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
          "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
          "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
        }
  2. 다음 값 중 하나 (또는 모두)를 사용하여 플레이어를 봅니다 (이 시점에서 플레이어에 비디오가 없지만 Studio를 사용하여 새로 만든 플레이어를 사용하여 비디오를 게시 할 수 있음).
    • 플레이어를 보려면 브라우저에url 복사하세요.
    • 를embed_code HTML 페이지에 복사하여 iframe에서 플레이어를 볼 수 있습니다. 이 기능이 제대로 작동하려면 iframe이 포함 된 페이지가 실제 HTTP 서버에서 제공되어야합니다.
    • embed_in_page 기능의 사용법은 고급 (페이지 내) 임베드 코드의사용 가능한 옵션문서에 자세히 설명되어 있습니다.

Video Cloud 동영상

물론 Video Cloud 라이브러리의 비디오를 사용하여 플레이어를 만들 수 있습니다. JSON 데이터의media 섹션을 사용하는 대신video_cloud 섹션을 사용합니다. 아래 curl 문은 비디오 클라우드 비디오의 ID를 사용하여 플레이어 생성을 보여줍니다.

        curl \
          --header "Content-Type: application/json" \
          --user $EMAIL \
          --request POST \
          --data '{
            "name": "Video Cloud CURL 10 March",
            "configuration": {
              "video_cloud": {
                "video": "4093372393001"
              }
            }
          }' \
        https://players.api.brightcove.com/v2/accounts/{account_id}/players

응답은 위와 같이 media/sources/src를 사용하여 플레이어를 만들 때의응답과 논리적으로 동일합니다.

        {
        "id": "HJyMlHiuZ",
        "url": "https://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html",
        "embed_code": "<iframe src="//players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>",
        "embed_in_page": "https://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
        "preview_url": "https://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html",
        "preview_embed_code": "<iframe src="//preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>"
        }

반환된 URL 값을 검색하여 플레이어의 구성을 확인하고 index.html 를config.json으로 변경할 수있습니다. 위의 curl 문으로 만든 플레이어의 경우 다음이 표시됩니다.

        {
          "account_id": "1507807800001",
          "compatibility": true,
          "embed_id": "default",
          "player": {
            "template": {
              "name": "single-video-template",
              "version": "6.5.0"
            }
          },
          "player_id": "HJyMlHiuZ",
          "player_name": "Video Cloud CURL 10 March",
          "updated_at": "2017-08-23T17:48:55.622Z",
          "video_cloud": {
            "policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
            "video": "4093372393001"
          }
        }

플레이어 구성에 자동으로policy_key 추가됩니다. 이것은 Policy API를 사용하여 생성되며 다른 비디오에 액세스하기 위해 플레이어에 특별한 제한을 적용 할 수 있습니다. 즉, 정책 키는 언제 볼 수있는 비디오를 제어합니다.

플레이어 업데이트

이제 플레이어를 만들기위한 기본 사항을 수행했습니다. 다음으로 플레이어의 간단한 업데이트를 수행하는 방법을 배웁니다. 이 경우 브라우저에서 허용하는 경우 플레이어에서 비디오를 자동 재생하도록 플레이어를 설정합니다.

  1. 플레이어 생성에서 반환된 JSON에는id 값이 표시되었습니다. 이것을PLAYER_ID 환경 변수에 복사합니다. 
            export PLAYER_ID=YourPlayerID
  2. 플레이어를 업데이트하려면 HTTP PATCH 메서드를 사용합니다. 플레이어를 업데이트하기 위해 데이터를 보냅니다. autoplay옵션을 로 설정합니다true . 다음 curl 문을 복사하여 붙여넣고 실행합니다. 
            curl \
          --header "Content-Type: application/json" \
          --user $EMAIL \
          --request PATCH \
          --data '{
            "autoplay": true
          }' \
        https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
  3. 서버가id , preview_url 및preview_embed_code 값을 포함하는 데이터를 다음 JSON 형식으로 반환하는지 확인하십시오. 
            {
          "id": "S1qN4xeG7",
          "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
          "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
          "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
        }
  4. preview_url 또는preview_embed_code 값을 사용하여 플레이어 구성의 변경 사항을 확인하십시오. 이제 자동 재생이 사실임을 알 수 있습니다.
  5. 이제 플레이어를 게시하여 사용자가 볼 수있는 올바른 위치로 푸시합니다. 다음 명령을 입력합니다. 
            curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request POST \
        https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish

    플레이어가 게시되면 미리보기 버전과 다른 플레이어를 갖게됩니다. 게시 된 버전은 다음과 같은면에서 미리보기 버전과 다릅니다.

    • JavaScript와 CSS는 축소되고 연결되며 플레이어에 직접 삽입됩니다.
    • 포스터 이미지의 저해상도 버전이 생성되고 페이지에 인라인되어 요청-설정 시간이 긴 네트워크 (예: 셀룰러 데이터 네트워크) 에서 인지되는 로드 시간이 개선됩니다.
    • 이전 버전의 플레이어가 저장되어 업데이트가 적용된 후 문제가 발견되면 복구 할 수 있습니다.
  6. 플레이어 게시의 JSON 응답이 다음과 같이 나타나는지 확인합니다. 
            {
        "id": "S1qN4xeG7",
        "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
        "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
        "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
        }
  7. 플레이어 구현 중 하나를 사용하여 게시 된 플레이어가 올바르게 작동하는지 확인합니다.

플레이어 사용자 지정

플러그인을 사용하여 플레이어를 사용자 지정할 수 있습니다. 플레이어에 기존 플러그인을 포함하거나단계별로 직접 빌드하는 방법을 배울 수 있습니다. 플러그인 개발 .

이 경우 매우 간단한 기존 플러그인을 사용하여 비디오에 문자 메시지를 오버레이합니다. 다음은 HTML 단락 태그를 생성하는 플러그인 코드입니다. 참고: 클래스 이름과 텍스트가 단락에 할당된 다음 기존 플레이어에 추가됩니다. 이 플러그인은 사용자 편의를 위해 이미 존재하며 //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js에있습니다.

        videojs.registerPlugin('firstPlugin', function() {
          var player = this,
          overlay = document.createElement('p');
          overlay.className = 'vjs-overlay';
          overlay.innerHTML = "First Plugin Working!";
          player.el().appendChild(overlay);
        });

이 경우에는 검은 색 배경에 검은 색 텍스트가 표시되지 않도록 단락의 스타일을 지정해야합니다. 다음은 단락의 클래스 이름에 적용된 스타일입니다. 이 스타일시트는 사용자 편의를 위해 이미 존재하며 //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css에서 확인할 수있습니다.

        .vjs-overlay {
          background-color: #333333;
          color: white;
          font-size: 2em;
          padding: 5px;
          position: absolute;
          top: 100px;
          left: 20px;
          width: 150px;
        }

curl 문을 사용하여 비디오 소스 및 포스터 이미지를 할당한 것처럼 curl 명령문을 사용하여 플레이어에게 다음을 알립니다.

  • 플러그인의 코드가 포함 된 JavaScript 파일의 위치
  • 스타일 시트의 위치
  • 플레이어와 함께 사용할 플러그인 이름
  1. 다음 curl 문을 사용하여 플러그인이 작동하도록합니다. 
            curl\
        --header "Content-Type: application/json"\
        --user $EMAIL\
        --request PATCH\
        --data '{
          "scripts": [
            "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"
           ],
           "stylesheets": [
            "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"
           ],
           "plugins": [{
             "name": "firstPlugin"
           }]
          }'\
        https: //players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
  2. 다음 curl 문을 사용하여 업데이트 된 플레이어를 게시합니다. 이것은 플레이어를 게시하기 위해 이전 섹션에서 사용한 것과 동일한 게시 코드입니다. 
            curl \
          --header "Content-Type: application/json" \
          --user $EMAIL \
          --request POST \
          https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish
  3. 반환 된 URL을 복사하고 찾아보십시오. 플러그인이 작동하고 플러그인 텍스트가 표시되는 것을 볼 수 있습니다.
    플러그인 텍스트
    플러그인 텍스트

플레이어 관리 API를 사용하여 플러그인이 플레이어에 추가되면 Brightcove에서 제공 한 플러그인이든 사용자가 빌드 한 사용자 정의 플러그인이든 플러그인은 플레이어 코드 자체의 일부가됩니다.

디스플레이 구성

수행 한 작업을 디버그하고 확인하려면 플레이어의 구성을 보는 것이 도움이됩니다.

  1. 이렇게 하려면 다음을 사용하십시오. GET 방법configuration URL. 
            curl \
          --header "Content-Type: application/json" \
          --user $EMAIL \
          --request GET \
          https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
  2. JSON 구성 응답이 다음과 유사한 지 확인하십시오. 
            {
          "media": {
            "poster": {
              "highres": "//solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
            },
            "sources": [{
              "type": "application/x-mpegURL",
              "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
            }, {
              "type": "video/mp4",
              "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
            }]
          },
          "compatibility": true,
          "video_cloud": {
            "video": "4093372393001",
            "policy_key": "BCpkADawqM3ugPRAtcx48_C4FjXiEiJORcRFnXkeL9siQUpauO_o7SaIhSnYvM24nUCeD74UFG1LMW8vtmaftsO1vYeeOn2iglfvEbG-c0PYwJ_zQCQGsvkrbgrNyEDvbEKjyrsQVXj0DOco"
          },
          "player": {
            "template": {
              "name": "single-video-template",
              "version": "6.7.0"
            }
          },
          "scripts": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
          "stylesheets": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
          "plugins": [{
            "name": "firstPlugin"
          }]
        }

플레이어의 구성을 확인하는 또 다른 방법은 반환된 URL 값을 찾아보고 index.html 를config.json으로 변경하는것입니다.

전달 시스템 API

Delivery System API를 사용하면 저장소라고하는 파일 그룹을 관리하고 배포 할 수 있습니다. 이러한 파일은 REST API 및 git을 통해 관리됩니다. 이러한 API는 플레이어를 만들거나 편집 할 때 대부분의 사람들에게 필요하지 않지만 다른 목적으로 사용할 수있는 매우 흥미로운 API 집합이 될 수 있습니다. 시험해보고 싶다면 여기에서할 수 있습니다 . 실습 소개를 위해단계별 지침을 사용해 보십시오. 전달 시스템문서.