지원 고객 지원 문의 | 시스템 상태 시스템 상태
페이지 내용

    단계별: 플레이어 관리

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

    서문

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

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

    시작하기

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

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

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

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

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

    플레이어 생성

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

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

    1. 첫 번째 curl 문은 플레이어를 만들고 이름과 설명을 할당합니다. 명령 줄에이 문을 붙여넣고시작하다 , 암호를 입력하라는 메시지가 표시됩니다.
              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": "http://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": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
                "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
                "preview_embed_in_page": "http://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 라이브러리의 비디오를 사용하여 플레이어를 만들 수 있습니다. 사용하는 대신media JSON 데이터의 섹션에서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
            

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

            {
            "id": "HJyMlHiuZ",
            "url": "http://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": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
            "preview_url": "http://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": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
                "preview_embed_in_page": "http://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": "http://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": "http://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 집합이 될 수 있습니다. 시도해보고 싶다면여기서 그렇게 . 실습 소개를 보려면단계별 : 배달 시스템문서.