在此示例中，您將在設置的時間後看到覆蓋消息。該示例將在6秒內顯示覆蓋圖，但是時間是可配置的。如果查看者在指定時間內單擊該消息，則繼續播放。如果不是，則視頻暫停。如果您有較長的內容，則此技術很有用。這樣可以避免浪費帶寬的觀眾開始觀看視頻，然後又去做別的事情而又不想打斷它。
此範例使用位於 https://github.com/TylerZubke/Videojs-AFK-Monitor 的開放原始碼 Video.js 外掛程式。本文檔中的示例代碼將利用此插件。
看到筆你還在看嗎？由「好海灣學習服務」( @rcrooks1969 ) 編碼《守則》提交。
在 GitHub 上查看完整的解決方案。
以下是一些有效使用上述 CodePen 的提示：
以下是推薦的開發順序：
如需這些步驟的詳細資訊，請檢閱逐步操作：插件開發指南。
在開發 Brightcove 播放器的增強功能時，您需要決定代碼是否最適合 iframe 或頁內嵌實現。最佳實踐建議是構建一個插件以與 iframe 實現一起使用。使用 iframe 播放器的優點是：
雖然整合頁內嵌播放程式可能會比較複雜，但有時候您會針對該實作規劃程式碼。概括，這種方法是最好的時候包含的頁面需要與播放器進行通信。具體來說，這裡有一些例子：
即使您的最終實作未使用 iframe 程式碼，您仍然可以將頁面內嵌程式碼與 JavaScript 的外掛程式搭配使用，並為您的 CSS 使用個別檔案。這封裝了你的邏輯，以便您可以輕鬆地在多個玩家中使用它。
| API 方法 | API 事件 | 布萊特灣播放器外掛程式 |
|---|---|---|
| 添加類（） | 用戶活躍 | 覆疊外掛程式 |
| 去除屁股 () | 用戶無效 | |
| 暫停（） | ||
| 目前時間（） | ||
| 一個（） | ||
| 上（） | ||
| setTimeout（） | ||
| hasClass（） | ||
| 持續時間（） | ||
| 暫停（） | ||
| clearTimeout（） | ||
| 已開始（） | ||
| 埃爾（） |
本節詳細說明玩家建立期間所需的任何特殊配置。此外，除了頁面內嵌播放程式實作程式碼之外，還會說明必須新增至頁面的其他 HTML 元素。
您為此範例建立的 Brightcove 播放程式不需要特殊設定。
包含第三方插件的CSS和JavaScript文件。
這個應用程序背後的基本邏輯是：
useractive和userinactive事件會被監視以追蹤時間。使用最佳做法調用該插件，如下所示
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
可以使用許多選項來自定義插件。一些細節是：
showMessageAfter（以毫秒為單位）決定顯示按鈕之前的時間。
pausePlayerAfter（以毫秒為單位）選項也很有幫助。這是您允許用戶在播放器暫停之前單擊按鈕的時候。這使用戶有機會單擊按鈕而不會中斷視頻播放。CSS是第三方插件的一部分。
您將需要克隆存儲庫以訪問代碼，然後將其放置在Internet上可訪問的位置以供使用。
如前所述，您可以在本文檔的相應 GitHub 存儲庫中看到該插件的 JavaScript 代碼：視頻軟件監視器。
一旦您將插件的 CSS 和 JavaScript 文件存儲在可訪問互聯網的位置，您可以使用該插件與播放器。在工作室的播放器模塊中，您可以選擇一個播放器，然後在插件部分將 URL 添加到 CSS 和 JavaScript 文件中，如果需要選項，還可以添加名稱和選項。