入門
このアプリを使用する前に、あなたは読む必要がありますビデオコンテンツをインデックス可能にするビデオサイトマップの目的と、CMS APIを使用してそれらの生成を自動化するための戦略をよりよく理解するため。サイトマップのXMLの生成はかなり簡単です。最大の課題は、動画ごとに一意のURLを含める必要があることです。 CMS APIこの情報への自動アクセスはありません。これを克服するために、できることがいくつかあります。
- ビデオが公開されているURLをビデオメタデータに追加します。これを行う最も簡単な方法は、カスタムメタデータフィールド URLをに保存します。
- URLパラメータを使用してビデオを指定し、単一のページでビデオをホストします
idまたはreference_idページ内のカスタムJavaScriptは、ビデオをプレーヤーにロードするために使用します。ページの特定の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またはreference_id、プレーヤーに追加する必要があります。それをどのように行うかは、標準を使用しているかどうかによって異なります（iframe）または高度な（ページ内の）プレーヤー埋め込みコード。おそらく最も簡単で安全なことは にプレーヤーを動的にロードする（または、何らかの理由でIDを持つURLパラメーターが存在しない場合）。この目的に使用できるHTMLの単一ページの例は、単一ページ以下のセクション。
以下のサンプルアプリでは、どちらの方法も使用できます。適切なフィールドに情報を入力して、どちらの方法を使用するかを指定するだけです。
サンプルアプリに関する注意：
- アプリはにリクエストを行いますAnalytics API常時ビデオビューを取得するため、指定したクライアントクレデンシャルにAnalytics APIの権限が含まれていない場合、アプリは失敗します。
- 含めることができるビデオの最大数は50,000であり、ファイルサイズにも50 MBの制限があり、50,000未満のビデオでヒットする可能性があります。含める動画がそれより多い場合は、それらを複数のサイトマップに分割し、サイトマップインデックスファイルを追加する必要があります。見るGoogleのサイトマップドキュメント詳細については。
- サンプルアプリによって生成されたサイトマップには、ビデオのオプションのタグの一部が含まれていません（それらの詳細については、上記のGoogleドキュメントを参照してください）。これらを含めたい場合は、このアプリからコードを取得して、変更されたバージョンを作成できます。JavaScriptとHTMLコードには、何をする必要があるかを示すコメントがあります。
オプションのタグが含まれるかどうか 含まれているタグ タグは含まれていません - player_loc
- duration
- 有効期限（該当する場合）
- ビュー数
- publication_date
- 家族向けの
- （地理）制限（該当する場合）
- content_loc
- rating
- プラットフォーム
- 価格
- require_subscription
- アップローダ
- ライブ
- tag
- カテゴリー
- gallery_loc
- 次のように、必要条件を満たしていない場合、ビデオはスキップされます。
- ビデオページのURLをカスタムフィールドに保存している場合、そのカスタムフィールドの値を持たないビデオ
- 単一のページを使用してビデオをホストしていて、
reference_idそれらを含めるために、そしてビデオは欠けていますreference_id - ビデオにサムネイル画像がありません
- ビデオにはMP4レンディションがありません
- ビデオは非アクティブです
- ビデオは将来的に開始される予定です
- ビデオは現在の日付より前に終了するようにスケジュールされていました
スキップされたビデオについては、理由とビデオIDを示すメッセージをブラウザコンソールに記録することに注意してください。
最後に、サイトマップを生成した後で検証する場合は、そのための無料のツールがWeb上にいくつかあります。例：
資格情報を取得する
を使用するにはCMS API適切な資格情報が必要になります。
ほとんどの場合、資格情報を取得する最も簡単な方法は、Studioの管理API認証セクションを使用することです（アカウントに対する管理者権限が必要です）。詳細については、「 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 Learning Services（ @ rcrooks1969） オンCodePen。
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果 ] ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- 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パラメータは、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プレーヤーのサンプル：プレーヤーを動的にロードする資料。
プロキシコード
このページのサンプルアプリを独自のバージョンで作成するには、独自のプロキシを作成してホストする必要があります。（Brightcoveラーニングサービスで使用されるプロキシは、Brightcoveのドメインからのリクエストのみを受け付けます）。サンプルプロキシは、私たちが使用しているものと非常に似ていますが、BrightCove 以外のドメインからのリクエストをブロックするチェックがないサンプルプロキシは、この GitHub リポジトリにあります。また、そこで使用するための基本的な手順と、 REST API の使用で説明されているプロキシの周りにアプリを構築するためのより精巧なガイドがあります。