嵌入 Brightcove Player在CMS中

簡介

當您的CMS用戶嵌入視頻或播放列表時 player 在頁面中，您希望在生成廣告的過程中為他們提供盡可能多的靈活性 Brightcove player 嵌入代碼，以便他們可以控制廣告素材的外觀 Brightcove player 在網頁上，但不要期望他們是HTML或JavaScript專家。

本主題提供有關如何執行此操作的準則。 的 audience 本文檔主要是Brightcove合作夥伴，但對任何集成 Video Cloud 或獨立 Brightcove Player 與您的CMS。

Player 嵌入對話框行為

應該有一個對話框，允許用戶控制廣告的格式 player 在網頁上。 該對話框應允許用戶設置下面列出的字段。 假定在顯示此對話框之前，用戶已經選擇了Brightcove帳戶和視頻或播放列表。 否則，應首先按照以下步驟選擇Brightcove帳戶和視頻或播放列表： 附錄A 聯絡一位教師

1. Player：用戶應該可以選擇一個 player 從可用 Brightcove players。 如果他們正在嵌入視頻 player，然後僅啟用非播放列表 players應該可以選擇。 如果他們正在嵌入播放列表 player，然後僅啟用播放列表 players應該可以選擇。
2. 自動播放：用戶應該能夠啟用/禁用自動播放。 默認設置為禁用。
3. 靜音：用戶應該能夠啟用/禁用靜音。 默認設置為禁用。
4. 嵌入類型：用戶應該可以在iFrame和Javascript嵌入代碼之間進行選擇。
   1. 對於視頻 player，默認值為Javascript。
   2. 對於播放列表 player，默認值應為iFrame。
5. 確認尺碼：用戶應該能夠在響應式之間進行選擇^[1-1] 或固定大小^[1-2].
   1. 對於視頻 player，默認值應為自適應。
   2. 對於播放列表 player:
      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] 下麵包含的響應式嵌入代碼使用Width作為最大寬度。

相關的Brightcove文檔

整合方面的一般幫助 Video Cloud 與您的CMS

將CMS與 Video Cloud

獲取清單 players

Player Management API 參考

識別播放列表 players

1. 遍歷列表 player由傳回的 Player Management API 上面引用的請求。
2. 尋找 playlist 領域：
   1. 如果該字段存在並且值為 true，這是一個播放列表 player
   2. 如果值為 false 或者 playlist 不存在，請執行下一步。
3. 遍歷 plugins 列出（如果有）並查找 registry_id 場等於 @brightcove/videojs-bc-playlist-ui; 如果存在，則為播放列表 player; 如果不是，則不是。 這是返回的樣本 player的清單：

   "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 已啟用，否則為 null 串
• %MUTED% =如果靜音 Muted 已啟用，否則為 null 串
• %ACCOUNTID% =用戶選擇的Brightcove帳戶ID
• %VIDEOID% =用戶選擇的視頻ID
• %PLAYLISTID% =用戶選擇的播放列表ID
• %PLAYERID% =用戶選擇的視頻 player ID或播放列表 player ID
• %CMS% = CMS名稱
• %CMSVERSION% = CMS版本
• %CONNECTORVERSION% =連接器的版本

iFrame視頻 player 嵌

自適應大小調整的參數（最大大小）

%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

示例實施

JavaScript（頁內） player 嵌

自適應大小調整的參數（最大大小）

%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播放列表 Player 嵌入

自適應大小調整的參數（最大大小）

%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>

示例實施

JavaScript（頁內）播放列表 player 嵌

自適應大小調整的參數（最大大小）

%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. 顯示可點擊的鏈接，它將打開視頻或播放列表 player 在新的瀏覽器標籤中。

相關的Brightcove文檔

• 將CMS與 Video Cloud
• 獲取視頻列表
• 獲取播放列表

對話框實現示例

視頻選擇

播放列表選擇

URI編碼示例

1. 搜索字符串： great+blue

   串入 CMS API 呼叫應為： great%2Bblue

   返回的視頻：所有包含以下字詞的視頻： great 與 blue^[2-1]

2. 搜索字符串： great blue

   串入 CMS API 呼叫應為： great%20blue

   返回的視頻全部包含以下單詞： great OR blue^[2-1]

3. 搜索字符串： "great blue"

   串入 CMS API 呼叫應為： %22great%20blue%22

   返回的視頻全部包含完整的短語： great blue^[2-1]

筆記

• ^[2-1] 詞幹 適用於所有情況。 類似於上面顯示的搜索，將匹配標題為“ Great Blues 以及 Great Blue Heron.