サポート サポート問い合わせ先 | システムステータス システムステータス

ビデオサイトマップジェネレータ

このサンプルは、を使用して動画サイトマップを生成する方法を示します。 CMS API.

概要

このアプリを使用する前に、あなたは読むべきです あなたのビデオコンテンツをインデックス可能にする ビデオサイトマップの目的とそれらを使用してそれらの生成を自動化するための戦略の理解を深める CMS API。 サイトマップ用のXMLを生成するのはかなり簡単です。 最大の課題は、ビデオごとに固有のURLを含める必要があることです。 CMS API この情報への自動アクセスはありません。 これを克服するために、あなたができることがいくつかあります。

  1. 動画が公開されているURLを動画メタデータに追加します。 これを行う最も簡単な方法は、 カスタムメタデータフィールド URLを保存します。
  2. URLパラメータを使用して動画を指定し、動画を1ページにまとめます。 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(該当する場合)
    • ビュー数
    • publication_date
    • 家族向けの
    • (地域)制限(該当する場合)
    • content_loc
    • 評価
    • プラットフォーム
    • 価格
    • needs_subscription
    • アップローダー
    • ライブ
    • タグ
    • カテゴリ
    • gallery_loc
  4. 次のように、必要な条件を満たさない場合、動画はスキップされます。
    • 動画ページのURLをカスタムフィールドに保存している場合は、そのカスタムフィールドに値が設定されていない動画
    • ビデオをホストするために単一のページを使用していて、 reference_id それらを含めるには、ビデオには reference_id
    • ビデオにサムネイル画像がありません
    • 動画にMP4表現がありません
    • 動画は非アクティブです
    • 動画は将来の開始予定です
    • 動画は現在の日付より前に終了するようにスケジュールされていました

    スキップされたビデオについては、理由とビデオIDを示すメッセージをブラウザのコンソールに記録します。

最後に、サイトマップを生成した後にそのサイトマップを検証する場合は、そのための無料のツールがWeb上にいくつかあります。

無料サイトマップバリデータ

資格情報を取得する

使用するには 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 サンプル:ビデオサイトマップジェネレータ ブライトコーブラーニングサービス(@rcrooks1969)上 コードペン.

CodePenの使用

上記のCodePenを効果的に使用するためのヒントをいくつか紹介します。

  • プレーヤーの実際の表示を切り替えるには、 Result ボタン。
  • ストリーミングを停止する場合は上部の HTML / CSS / JS ボタンを押して、1つのコードタイプを表示します。
  • ナビゲーションヘッダーの CodePenで編集 右上隅にあるこのCodePenを自分のアカウントにフォークします。
  • このサンプルに関連付けられているすべてのコードをこれで見つけます GitHubリポジトリ.

シングルページ

上記のように、すべてのビデオの場所に使用できるHTMLページを作成できます。 アプリは、ページで使用する動画IDを定義するクエリパラメータを使用して、ページのURLを変更します。 たとえば、アプリは、動画ページの場所について、次のような場所のURLを含むJSONを生成します。

            <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ラーニングサービスで使用されるプロキシは、Brightcoveドメインからの要求のみを受け入れます。)サンプルプロキシは、使用するものと非常に似ていますが、Brightcove以外のドメインからの要求をブロックするチェックがない場合は、次の場所にあります。 このGitHubリポジトリ。 また、そこでの使用のための基本的な手順や、プロキシの周囲にアプリケーションを構築するためのより詳細なガイドが含まれています。 REST APIの使用.


ページの最終更新日:12年2020月XNUMX日