簡介
當您的CMS用戶嵌入視頻或播放列表時 player 在頁面中,您希望在生成廣告的過程中為他們提供盡可能多的靈活性 Brightcove player 嵌入代碼,以便他們可以控制廣告素材的外觀 Brightcove player 在網頁上,但不要期望他們是HTML或JavaScript專家。
本主題提供有關如何執行此操作的準則。 的 audience 本文檔主要是Brightcove合作夥伴,但對任何集成 Video Cloud 或獨立 Brightcove Player 與您的CMS。
Player 嵌入對話框行為
應該有一個對話框,允許用戶控制廣告的格式 player 在網頁上。 該對話框應允許用戶設置下面列出的字段。 假定在顯示此對話框之前,用戶已經選擇了Brightcove帳戶和視頻或播放列表。 否則,應首先按照以下步驟選擇Brightcove帳戶和視頻或播放列表: 附錄A 聯絡一位教師
- Player:用戶應該可以選擇一個 player 從可用 Brightcove players。 如果他們正在嵌入視頻 player,然後僅啟用非播放列表 players應該可以選擇。 如果他們正在嵌入播放列表 player,然後僅啟用播放列表 players應該可以選擇。
- 自動播放:用戶應該能夠啟用/禁用自動播放。 默認設置為禁用。
- 靜音:用戶應該能夠啟用/禁用靜音。 默認設置為禁用。
- 嵌入類型:用戶應該可以在iFrame和Javascript嵌入代碼之間進行選擇。
- 對於視頻 player,默認值為Javascript。
- 對於播放列表 player,默認值應為iFrame。
- 確認尺碼:用戶應該能夠在響應式之間進行選擇[1-1] 或固定大小[1-2].
- 對於視頻 player,默認值應為自適應。
- 對於播放列表 player:
- 如果是iFrame,則默認值應為自適應。
- 如果使用Javascript,則默認值為固定。
- 長寬比:用戶應該可以選擇寬高比[1-1].
- 選擇是:
16:9
4:3
Custom
- 默認值應為
16:9
.
- 選擇是:
- 寬度,高度:用戶應該能夠輸入寬度和高度[1-1].
- 如果寬高比為 16:9 or 4:3中, 身高 該字段應顯示為灰色,並根據 寬度 以及 長寬比.
- 默認值應為
640
寬度 以及360
身高 當“寬高比”為“自定義”時。
筆記
- [1-1] 如果CMS提供了一個本機容器來嵌入代碼,從而允許用戶指定“響應式”,“固定式”和“寬度/高度”,則使用該容器進行大小調整併讓Brightcove嵌入代碼始終具有響應性可能更有意義。
- [1-2] 下麵包含的響應式嵌入代碼使用Width作為最大寬度。
相關的Brightcove文檔
整合方面的一般幫助 Video Cloud 與您的CMS
獲取清單 players
識別播放列表 players
- 遍歷列表 player由傳回的 Player Management API 上面引用的請求。
- 尋找
playlist
領域:- 如果該字段存在並且值為
true
,這是一個播放列表 player - 如果值為
false
或者playlist
不存在,請執行下一步。
- 如果該字段存在並且值為
- 遍歷
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帳戶)。 該對話框應向用戶顯示以下字段:
- Brightcove帳戶: 如果尚未選擇一個Brightcove帳戶,則用戶應該能夠選擇該帳戶。
- 搜索過濾器: 用戶應該能夠輸入搜索字符串來過濾顯示的視頻或播放列表的列表。 如果使用Brightcove搜索API,則搜索字符串應為URI編碼(請參見下面的示例)。
- 夾: 用戶應該能夠從Brightcove帳戶中選擇文件夾名稱,以過濾顯示的視頻列表。 Brightcove API沒有為文件夾提供內置過濾器,因此客戶端代碼將需要檢索所有視頻,然後按文件夾進行過濾。 (不適用於播放列表)
- 限制: 用戶應該能夠限制返回的視頻數量,主要是為了提高搜索性能。 使用Brightcove搜索時,可以指定的最大限制為100。要返回100個以上的視頻,必須實現分頁機制。 另外,如果用戶選擇了要過濾的文件夾,則客戶端需要使用分頁機制請求帳戶中的所有視頻,然後在本地按文件夾過濾該列表,並返回用戶限制指定的視頻數。 (不適用於播放列表)
- 排序方式: 用戶應該能夠選擇排序字段。
- 對於視頻,用戶應該能夠選擇視頻名稱,更新日期,創建日期,開始日期和總播放次數。 默認值應為更新日期。
- 對於播放列表,用戶可以選擇名稱和修改日期。 默認值應為修改日期。
- 排序: 用戶應該能夠選擇升序或降序排序。 默認值應為降序。
該對話框應具有以下行為:
- 根據上面的用戶選擇顯示視頻或播放列表的列表。 允許用戶選擇一個視頻或一個播放列表。
- 顯示視頻列表時:
- 僅列出活動視頻。
- 應顯示縮略圖,視頻名稱和ID。
- 只能選擇一個視頻。
- 顯示播放列表時:
- 如果播放列表是手動播放列表,請顯示播放列表名稱,ID和播放列表中的視頻數。
- 如果播放列表是智能播放列表,請顯示播放列表名稱,ID和-代替視頻數量。
- 只能選擇一個播放列表。
- 顯示可點擊的鏈接,它將打開視頻或播放列表 player 在新的瀏覽器標籤中。
相關的Brightcove文檔
對話框實現示例
視頻選擇

播放列表選擇

URI編碼示例
-
搜索字符串:
great+blue
串入 CMS API 呼叫應為:
great%2Bblue
返回的視頻:所有包含以下字詞的視頻:
great
與blue
[2-1] -
搜索字符串:
great blue
串入 CMS API 呼叫應為:
great%20blue
返回的視頻全部包含以下單詞:
great
ORblue
[2-1] -
搜索字符串:
"great blue"
串入 CMS API 呼叫應為:
%22great%20blue%22
返回的視頻全部包含完整的短語:
great blue
[2-1]
筆記
- [2-1] 詞幹 適用於所有情況。 類似於上面顯示的搜索,將匹配標題為“
Great Blues
以及Great Blue Heron
.