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

    視頻縮略圖網格

    在此示例中,您將學習如何使用 Playback API 按ID檢索一組視頻,將其顯示在網格中,然後在 player 當用戶單擊縮略圖時-換句話說,建立一個簡單的視頻門戶。

    概述

    Brightcove公司 Gallery 提供了用於構建視頻門戶的強大系統,您還可以構建簡單的自己動手門戶。 如果您不想加載 player 在用戶選擇視頻之前,您可以在網頁上顯示視頻縮略圖網格,如本示例所示。 選擇縮略圖後, Brightcove Player 隨選定視頻一起加載到頁面上。

    您將需要什麼

    構建該門戶所需的全部是:

    • A Video Cloud 帳戶
    • 啟用搜索的策略密鑰,以驗證對 Playback API
    • 一些Web開發技能(HTML,CSS和JavaScript)

    設計注意事項

    獲取視頻數據

    儘管 CMS API 或者 Playback API 可用於獲取視頻數據, Playback API 在這裡是顯而易見的選擇,原因如下:

    • 由於響應數據被緩存(最多20分鐘),因此速度更快
    • 它會返回播放視頻所需的所有數據,而 CMS API 需要兩個單獨的請求才能獲取視頻元數據和視頻源
    • 它啟用了CORS,這意味著您不需要通過服務器端代理應用程序路由API請求

    然而,本 Playback API 提供了兩種獲取視頻數據的方式。 有一種通過ID(或參考ID)獲取視頻的基本方法,我們可以輕鬆地遍歷ID數組以請求每個ID。 但是,這不是很有效。

    更好的選擇是使用視頻搜索方法,該方法使我們能夠按ID查找所有視頻,並通過一個請求將其返回。 請求的搜索參數如下所示:

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

    %20 此搜索字符串中的是URI編碼的空間。 有關搜索語法的更多信息,請參見 CMS /Playback API:視頻搜索.

    player

    對此沒有特殊要求 player -默認 Brightcove Player 會很好的。

    有些用戶可能根本看不到任何視頻,因此沒有必要使用帶寬來加載視頻。 player 直到需要它為止。 我們將使用 Brightcove Player 裝載機 加載一個 player 第一次選擇播放視頻時動態地動態播放。 為了最大限度地提高性能,我們還將預加載 Brightcove Player JavaScript,但 player 如果尚不存在,loader將自動執行此操作。

    獲取策略密鑰

    將自動為所有策略生成策略密鑰 Brightcove Players。 但是出於安全原因,標準策略密鑰不允許使用以下內容搜索視頻: Playback API。 對於此示例,我們確實需要啟用搜索的鍵。 您可以使用 Policy API,但最簡單的方法是使用 Brightcove學習示例應用程序 並確保選中該選項以獲取啟用了搜索的鍵。

    示例應用

    這個應用程式的程式碼

    您可以在以下位置找到此應用的代碼 這個GitHub倉庫.

    Codepen

    見筆 視頻網格樣本 通過Brightcove學習服務(@ rcrooks1969) 上 CodePen.

    使用CodePen

    以下是有效使用上述CodePen的一些技巧:

    • 切換 player 通過點擊 結果 按鈕。
    • 點擊 HTML / CSS / JS 按鈕顯示一種代碼類型。
    • 點擊 在CodePen上編輯 在右上角將此CodePen分支到您自己的帳戶中。
    • 在此找到與此樣本相關的所有代碼 GitHub存儲庫.

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