布萊特灣球員樣本：在視訊結束時導覽

在本主題中，您將學習如何在視頻端顯示疊加層，單擊該疊加層可將頁面導航到新URL。

播放器範例

在完成非常短的視頻後，您將看到一個覆蓋，其中顯示了指向Brightcove主頁的鏈接。使用了布萊特灣提供的覆蓋插件，因此不需要 JavaScript。CSS用於設置疊加層的樣式。

看筆在視頻末尾導航通過Brightcove學習服務（ @ rcrooks1969）上密碼筆。

使用編碼器

以下是一些有效使用上述 CodePen 的提示：

按一下Result按鈕來切換播放器的實際顯示。
按一下HTML/CSS/JS按鈕以顯示其中一種代碼類型。
在本文件後面，應用程序中使用的邏輯，流程和樣式將在播放器 /HTML 配置，應用程序流程和應用程序樣式部分中討論。跟著這些章節中的資訊一起遵循的最佳方式是：
1. 點擊 CodePen 中的EDIT ON CODEPEN按鈕，並在一個瀏覽器/瀏覽器選項卡中提供的代碼。
2. 在 CodePen 中，調整您要顯示的程式碼。您可以在 CodePen 中變更不同的程式碼區段的寬度。
3. 在其他瀏覽器/瀏覽器選項卡中查看播放器 /HTML 配置，應用程序流程和/或應用程序樣式部分。您現在可以遵循程式碼說明，並同時檢視程式碼。

使用的 API /外掛程式資源

布萊特灣播放器外掛程式
顯示覆蓋外掛程式

應用程式樣式

CSS用於更改疊加層的外觀。在此示例中，使用的CSS是：

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

您需要更改CSS以定義所需的外觀，然後將CSS保存在Internet上可訪問的位置。您將在插件配置中指向此CSS。

播放器/HTML 配置

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

播放程式組態

在這種情況下，您將使用Studio添加顯示覆蓋插件。

開啟 PLAYER 模組並建立新的播放器，或找到您想要新增外掛程式的播放程式。
按一下播放程式的連結以開啟播放程式的屬性。
按一下左側導覽選單中的外掛程式。
接下來，單擊添加插件。
在「外掛程式名稱」中輸入overlay。

在這個網址中，輸入：

https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js

對於 CSS 網址，請輸入：

https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css

在 [選項 (JSON) ] 文字方塊中輸入組態選項。

{
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}

按一下「儲存」。
要發布播放器，請點擊發布和嵌入>發布更改。
要關閉打開的對話框，請單擊關。

其他 HTML

不會將其他 HTML 元素新增至頁面。