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

    퍼가기 Brightcove PlayerCMS에서

    이 항목에서는 CMS 사용자가 다음을 포함하도록 대화 상자를 제공하는 방법에 대한 지침을 제공합니다. Brightcove Player 페이지에서.

    소개

    CMS 사용자가 비디오 또는 재생 목록을 포함하는 경우 player 페이지에서 생성 할 때 가능한 한 많은 유연성을 제공하고자합니다. Brightcove player 임베드 코드를 사용하여 Brightcove player 웹 페이지에 있지만 HTML 또는 자바 스크립트 전문가 일 것으로 예상하지는 않습니다.

    이 항목에서는이를 수행하는 방법에 대한 지침을 제공합니다. 그만큼 audience 이 문서는 주로 Brightcove 파트너이지만 통합하는 모든 사용자에게 유용합니다. Video Cloud 또는 독립형 Brightcove Player CMS로.

    플레이어가 대화 상자 동작을 포함시킵니다.

    사용자가 형식을 제어 할 수있는 대화 상자가 있어야합니다. player 웹 페이지에서. 이 대화 상자에서 사용자는 아래에 나열된 필드를 설정할 수 있습니다. 이 대화 상자가 표시되기 전에 사용자가 이미 Brightcove 계정과 비디오 또는 재생 목록을 선택한 것으로 가정합니다. 그렇지 않으면, Brightcove 계정 및 비디오 또는 재생 목록의 선택은 먼저 부록 A 아래.

    1. Player: 사용자는 player 사용 가능한 Brightcove player에스. 동영상을 퍼가는 경우 player재생 목록 이외의 기능 만 활성화 player선택할 수 있어야합니다. 재생 목록을 퍼가는 경우 player, 재생 목록 만 활성화 player선택할 수 있어야합니다.
    2. 자동 재생: 사용자는 자동 실행을 사용 / 사용 중지 할 수 있어야합니다. 기본값은 사용 불가능합니다.
    3. 음소거: 사용자는 음소거를 활성화 / 비활성화 할 수 있어야합니다. 기본값은 사용 불가능합니다.
    4. 소스 유형: 사용자는 iFrame 및 Javascript 소스 코드 중 하나를 선택할 수 있어야합니다.
      1. 동영상 플레이어의 경우 기본값은 Javascript이어야합니다.
      2. 재생 목록 플레이어의 경우 기본값은 iFrame이어야합니다.
    5. 크기 조정: 사용자는 반응 형[1-1] 또는 고정 크기 조정[1-2].
      1. 비디오 플레이어의 경우 기본값은 반응 형이어야합니다.
      2. 재생 목록 플레이어 :
        1. iFrame 인 경우 기본값은 반응 형이어야합니다.
        2. Javascript 인 경우 기본값은 고정이어야합니다.
    6. 화면 비율: 사용자가 화면 비율을 선택할 수 있어야합니다.[1-1].
      1. 선택 사항은 다음과 같습니다.
        • 16:9
        • 4:3
        • Custom
      2. 기본값은이어야합니다. 16:9.
    7. 너비, 높이: 사용자가 너비와 높이를 입력 할 수 있어야합니다.[1-1].
      1. 종횡비가 16 : 9 or 4 : 3신장 입력란은 회색으로 표시되고에 따라 자동으로 계산됩니다. 화면 비율.
      2. 기본값은 다음과 같아야합니다. 640 ...에 대한 360 ...에 대한 신장 종횡비가 사용자 정의 인 경우.

    노트

    • [1-1] CMS에서 사용자가 반응 형 대 고정 및 너비 / 높이를 지정할 수있는 코드를 포함하기위한 기본 컨테이너를 제공하는 경우 크기 조정에 컨테이너를 사용하고 Brightcove 포함 코드가 항상 반응하도록하는 것이 더 합리적 일 수 있습니다.
    • [1-2] 아래에 포함 된 대응 적 임베드 코드는 너비를 최대 너비로 사용합니다.

    통합에 대한 일반적인 도움말 Video Cloud 당신의 CMS와 함께

    CMS와 Video Cloud

    플레이어 목록 얻기

    Player Management API 참고

    재생 목록 플레이어 식별

    1. 의 목록을 반복 player에 의해 반환 된 Player Management API 요청을 참조하십시오.
    2. 찾아 보라. playlist 들:
      1. 필드가 있고 그 값이 true, 그것은 재생 목록 플레이어입니다.
      2. 값이 false 또는 playlist 존재하지 않으면 다음 단계를 수행하십시오.
    3. 반복을 통해 plugins 목록 (있는 경우)을 찾아 registry_id ~와 같은 분야 @brightcove/videojs-bc-playlist-ui; 그것이 존재한다면 그것은 재생 목록 플레이어입니다. 그렇지 않은 경우, 그렇지 않습니다. 다음은 선수 목록에있는 리턴의 샘플입니다.
      "items": [
         {
            {
            "account_id": "4031511818001",
            "branches": {
              "master": { "configuration": {
                "playlist": true, "plugins": [
                    {
                      "options": {
                        "account_id": "4031511818001",
                        "branches": {
                          "master": { "configuration": {
                            "id": "NkVhrXzug",
                            "playlist": true,
                            "plugins": [], // this is a v1 playlist player ...
              {
                "account_id": "4031511818001",
                "branches": {
                  "master": { "configuration": {
                    "playlist": true,
                    "plugins": [
                      {
                        "options": {
                          "playOnSelect": true
                        },
                        "registry_id": "@brightcove/videojs-bc-playlist-ui",
                        "version": "2.x" // this is a v2 playlist player
                        }
                      }
                    ] ...
      

    매개 변수 및 코드 포함

    아래 섹션에서는 Brightcove player 사용자 선택에 따라 코드를 포함합니다. 그만큼 %XYZ% 값은 아래 설명 된대로 포함 코드로 대체됩니다.

    공통 매개 변수

    • %AUTOPLAY% = autoplay if Autoplay 사용 설정되어 있지 않으면 null
    • %MUTED% = 음소거 된 경우 Muted 사용 설정되어 있지 않으면 null
    • %ACCOUNTID% = 사용자가 선택한 Brightcove 계정 ID
    • %VIDEOID% = 사용자가 선택한 비디오 ID
    • %PLAYLISTID% = 사용자가 선택한 재생 목록 ID
    • %PLAYERID% = 사용자가 선택한 비디오 플레이어 ID 또는 재생 목록 플레이어 ID
    • %CMS% = CMS 이름
    • %CMSVERSION% = CMS 버전
    • %CONNECTORVERSION% = 커넥터 버전

    iFrame 비디오 플레이어 내장

    반응 형 사이징을위한 매개 변수 (최대 크기 포함)

    %MAXWIDTH% = Width . ‘px’
    %MINWIDTH% = 0px
    %WIDTH% = 100% %HEIGHT% = 100%
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    고정 크기 조정을위한 매개 변수

    %MINWIDTH% = Width . ‘px’
    %WIDTH% = Width . ‘px’
    %HEIGHT% = Height . ‘px’
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    Brightcove 임베드 코드

    <div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
      <div style="padding-top: %PADDINGTOP%;">
        <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?videoId=%VIDEOID%
          &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
          &%AUTOPLAY%
          &%MUTED%"
          allowfullscreen=””
          webkitallowfullscreen=””
          mozallowfullscreen=””
          style= width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
        </iframe>
      </div>
    </div

    구현 예

    샘플 구현
    Iframe 샘플 구현

    자바 스크립트 (페이지 내부) 플레이어 내장

    반응 형 사이징을위한 매개 변수 (최대 크기 포함)

    %MAXWIDTH% = Width . ‘px’
    %MINWIDTH% = 0px
    %WIDTH% = 100% %HEIGHT% = 100%
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    고정 크기 조정을위한 매개 변수

    %MINWIDTH% = Width . ‘px’
    %WIDTH% = Width . ‘px’
    %HEIGHT% = Height . ‘px’
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    Brightcove 임베드 코드

    <div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
      <div style="padding-top: %PADDINGTOP%; ">
        <video-js data-video-id="%VIDEOID%"
          data-account="%ACCOUNTID%"
          data-player="%PLAYERID%"
          data-embed="default"
          data-usage="cms: :%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript" class="video-js"
          controls %AUTOPLAY% %MUTED%
          style="width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
        </video-js>
        <script src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.min.js"></script>
      </div>
    </div>

    구현 예

    인 페이지 삽입 광고 샘플 구현
    인 페이지 삽입 광고 샘플 구현

    iFrame 재생 목록 플레이어 퍼가기

    반응 형 사이징을위한 매개 변수 (최대 크기 포함)

    %MAXWIDTH% = Width . ‘px’
    %MINWIDTH% = 0px
    %WIDTH% = 100% %HEIGHT% = 100%
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    고정 크기 조정을위한 매개 변수

    %MINWIDTH% = Width . ‘px’
    %WIDTH% = Width . ‘px’
    %HEIGHT% = Height . ‘px’
    %PADDINGTOP%
      if (Aspect Ratio == “16:9”) {
        %PADDINGTOP% = 56%
      } elseif (Aspect Ratio == “4:3”) {
        %PADDINGTOP% = 75%
      } elseif {
      %PADDINGTOP% = (Height / Width * 100) . “%”
      }

    Brightcove 임베드 코드

    <div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
      <div style="padding-top: %PADDINGTOP%;">
        <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?playlistId=%PLAYLISTID%
          &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
          &%AUTOPLAY%
          &%MUTED%"
          allowfullscreen=””
          webkitallowfullscreen=””
          mozallowfullscreen=””
          style=" width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
        </iframe>
      </div>
    </div>

    구현 예

    인 페이지 삽입 광고 샘플 구현
    인 페이지 삽입 광고 샘플 구현

    자바 스크립트 (인 페이지) 재생 목록 플레이어 내장

    반응 형 사이징을위한 매개 변수 (최대 크기 포함)

    %MAXWIDTH% = Width . ‘px’
    %MINWIDTH% = 0px
    %PADDINGTOP% = na
    %WIDTH% = 100%
    %HEIGHT% = 65%
    %THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
    %THUMBNAILHEIGHT% = Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

    고정 크기 조정을위한 매개 변수

    %MAXWIDTH% = Width . ‘px’
    %MINWIDTH% = Width . ‘px’
    %PADDINGTOP% = na
    %WIDTH% = Width . ‘px’
    %HEIGHT% = Height . ‘px’
    %THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
    %THUMBNAILHEIGHT% =Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

    Brightcove 임베드 코드

    <style type="text/css">
      .vjs-playlist {
        background-color: #000000;
        width: %WIDTH%;
        height: calc (%THUMBNAILHEIGHT% + 16px);
        text-align: center;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        margin: 0;
        padding: 0;
      }
    
      .vjs-playlist-title-container {
        color: #FFFFFF;
        /*display: none;*/
        opacity: 1;
        font-size: 0.7em;
        font-family: sans-serif;
        font-weight: bold;
      }
    
      .vjs-playlist-now-playing-text {
        color: #FFFFFF;
        /*display: none;*/
        opacity: 1;
        font-size: 0.7em;
        font-family: sans-serif;
        font-weight: bold;
      }
    
      .vjs-up-next-text {
        color: #FFFFFF;
        /*display: none;*/
        opacity: 1;
        font-family: sans-serif;
        font-weight: bold;
        text-align: right;
      }
    
      .vjs-playlist-duration {
        color: #FFFFFF;
        /*display: none;*/
        opacity: 1;
        font-family: sans-serif;
        font-weight: bold;
      }
    
      .vjs-mouse.vjs-playlist {
        background-color: #000000;
      }
    
      li.vjs-playlist-item {
        background-color: #000000;
        height: %THUMBNAILHEIGHT%;
        width: %THUMBNAILWIDTH%;
        display: inline-block;
        border: 2px solid #000000;
        padding: 0;
        margin: 0;
        cursor: pointer;
        vertical-align: middle;
      }
    
      li.vjs-playlist-item:hover {
        border-color: #FFFFFF;
      }
    </style>
    <div style="
    display: block; position: relative; width: %WIDTH%; height: ; min-width:
    %MINWIDTH%; max-width: %MAXWIDTH%; ">
      <video-js data-playlist-id="%PLAYLISTID%" data-account="%ACCOUNTID%" data-player="%PLAYERID%" data-embed="default" data- usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript " class="video-js" controls %AUTOPLAY% %MUTED% style="
    width: %WIDTH%; height: %HEIGHT%; position: relative;
    top: 0px; bottom: 0px; right: 0px; left: 0px;
    “> </video-js> <script
    src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index .min.js "></script>
    <ol class="vjs-playlist vjs-csspointerevents vjs-mouse "></ol> </div>

    구현 예

    인 페이지 삽입 광고 샘플 구현
    인 페이지 삽입 광고 샘플 구현

    부록 A

    비디오 또는 재생 목록을 열기 전에 선택하지 않은 경우 player 내장 대화 상자, 비디오 또는 재생 목록 (및 필요한 경우 Brightcove 계정)을 대화 상자에서 선택할 수 있어야합니다. 대화 상자는 사용자에게 아래에 나열된 필드를 제공해야합니다.

    1. Brightcove 계정 : 아직 선택하지 않은 경우 사용자는 Brightcove 계정을 선택할 수 있어야합니다.
    2. 검색 필터 : 사용자는 검색된 문자열을 입력하여 표시된 비디오 또는 재생 목록을 필터링 할 수 있어야합니다. Brightcove 검색 API를 사용하는 경우 검색 문자열은 URI로 인코딩되어야합니다 (아래 예 참조).
    3. 폴더 : 사용자는 Brightcove 계정에서 폴더 이름을 선택하여 표시된 비디오 목록을 필터링 할 수 있어야합니다. Brightcove API는 폴더에 대한 내장 필터를 제공하지 않으므로 클라이언트 코드는 모든 비디오를 검색 한 다음 폴더별로 필터링해야합니다. (재생 목록에는 적용되지 않습니다)
    4. 한도: 사용자는 주로 검색 성능을 향상시키기 위해 반환되는 비디오 수를 제한 할 수 있어야합니다. Brightcove 검색을 사용할 때 지정할 수있는 최대 제한은 100입니다. 100 개가 넘는 비디오를 반환하려면 페이징 메커니즘을 구현해야합니다. 또한 사용자가 필터링 할 폴더를 선택한 경우 클라이언트는 페이징 메커니즘을 사용하여 계정의 모든 비디오를 요청한 다음 폴더별로 해당 목록을 로컬로 필터링하고 사용자 제한으로 지정된 비디오 수를 반환해야합니다. (재생 목록에는 적용되지 않습니다)
    5. 기준 : 사용자는 정렬 필드를 선택할 수 있어야합니다.
      1. 동영상의 경우 사용자는 동영상 이름, 업데이트 날짜, 생성 날짜, 시작 날짜 및 총 재생 횟수를 선택할 수 있어야합니다. 기본값은 업데이트 된 날짜 여야합니다.
      2. 재생 목록의 경우 사용자는 이름과 수정 날짜를 선택합니다. 기본값은 수정 날짜 여야합니다.
    6. 정렬 순서 : 사용자는 오름차순 또는 내림차순으로 정렬 순서를 선택할 수 있어야합니다. 기본값은 내림차순이어야합니다.

    대화 상자에는 다음과 같은 동작이 있어야합니다.

    1. 위의 사용자 선택에 따라 비디오 또는 재생 목록 목록을 표시하십시오. 사용자가 하나의 비디오 또는 하나의 재생 목록을 선택할 수 있습니다.
    2. 비디오 목록을 표시 할 때 :
      1. 활성 동영상 만 나열되어야합니다.
      2. 미리보기 이미지, 비디오 이름 및 ID가 표시되어야합니다.
      3. 하나의 비디오 만 선택할 수 있습니다.
    3. 재생 목록 목록을 표시 할 때 :
      1. 재생 목록이 수동 재생 목록 인 경우 재생 목록에 재생 목록 이름, ID 및 동영상 수를 표시하십시오.
      2. 재생 목록이 스마트 재생 목록 인 경우 동영상 수 대신 재생 목록 이름, ID 및 -를 표시하십시오.
      3. 하나의 재생 목록 만 선택할 수 있습니다.
    4. 새 브라우저 탭에서 비디오 또는 재생 목록 플레이어를 열 수있는 클릭 가능한 링크를 표시합니다.

    관련 Brightcove 설명서

    예제 대화 상자 구현

    비디오 선택

    비디오 선택 대화 상자
    비디오 선택 대화 상자

    재생 목록 선택

    재생 목록 선택 대화 상자
    재생 목록 선택 대화 상자

    URI 인코딩 예제

    1. 검색 문자열 : great+blue

      문자열 in CMS API 전화는 다음과 같아야합니다. great%2Bblue

      반환 된 동영상 : 단어가 포함 된 모든 항목 : greatblue[2-1]

    2. 검색 문자열 : great blue

      문자열 in CMS API 전화는 다음과 같아야합니다. great%20blue

      반환되는 동영상에는 모두 다음 단어가 포함됩니다. great OR blue[2-1]

    3. 검색 문자열 : "great blue"

      문자열 in CMS API 전화는 다음과 같아야합니다. %22great%20blue%22

      반환되는 동영상은 전체 구문을 포함하는 모든 것입니다. great blue[2-1]

    노트

    • [2-1] 줄기 모든 경우에 적용됩니다. 위에 표시된 것과 같은 검색은 제목이 비디오와 일치합니다. Great Blues 만큼 잘 Great Blue Heron.

    페이지 마지막 업데이트 : 13 Oct 2020