支持 聯繫支持 | 系統狀況 系統狀態
頁面內容

    嵌入 Brightcove Player在CMS中

    本主題提供有關為CMS用戶提供對話框以允許他們嵌入 Brightcove Player 在頁面中。

    簡介

    當您的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作為最大寬度。

    整合方面的一般幫助 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

    示例實施

    樣例實施
    iframe示例實施

    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文檔

    對話框實現示例

    視頻選擇

    視頻選擇對話框
    視頻選擇對話框

    播放列表選擇

    播放列表選擇對話框
    播放列表選擇對話框

    URI編碼示例

    1. 搜索字符串: great+blue

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

      返回的視頻:所有包含以下字詞的視頻: greatblue[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.

    頁面最後更新於13年2020月XNUMX日