程式碼範例 下列程式碼範例示範 Brightcove 播放器的自訂和增強功能。標有雙星號**的樣本部分或全部取決於Video Cloud功能。 您還可以找到按字母順序排列的樣本列表這裡。 外游 (僅廣告) 播放器 此示例提供了輔助JavaScript函數，這些函數演示瞭如何動態調整<div>頁面DOM中的元素，將Brightcove Player注入其中，加載並播放廣告，然後刪除播放器 使用廣告捲動播放器進入檢視 在播放器中，請注意水平音量控制欄取代了默認的垂直控制欄。 水平音量控制（僅限 1.x 播放器） 在播放器中，水平音量控制條代替了默認的垂直控制條。 垂直體積 設置音量控件以顯示垂直滑塊，而不是默認的水平佈局。 播放列中的廣告指示器 此示例顯示了一個播放器，其中與視頻關聯的三個廣告提示點在播放欄中顯示為藍色標記。 使用 SSAI 外掛程式進行廣告 本示例使用VMAP文件中定義的IMA廣告在視頻流中投放服務器端廣告。有一個預捲，中捲和卷後廣告。VMAP文件在廣告配置中定義。 廣告倒數計時器 使用覆蓋插件為廣告創建倒數計時器。 與模式對話框的年齡門 此示例使用ModalDialog最初覆蓋播放器。當用戶通過單擊模態窗口確認年齡時，將顯示控件並播放視頻。 提示點顯示CTA ** 播放器根據提示點顯示兩個不同的CTA。第一個 CTA 會以 3 秒顯示，持續時間為 5 秒。第二個CTA在13秒時顯示，持續3秒。 動態號召性用語** 您將可以使用此播放器看到三種不同的號召性用語顯示技術。 播放/暫停iframe 父母的視頻 點擊播放或暫停按鈕（這是iframe父頁面的一部分），以查看其在iframe播放器中啟動了視頻的播放/暫停。 年齡門 此示例顯示一個疊加層，該疊加層隱藏了播放器控件和播放按鈕。當用戶通過單擊覆蓋圖確認年齡時，將顯示控件並播放視頻。 使用取消靜音按鈕自動播放 視頻的行為會有所不同，具體取決於您運行視頻的瀏覽器/平台。如果視頻將自動播放音頻，它會這樣做。否則，視頻將開始播放，但將顯示一個取消靜音按鈕。 背景視頻隨機播放列表** 在播放器中，您會看到從播放列表中隨機選擇的視頻，這些視頻會繼續作為背景視頻播放。在每個視頻的開頭，將顯示每個視頻的標題和描述。 背景視頻播放列表** 在播放器中，您將看到有四個連續播放為背景視頻的視頻。同樣，在每個視頻的開頭，每個視頻的標題和描述都顯示在背景視頻上。 全窗口背景視頻** 在本主題中，您將學習如何使用播放列表來提供背景視頻，並在調整瀏覽器窗口的大小時自動調整播放器的大小，以使視頻完全填滿瀏覽器窗口。 建立視訊迴圈 在某些情況下，您可能需要使用循環播放的視頻。本示例使視頻循環播放3次，然後停止視頻播放。 禁用進度清理器 播放視頻。請注意，您不能使用進度進度條來推進視頻。 當視訊開始時停止頁面上的其他播放程式 開始播放其中一個視頻。接下來，在其他播放器中播放視頻，然後在另一個正在播放的播放器中觀看視頻停止播放。 動態載入播放程式 在此示例中，單擊“添加播放器”按鈕以動態生成和加載播放器，然後播放視頻。 要求 JS 和布萊特灣玩家 在本主題中，您將學習如何在Brightcove Player中使用RequireJS，JavaScript文件和模塊加載器。 動態更改源視頻** 單擊播放器下方的按鈕以動態更改源視頻。 信息亭應用** 播放器將無限循環播放視頻對像數組中的視頻。 標題動畫 開始播放視頻。當您將鼠標移到播放器上並從播放器上移開時，字幕將設置為動畫，以保持在控制欄上方。 顯示相關鏈接** 對於此示例，您將看到與播放器下方顯示的視頻相關的文本。您可以使用Studio的媒體>視頻信息部分來提供文本和關聯的鏈接。 在控制欄中顯示視圖 播放視頻時，您將在控制欄中看到視頻視圖。信息顯示為之前可能會稍有延遲。Analytics API異步查詢數據。 懸停時顯示縮圖 本示例使用ModalDialog來顯示從視頻中的各個點拍攝的四個縮略圖。這使用戶可以在視頻中看到一個潛行高峰。 顯示隨機保險槓 在此示例中，在播放列表中的每個視頻之前播放隨機選擇的保險槓。在這種情況下，保險槓是廣告，但不是從廣告服務器繪製的，而是在視頻雲庫中定義的視頻。 超鏈接公司徽標 本示例在播放器的控制欄中顯示公司徽標。選擇徽標會將您重定向到公司的網站。 燈箱旋轉木馬 瀏覽輪播中的視頻。選取縮圖，以在影像預視燈箱容器中播放視訊。顯示影像預視燈箱時，選取「關閉」連結以隱藏影像預視燈箱容器。 帶捲軸的燈箱 將滾動條拖動到縮略圖下方，以瀏覽視頻。選取要在影像預視燈箱容器中播放視訊的視訊。顯示影像預視燈箱時，選取「關閉」連結以隱藏影像預視燈箱容器。 簡單燈箱 本示例顯示一個交互式視頻海報圖像，該圖像會使用Brightcove Player打開一個燈箱。選擇海報圖像以在燈箱容器中播放視頻。 圖誌覆蓋外掛程式 在以下示例中，您將看到一個徽標顯示在播放器的左下角。視頻播放五秒鐘後，徽標將逐漸消失。 多重工作階段回放 播放視頻，然後在播放過程中將其停止。刷新頁面後，視頻將從您上次停下的位置繼續播放。 在視訊結束時導覽 在完成非常短的視頻後，您將看到一個覆蓋，其中顯示了指向Brightcove主頁的鏈接。使用了布萊特灣提供的覆蓋插件，因此不需要 JavaScript。CSS用於設置疊加層的樣式。 捲動播放器進入檢視 向內和向外滾動播放器。當播放器完全捲動到視圖中時，視訊就會開始播放。當您滾動播放器到視線之外時，視頻將停止播放。 切換覆疊 本示例使您可以切換交互式疊加的顯示。選擇“切換覆蓋”按鈕以顯示和隱藏覆蓋。 使用自定義事件觸發倒帶 開始播放視頻。然後點擊倒帶視頻按鈕。您應該看到視頻回放可以倒退5秒鐘。 下載視頻插件** 您將在控制欄的右側看到一個下載圖標，以下載播放器中加載的視頻的最高質量的MP4再現。 即時自訂錯誤訊息 播放器將無法連接到實時流。一個模式 Dialog 對象被創建，一個自定義圖像放置在其中，然後顯示模式對話框。如果關閉了ModalDialog，則顯示默認錯誤。 玩家造型遊樂場 在本主題中，您將使用如下所示的Codepen作為樣式操場。在codepen.io網站上進行查看以進行更改，並隨意派生Codepen供您自己使用。 水平響應播放列表 您將在播放器下方看到水平播放列表。如果您調整瀏覽器的大小，將會看到播放器和播放列表的大小都已調整。 播放列表中觀看次數最多的視頻** 在以下示例中，您將看到播放器的播放列表顯示在右側。通過使用Brightcove Player目錄檢索基於大多數播放次數的最受歡迎的視頻來填充播放列表。 播放列表中的最新視頻** 在以下播放器中，您會看到一個播放列表，其中包含添加到知識團隊帳戶中的10個最新視頻。 播放API分頁** 本示例使用Brightcove播放器在播放器中顯示視頻以及播放列表中的前3個視頻。選擇“下一個視頻”按鈕以顯示播放列表中的下三個視頻。 熱門影片疊加** 當您暫停視頻或視頻結束時，將顯示疊加層。系統會顯示收Analytics API到過去 24 小時內觀看最多 6 部影片的請求，以及 API 回應。 熱門影片播放清單** 檢索視頻數據後，播放列表將自動出現。系統會顯示收Analytics API到過去 24 小時內觀看最多 6 部影片的請求，以及 API 回應。 播放列表中的相關視頻** 當播放暫停或結束時，此示例顯示相關視頻縮略圖的交互式疊加。 通過標籤（CMS API）相關的視頻** 當播放暫停或結束時，此示例顯示相關視頻縮略圖的交互式疊加。 通過標籤關聯的視頻（播放API）** 當播放暫停或結束時，此示例顯示相關視頻縮略圖的交互式疊加。 分頁播放列表** 在選項卡式導航中選擇一個選項卡可在播放列表之間切換。在播放列表中選擇一個視頻以開始播放視頻。 所有時間的視頻觀看次數 下面的播放器包括一個播放列表，向您顯示用於檢索所有時間視圖的代碼將與該播放列表一起使用。它也可以與單個視頻播放器一起使用。 播放列表之前的視頻 創建啟用播放列表的播放器，以播放列表中未包含的視頻開始。 播放列表結尾的視頻 您會看到播放列表中有三個視頻。播放這三個影片後，播放清單中的另一部影片將會播放。不在播放列表中的視頻播放後，視頻播放停止。 播放速率調整器 將播放速率按鈕添加到Brightcove Player控制欄。 背景影片 使用Brightcove Player在您的網頁上播放背景視頻。 取得搜尋時間 當您單擊搜尋欄時，將在播放器下方顯示您單擊的時間。 進度列中的章節標記 在進度欄中創建標記以顯示定義的章節。 動態自定義最終屏幕 在自定義最終屏幕中添加與視頻數據關聯的鏈接。 你還在看嗎？ 在本主題中，您將學習如何創建Brightcove播放器，該播放器可以檢測觀看者何時停止觀看，同時不播放視頻。 放大滑鼠移動上的播放器 在本主題中，您將學習如何使用JavaScript和CSS將小型播放器懸停在其上，然後將其縮小至較小的大小。 浮動播放器 在本主題中，您將學習如何配置HTML / CSS / JavaScript以允許將播放器拖動到新位置。這樣，即使用戶上下滾動頁面，播放器的位置也將保持固定。 限制遊戲 在本主題中，您將學習如何使用Brightcove Player來限制用戶在一天內觀看視頻的次數。 註冊以播放 在本主題中，您將學習如何使用Brightcove Player，用戶必須填寫表格才能觀看視頻。 預覽後註冊播放 在本主題中，您將學習如何使用Brightcove Player，在顯示簡短預覽後，用戶必須填寫表格才能觀看視頻。 檢視影片的密碼 在本主題中，您將學習如何要求密碼才能觀看視頻。 切換控制列 在本主題中，您將學習如何使按鈕切換控制欄的顯示。 後退前進按鈕 在本主題中，您將學習如何在控制欄中放置按鈕以使視頻後退和前進指定的秒數。 新增國旗至標題標籤 在本主題中，您將學習如何在國家標題標籤前面添加國家標誌。 下載成績單 在本主題中，您將學習如何使用字幕WebVTT文件並將其轉換為可下載的腳本。 下載音頻 在本主題中，您將學習如何創建鏈接，以允許下載在Brightcove Player中播放的音頻資產的最佳質量的MP4。 自動設定字幕語言 在本主題中，您將學習如何基於瀏覽器語言設置默認字幕語言。 自動設置音軌語言 在本主題中，您將學習如何基於瀏覽器語言設置默認的音軌語言。 垂直視訊 在本主題中，您將學習如何使用Brightcove Player顯示垂直視頻。
