視訊縮圖格點

概覽

儘管光明灣畫廊提供了用於構建視頻門戶的強大系統，您還可以構建一個簡單的自己動手的門戶。如果您不想在使用者選擇視訊之前載入網頁上的播放程式，您可以顯示視訊縮圖格線，如此範例所示。選取縮圖後，會在頁面上載入 Brightcove 播放程式，並包含選取的視訊。

您將需要什麼

您需要建立此門戶網站的所有內容包括：

• 視訊雲端帳戶
• 啟用搜尋功能的原則金鑰，用於驗證播放 API 的要求
• 一些網站開發技巧（HTML，CSS 和 JavaScript）

設計考量

取得視訊資料

儘管無論是CMS API或者 Playback API 可用於獲取視頻數據，Playback API 是這裡顯而易見的選擇，原因有以下幾個：

• 因為回應資料會快取 (最多 20 分鐘)，所以要快得多
• 它返回播放視頻所需的所有數據，而CMS API需要兩個單獨的請求來獲取視頻元數據和視頻源
• 它是啟用 CORS 的，這意味著您不需要通過服務器端代理應用程序路由 API 請求

不過，播放 API 提供兩種擷取視訊資料的方式。有一個基本的方法可以通過 id（或引用 ID）獲取視頻，我們可以很容易地迭代一個 id 數組來請求每個 ID。然而，這並不是很有效。

一個更好的選擇是使用視頻搜索方法，它允許我們通過 id 查找所有的視頻，並通過一個請求返回它們。請求的搜索參數將如下所示：

q=id:6543217890%20id:1234567890%20id:987654321...

這%20在這個搜索字符串中是一個 URI 編碼的空間。有關搜索語法的詳細信息，請參閱CMS/播放 API：影片搜尋。

播放器

玩家沒有特殊要求-默認的布萊特灣播放器可以正常工作。

有些使用者根本無法觀看任何影片，因此在需要之前，使用頻寬載入播放器並沒有意義。我們將使用Brightcove 播放器加載器第一次選擇播放視頻時動態加載播放器。為了最大化效能，我們也將預先載入 Brightcove 播放器 JavaScript，但如果玩家裝載程式尚未存在，則玩家裝載程式會自動執行此動作。

取得原則金鑰

所有布萊特灣玩家都會自動產生原則金鑰。不過，基於安全考量，標準原則金鑰不會啟用使用播放 API 搜尋視訊。對於這個範例，我們確實想要啟用搜尋的金鑰。您可以使用策略接口 , 但最簡單的方法是使用Brightcove 學習示例應用程序並確保選中該選項以獲取啟用搜索的密鑰。

範例應用程式

此應用程式的程式碼

您可以在中找到此應用程序的代碼這個 GitHub 存儲庫 .

編碼器

看筆視頻網格示例通過 Brightcove 學習服務（ @rcrooks1969） 在代碼筆 .