布萊特灣球員樣本：熱門影片重疊

限制

播放器範例

該播放器嵌入在下面的CodePen中。當您暫停視頻或視頻結束時，將顯示疊加層。系統會顯示收Analytics API到過去 24 小時內觀看最多 6 部影片的請求，以及 API 回應。

看筆熱門影片重疊/內幕通過Brightcove學習服務（ @ bcls1969） 上密碼筆。

原始碼

觀看GitHub上的完整解決方案。

使用的 API /外掛程式資源

播放器/HTML 配置

本節詳細說明玩家建立期間所需的任何特殊配置。此外，除了頁面內嵌播放程式實作程式碼之外，還會說明必須新增至頁面的其他 HTML 元素。

播放程式組態

此示例使用了響應播放器，但是您也可以將嵌入代碼用於固定播放器。

其他 HTML

請記得在播放程式內嵌程式碼中將id屬性新增至video標籤。

		<video-js id="myPlayerID"
			...

應用程式流程

這個應用程序背後的基本邏輯是：

• 獲取頁面DOM元素。
• 設置對Analytics API的請求。
• 調用代理代碼以向Analytics API發送請求。
• 格式化疊加層內容。
• 加載並播放熱門視頻。

獲取頁面DOM元素

獲取對該頁面的DOM元素的引用。我們將使用這些來顯示Analytics API請求和回應。另外，設置代理URL和Analytics API基本網址。

設置對Analytics API的請求

找到標記的代碼：

		// +++ Setup API request +++

該示例將返回6個具有昨天最多視頻觀看次數的視頻。

向Analytics API發出請求

找到標記的代碼：

		// +++ Make a request to the Analytics API +++

使用代理代碼將HTTP GET請求發送到Analytics API RESTful Web服務。將返回的數據解析為 JSON 格式。如果發生錯誤，請顯示錯誤訊息。

格式化覆蓋內容

找到標記的代碼：

		// +++ Format the overlay content +++

若要格式化覆疊內容，請執行下列動作：

1. 從Analytics API的響應中提取視頻ID。
2. 使用球員目錄獲取從Analytics API返回的每個視頻ID的視頻對象。
3. 生成疊加層的HTML。
4. 使用新建立的相關影片內容初始化覆蓋外掛程式。顯示覆蓋圖時，您會看到一個流行視頻縮略圖的網格。當視訊播放暫停或已結束時顯示覆蓋。播放主視訊時隱藏重疊。

加載並播放熱門視頻

找到標記的代碼：

		// +++ Load and play popular video +++

創建一個功能，以加載並開始播放用戶選擇的流行視頻。

應用程式樣式

CSS設置疊加層中視頻縮略圖的樣式。

外掛程式碼

通常，當將 JavaScript 轉換為布萊特灣播放器插件名義更改時，需要更改。一個必要的更改是用定義插件的代碼替換ready()方法的標準使用。

以下是將與播放器一起使用的 JavaScript 代碼的常用開始：

		videojs.getPlayer('myPlayerID').ready(function() {
			var myPlayer = this;
			...
		});

您將變更第一行，以使用標準語法來啟動 Brightcove 播放程式外掛程式：

		videojs.registerPlugin('pluginName', function(options) {
			var myPlayer = this;
			...
		});

如前所述，您可以在該文檔的相應GitHub存儲庫中看到該插件的JavaScript代碼： Popular-videos-overlay.js。

在播放器上使用外掛程式

一旦您將插件的 CSS 和 JavaScript 文件存儲在可訪問互聯網的位置，您可以使用該插件與播放器。在 Studio 的 PLAYS 模塊中，您可以選擇一個播放器，然後在插件部分將 URL 添加到 CSS 和 JavaScript 文件中，並添加名稱和選項，如果需要選項。