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

    視頻站點地圖生成器

    此示例演示瞭如何使用生成視頻站點地圖 CMS API.

    簡介

    在使用此應用之前,您應該閱讀 使視頻內容可索引 以便更好地了解視頻站點地圖的目的和使用視頻站點地圖自動生成視頻的策略 CMS API。 為站點地圖生成XML非常簡單。 最大的挑戰是您需要為每個視頻添加唯一的網址,並且 CMS API 沒有自動訪問此信息的權限。 為了克服這個問題,您可以做幾件事:

    1. 將發布視頻的URL添加到視頻元數據中。 最簡單的方法是創建一個 自定義元數據字段 用於存儲URL。
    2. 使用URL參數將視頻託管在單個頁面上 id or reference_id 頁面中的自定義JavaScript將用於將視頻加載到 player.

      有多種方法來獲取頁面的特定URL參數的值。 以下是我們在一些示例應用程序中使用的功能:

                  /**
                   * gets value of a URL param on current page URL if exists
                   * @param {string} name the param you want the value of
                   * @return {string} result value of param if exists or null
                   */
                  function getURLparam(name) {
                      var regex,
                          results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                  }

      一旦有了 id or reference_id,您需要將其添加到 player。 具體操作方式取決於您是否使用標準(iframe)或高級(頁內) player 嵌入代碼。 可能最簡單,最安全的方法是 加載 player 動態 (或者不,如果由於某種原因不存在帶有id的URL參數)。

      可以用於此目的的HTML單頁示例是 單頁 以下部分。

    下面的示例應用程序允許您使用這兩種方法-您只需要通過在相應的字段中輸入信息來告訴您哪種方法即可。

    關於示例應用程序的注意事項:

    1. 該應用程序向 Analytics API 以獲得全時視頻觀看次數,因此,如果您提供的客戶端憑據不包含 Analytics API,應用程序將失敗。
    2. 最多可包含50,000個視頻,文件大小也有50mb的限制,如果少於50,000個視頻,您可能會遇到此限制。 如果要包含的視頻多於視頻,則必須將其拆分為多個站點地圖並添加站點地圖索引文件。 看到 Google的站點地圖文檔 了解更多信息。
    3. 由示例應用程序生成的站點地圖不包含某些視頻可選標籤(有關這些視頻的信息,請參見上面引用的Google文檔)。 如果要包括這些內容,可以從此應用程序中獲取代碼並創建修改後的版本。 JavaScript和HTML代碼中包含註釋,以指示您需要執行的操作。
      是否包含可選標籤
      包含的標籤 不包含標籤
      • player_loc
      • 為期
      • expiration_date(如果適用)
      • 查看次數
      • 發布日期
      • 家庭友善
      • (地理位置)限制(如果有)
      • content_loc
      • 等級
      • 平台
      • 價格
      • require_subscription
      • 上傳
      • 生活
      • 標籤
      • 類別
      • gallery_loc
    4. 如果視頻不符合必要條件,則會被跳過,如下所示:
      • 如果要將視頻頁面URL存儲在自定義字段中,則任何沒有該自定義字段值的視頻
      • 如果您使用單個頁面託管視頻,並使用 reference_id 包括它們,而視頻缺乏 reference_id
      • 該視頻沒有縮略圖
      • 該視頻沒有MP4格式
      • 視頻無效
      • 該視頻預定在將來的某個日期開始
      • 該視頻原定於當前日期之前結束

      請注意,對於任何被跳過的視頻,我都會向瀏覽器控制台記錄一條消息,指示原因和視頻ID。

    最後,如果您想在生成站點地圖後對其進行驗證,那麼網絡上有幾個免費的工具可用來進行驗證-例如:

    免費的Sitemap驗證器

    獲取憑證

    要使用 CMS API 您將需要適當的憑據。

    在大多數情況下,獲取憑據的最簡單方法是通過Studio Admin API身份驗證部分(需要您帳戶的管理員權限)。 看到 管理API身份驗證憑據 有關詳細信息。 在大多數情況下,您可能只想獲取所有權限 CMS API 操作:

    CMS API 權限
    CMS API 權限

    如果您所需的權限在Studio中不可用,或者您希望直接從 OAuth API,請使用您的選擇 獲取客戶憑證 下面列出的文件。 無論選擇哪個選項,都需要詢問正確的操作權限。 以下內容可與cURL,Postman或我們的在線應用程序結合使用,以獲取 CMS API:

                  "operations": [
                    "video-cloud/video/all",
                    "video-cloud/playlist/all",
                    "video-cloud/sharing-relationships/all",
                    "video-cloud/notifications/all"
                    "video-cloud/analytics/read"
                  ]

    示例應用

    源代碼

    在此找到與此樣本相關的所有代碼 GitHub存儲庫.

    示例應用

    見筆 CMS API 示例:視頻站點地圖生成器 通過Brightcove學習服務(@ rcrooks1969)上 CodePen.

    使用CodePen

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

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

    單頁

    如上所述,您可以創建一個HTML頁面,該頁面可用於每個視頻的位置。 該應用程序將使用查詢參數更改頁面的URL,該參數定義頁面應使用的視頻ID。 例如,應用程序將生成JSON,其中包含與視頻頁面位置類似的位置URL:

                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5984663997001]]>
                </loc>
                ...
                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5982130568001]]>
                </loc>

    請注意,只有視頻ID在更改。

    實際的HTML頁面讀取 videoId URL參數然後動態生成一個 player 使用從URL獲得的視頻ID。 整個HTML頁面如下所示:

                <!doctype html>
                <html>
                
                <head>
                  <meta charset="UTF-8">
                  <title>Load Player Dynamically from URL Param</title>
                  <!-- Page styles -->
                  <style>
                    .video-js {
                      width: 640px;
                      height: 360px;
                    }
                  </style>
                </head>
                
                <body>
                  <div id="placeHolder"></div>
                  <!-- custom script -->
                  <script type="text/JavaScript">
                    var myPlayer,
                      playerHTML,
                      playerData = {},
                      theURLParam = '',
                      // Set the account ID to your account
                      myAccountId = '1507807800001';
                
                     // Read URL param for video ID
                    theURLParam = geturlparam('videoId');
                
                    // Assign data for the player instantiation
                    playerData = {
                      'accountId': myAccountId,
                      'playerId': 'default',
                      'videoId': theURLParam
                    };
                
                    // Call function that builds player
                    addPlayer();
                
                    /**
                     * gets value of a url param on current page url if exists
                     * @param {string} name the param you want the value of
                     * @return {string} result value of param if exists or null
                     */
                    function geturlparam(name) {
                      var regex,
                        results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                    };
                
                    // Dynamically adds player to page
                    function addPlayer() {
                      // Dynamically build the player video element
                      playerHTML = '<video-js id=\"myPlayerID\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video-js>';
                      // Inject the player code into the DOM
                      document.getElementById('placeHolder').innerHTML = playerHTML;
                      // Add and execute the player script tag
                      var s = document.createElement('script');
                      s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
                      document.body.appendChild(s);
                      s.onload = callback;
                    }
                
                     // Initialize the player and start the video
                    function callback() {
                      myPlayer = bc('myPlayerID');
                      // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly
                      // myPlayer = bc(document.getElementById('myPlayerID'));
                      myPlayer.on('loadedmetadata', function () {
                        // Mute the audio track, if there is one, so video will autoplay on button click
                        myPlayer.muted(true);
                        myPlayer.play();
                      })
                    }
                  </script>
                </body>
                
                </html>

    您將必須輸入您的帳號。 有關代碼的完整說明,請參見 Brightcove Player 示例:加載 Player 動態 文件。

    代理代碼

    為了在此頁面上構建自己的示例應用程序版本,您必須創建並託管自己的代理。 (Brightcove Learning Services使用的代理僅接受來自Brightcove域的請求。)一個示例代理與我們使用的代理非常相似,但是沒有可以阻止來自非Brightcove域的請求的檢查。 這個GitHub倉庫。 您還將在此處找到使用它的基本說明,以及有關在Proxy中構建應用的更詳盡的指南。 使用REST API.


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