概覽
若要了解有關此範例應用程式架構的一般方法，特別是驗證和 AJAX 實作，請參閱使用 HttPreQuest 的範例。
應用架構
這個應用程式的高階應用程式邏輯如下所示：
- 收集存取帳戶所需的使用者資料
- 按鈕點擊時，執行 AJAX 調用以檢索所有播放器信息
- 在 AJAX 調用成功執行以下操作：
- 將 JSON 響應數據注入 HTML 頁面
- 動態構建 HTML，在有序列表中顯示播放器信息並將其注入到 HTML 頁面
範例應用程式
原始碼
在中找到與此示例關聯的所有代碼這個GitHub倉庫。
範例應用程式
看筆顯示播放器通過Brightcove學習服務（ @ rcrooks1969） 上密碼筆。
使用編碼器
以下是一些有效使用上述 CodePen 的提示：
- 按一下「結果」按鈕，切換播放器的實際顯示。
- 按一下 HTML/CSS/JS 按鈕以顯示其中一種程式碼類型。
- 按一下右上角的 CodePen 上的 [編輯 ]，將此 CodePen 分支到您自己的帳戶。
- 在此 GitHub 存放庫中找到與此範例相關聯的所有程式碼。
代理代理代碼
為了建立您自己的版本此頁面上的範例應用程式，您必須建立並裝載您自己的 Proxy。（布萊特灣學習服務所使用的代理只接受來自布萊特灣域的請求。）一個示例代理，非常類似於我們使用的代理，但沒有阻止來自非 BrightCove 域的請求的檢查，可以在此 GitHub 存儲庫中找到。您還可以在那裡找到使用它的基本說明，以及在使用 REST API 中構建代理應用程序的更詳細的指南。