簡介
在本主題中，您將學習如何從CMS API並將其顯示在Brightcove Player的覆蓋圖中。當播放暫停或結束時，此重疊會在您的帳戶中顯示一組相關影片 (透過標籤/中繼資料)。另請參閱「熱門影片重疊」範例。
限制
播放器範例
當播放暫停或結束時，此示例顯示相關視頻縮略圖的交互式疊加。開始播放以下影片。當您暫停播放或影片結束時，將會出現相關視訊覆蓋。選取覆疊中的縮圖，載入播放器中的相關視訊並開始播放。
看筆Brightcove Player示例：通過標籤關聯的視頻（CMS API）通過Brightcove學習服務（ @ bcls1969） 上密碼筆。
原始碼
概覽
本示例使用用PHP內置的代理打電話給CMS API並在同一帳戶中搜索與播放器中加載的視頻具有相同標籤值的相關視頻。
如果您不熟悉CMS API，請先閱讀以下文檔：
使用編碼器
以下是一些有效使用上述 CodePen 的提示：
- 按一下Result按鈕來切換播放器的實際顯示。
- 按一下HTML/CSS/JS按鈕以顯示其中一種代碼類型。
- 在本文件後面，應用程序中使用的邏輯，流程和樣式將在播放器 /HTML 配置，應用程序流程和應用程序樣式部分中討論。跟著這些章節中的資訊一起遵循的最佳方式是：
- 點擊 CodePen 中的EDIT ON CODEPEN按鈕，並在一個瀏覽器/瀏覽器選項卡中提供的代碼。
- 在 CodePen 中，調整您要顯示的程式碼。您可以在 CodePen 中變更不同的程式碼區段的寬度。
- 在其他瀏覽器/瀏覽器選項卡中查看播放器 /HTML 配置，應用程序流程和/或應用程序樣式部分。您現在可以遵循程式碼說明，並同時檢視程式碼。
開發順序
以下是推薦的開發順序：
- 使用網頁內嵌播放程式實作來測試播放器、外掛程式和 CSS 的功能 (如果需要 CSS)
- 將插件的 JavaScript 和 CSS 放入單獨的文件中進行本地測試
- 一旦你解決了任何錯誤，將插件代碼和 CSS 部署到你的服務器
- 使用工作室將插件和 CSS 添加到您的播放器
- 如果您確定 iframe 實現更適合（詳見下一節），請替換頁內嵌播放器實現
如需這些步驟的詳細資訊，請檢閱逐步：外掛程式開發指南。
iframe 或頁內嵌
在開發 Brightcove 播放器的增強功能時，您需要決定代碼是否最適合 iframe 或頁內嵌實現。最佳實踐建議是構建一個插件以與 iframe 實現一起使用。使用 iframe 播放器的優點是：
- 沒有與現有的JavaScript 和/或CSS 發生衝突
- 自動回應
- iframe 簡化了社交媒體應用程序中的使用（或者每當視頻需要「旅行」到其他應用程序時）
雖然整合頁內嵌播放程式可能會比較複雜，但有時候您會針對該實作規劃程式碼。概括，這種方法是最好的時候包含的頁面需要與播放器進行通信。具體來說，這裡有一些例子：
- 包含頁面中的程式碼需要監聽播放器賽事並採取行動
- 播放器使用包含頁面的樣式
- iframe 將導致應用程序邏輯失敗，例如從包含頁面的重定向
即使您的最終實作未使用 iframe 程式碼，您仍然可以將頁面內嵌程式碼與 JavaScript 的外掛程式搭配使用，並為您的 CSS 使用個別檔案。這封裝了你的邏輯，以便您可以輕鬆地在多個玩家中使用它。
使用的 API /外掛程式資源
| API 方法 | API 事件 | 外掛程式 |
|---|---|---|
| 目錄. 取得視訊 () | 播放 | 視訊-覆疊 |
| 目錄. 載入 () | 結束 | |
| 播放（） |
播放器/HTML 配置
覆蓋外掛程式會在此範例的 JavaScript 程式碼中定義並初始化。它在這裡完成的原因是，我們需要在初始化覆蓋之前獲取相關的視頻元數據。
如果您想在播放器配置中包含覆蓋插件，您可以在視頻雲端工作室的播放器模塊中添加覆蓋 JavaScript 和 CSS 文件。在插件部分，將 Name 屬性保留空白，以便您可以在代碼中初始化插件。
其他 HTML
請記得在播放程式內嵌程式碼中將id屬性新增至video標籤。
<video-js id="myPlayerID"
...
應用程式流程
這個應用程序背後的基本邏輯是：
- 建立定義基礎CMS API URL 和代理伺服器代碼 URL 值的變數。
- 等待視訊開始載入以擷取視訊中繼資料。
- 設置CMS API的請求。
- 調用代理代碼以向CMS API獲取前9個相關視頻。
- 格式化覆蓋內容，以顯示每個相關視訊的縮圖。
- 當使用者選取其中一個相關的視訊縮圖時，然後將其載入播放器並開始播放。
定義值
建立定義基礎CMS API URL 和代理伺服器代碼 URL 值的變數。
等待已載入的中繼資料
找到標記的代碼：
// +++ Wait for loadedmetadata +++
聆聽loadedmetadata事件等待視訊開始載入。如此可確保mediainfo物件中可使用視訊中繼資料 (例如帳戶 ID、名稱和標籤值)。
設定 API 請求
找到標記的代碼：
// +++ Setup the API request +++
使用播放器中當前加載的視頻中的信息，創建一個CMS API在同一帳戶中搜索視頻請求。搜索將查找與當前視頻中的第一個標籤具有相同值的視頻。它將排除與當前視頻具有相同名稱的任何視頻，並將返回的視頻數量限制為 9。這就是我們的覆蓋佈局中有多少人適合。
使CMS API請求
找到標記的代碼：
// +++ Make the CMS API request +++
使用代理代碼將HTTP GET請求發送到CMS API RESTful Web服務。將返回的數據解析為 JSON 格式。如果發生錯誤，請顯示錯誤訊息。
格式化覆蓋內容
找到標記的代碼：
// +++ Format the overlay content +++
要格式化覆蓋內容，您將執行以下操作：
- 提取從CMS API返回的每個相關視頻的ID，名稱和縮略圖，並將其存儲在數組中。
- 循環瀏覽相關的視頻數組，創建一個視頻列表
<div>包裝器，其中包含每個相關視頻的<div>元素。這將成為覆蓋內容。 - 使用新建立的相關影片內容初始化覆蓋外掛程式。當重疊顯示時，您會看到相關視訊縮圖的格線。當視訊播放暫停或已結束時顯示覆蓋。播放主視訊時隱藏重疊。
載入及播放相關影片
找到標記的代碼：
// +++ Load and play related video +++
建立一個功能，載入並開始播放使用者所選取的相關視訊。
應用程式樣式
CSS 樣式的相關視頻縮圖格線的覆蓋。
外掛程式碼
通常，當將 JavaScript 轉換為布萊特灣播放器插件名義更改時，需要更改。一個必要的更改是用定義插件的代碼替換ready()方法的標準使用。
以下是將與播放器一起使用的 JavaScript 代碼的常用開始：
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
...
});
您將變更第一行，以使用標準語法來啟動 Brightcove 播放程式外掛程式：
videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});
如前所述，您可以在該文檔的相應GitHub存儲庫中看到該插件的JavaScript代碼： related-videos-cms.js。
在播放器上使用外掛程式
一旦您將插件的 CSS 和 JavaScript 文件存儲在可訪問互聯網的位置，您可以使用該插件與播放器。在 Studio 的 PLAYS 模塊中，您可以選擇一個播放器，然後在插件部分將 URL 添加到 CSS 和 JavaScript 文件中，並添加名稱和選項，如果需要選項。
代理代理代碼
為了建立您自己的版本此頁面上的範例應用程式，您必須建立並裝載您自己的 Proxy。（布萊特灣學習服務所使用的代理只接受來自布萊特灣域的請求。）一個示例代理，非常類似於我們使用的代理，但沒有阻止來自非 BrightCove 域的請求的檢查，可以在此 GitHub 存儲庫中找到。您還可以在那裡找到使用它的基本說明，以及在使用 REST API 中構建代理應用程序的更詳細的指南。