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

学習ガイド:REST APIの使用

このトピックでは、まずWebアプリケーションでREST APIを使用する方法の概要を説明します。 XMLHttpRequest() とプロキシ。 次に、ドキュメントの後半で、サンプルコードについて詳しく説明します。 最初の例では、 Analytics API Brightcoveで取得して表示する player コントロールバー現在の動画の再生回数 player 持っていました。 XNUMX番目の、少し複雑な例では、 Analytics API と一緒に Brightcove Player カタログで最も人気のある動画をアカウントから取得し、再生リストに表示します。 このドキュメントでは、正しいREST APIから必要なデータを取得する方法を中心に説明します。

高レベルのビュー

REST APIを使用するには、いくつかの部分を配置する必要があります。 簡単に言えば、以下のとおりです。

  • クライアントコード:クライアントコードは特定のデータを要求し、アプリケーション要件に従って表示します。 最も頻繁に書く必要があるため、この文書ではクライアントコードについて説明します。
  • プロキシサーバー:セキュリティ上の理由から、クライアントの資格情報などの機密情報をクライアントから送信することを推奨するため、REST APIはクライアントから直接データ要求を受け付けません。 つまり、プロキシはクライアントとREST APIの間の仲介者として機能します。 サンプルで使用されているプロキシはPHPで書かれており、このドキュメントの後半で説明します。 プロキシは、管理下にあるサーバー上にセットアップする必要があり、任意の言語で記述することができます。 提案されたプロキシの設定により、APIを一度書き込んで使用することができます。
  • REST API:Brightcoveは、Brightcoveプラットフォームをカスタマイズ、拡張、統合するための包括的なAPIセットを提供しています。 を参照してください 概要: Video Cloud API 詳細はドキュメント。

次の図は、BrightcoveのREST APIのXNUMXつからデータを取得するプロセスのXNUMXつのコアエンティティ間の相互作用を示しています。

基本的なピースの概要

クライアント機能の概要

クライアント側のコードは、データをリクエストしているAPIに応じて大幅に変化します。 上記のように、プロキシはXNUMX回の書き込みでコードの一部を変更することはなく、APIはブライトコーブによって維持されます。 これが、ドキュメントで強調されているのは、APIのXNUMXつから必要なデータを取得するようにクライアントコードを変更する方法を学ぶことです。

以下の図は、クライアントコードの主要部分に焦点を当てています。

  • その機能は、 HTTPRequest 代理人に。 あいまいさを避けるため、関数の名前は makeRequest()。 下の図の右側に描かれています。
  • 要求に必要な情報を収集するコード。 これは図の左上に描かれています。 このコードは、通常、非常に単純で、プログラマーの初心者でもよく知られている概念を使用します。
  • 前述の呼び出しを実行する呼び出し makeRequest() 関数。 それはダイアグラムの左下に描かれています。 コールは、 makeRequest() パラメータとして使用します。 その後、 makeRequest() その関数が呼び出されます。 これは匿名で定義された例です 折り返し電話 機能。

図の2つのセクションにラベルがあります 非同期アクティビティ。 ダイアグラムでは2つの異なる場所に表示されていますが、実際には同じ非同期アクティビティであり、不明な時間が表示されます。

  • 要求をプロキシに送信するクライアント。
  • APIからデータを要求するプロキシ
  • 結果セットを構築してプロキシに返すAPI。
  • データをクライアントに返すプロキシ

論理フローの矢印は、 makeRequest() (左下のボックス)は、コードが2つの異なる時刻に実行されることを示しているようです。 関数の呼び出しは行われますが、コールバック関数は makeRequest() が完了し、コールバック関数が実行され、要求されたデータが関数呼び出しコードに返されます。

クライアント機能の概要

コード例のウォークスルー

コードをワンピースとして見るのではなく、セクションで説明します。 セクションのいくつかは上記の図に関連しています。

スタンダード player コード

このコードセクションには、 Brightcove Player ページはめ込み埋め込みコード

  • 11-21線:標準 Brightcove Player コードに id 属性が追加されました。
	<!doctype html>
	<html>
	
	<head>
		<meta charset="UTF-8">
		<title>Untitled Document</title>
	</head>
	
	<body>
	
	<video-js id="myPlayerID"
		data-video-id="3851380732001"
		data-account="1752604059001"
		data-player="HkAzSmB0l"
		data-embed="default"
		data-application-id
		class="video-js"
		controls
		width="640"
		height="360"></video-js>
	<script src="https://players.brightcove.net/1752604059001/HkAzSmB0l_default/index.min.js"></script>

電話をする準備をする

このコードセクションでは、変数を初期化し、 makeRequest()。 一般的に言えば、読み込み要求の場合、次の情報を提供する必要があります。

  1. たとえば、使用するプロキシのURL(もちろん、これはあなたのコントロール下にあるプロキシでなければなりません):
    	https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php
  2. 通常は動的に構築された実際のリクエストに必要なURL:
    	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4825279519001
  3. たとえば、HTTPメソッド GET.

例を次に示します。

  • 1行目:まで待機する標準コード player 対話する準備ができています。
  • 2-4:後でコードに必要な変数の値を作成/設定します。
  • 7-12行: loadstart イベントだから mediainfo オブジェクトに値が設定されます。 変数を割り当てて、その変数に必要な値を保持する Analytics API エンドポイントを使用して定義します
  • Line 13:コールのHTTPメソッドを設定します。
	videojs.getPlayer('myPlayerID').ready(function() {
	  var myPlayer = this,
		accountId = myPlayer.bcinfo.accountId,
		options = {};
	
		// +++ Wait for loadstart event so can use mediainfo object +++
		myPlayer.on('loadstart', function() {
			var videoId = myPlayer.mediainfo.id,
			baseURL = 'https://analytics.api.brightcove.com/v1/alltime/accounts/',
			endPoint = accountId + '/videos/' + videoId;
			options.proxyURL = "https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php";
			options.url = baseURL + endPoint;
			options.requestType = "GET";

コー​​ル makeRequest()

このコードセクションでは、 makeRequest() 関数。 2つのパラメータが渡されることに注意してください。 最初は、エンドポイントの情報を保持するオプションオブジェクトで、2番目はコールバック関数です。 覚えておいてください、これは非同期呼び出しです。匿名で定義されたコールバック関数は、REST APIによってデータが返されるまで呼び出されません makeRequest() 機能。

  • ライン1: makeRequest() 関数の呼び出しに必要な値を options オブジェクト。 この場合、オブジェクトには次のものが含まれます。
    オプションオブジェクト
  • 3-13行:コールバック関数は無名関数(黄色で強調表示)として定義されています。 この関数はパラメータであり、ここでは呼び出されず、コードの後半で呼び出されることに注意してください。
  • 6、8、10の行: console.log() 表示される文:
    • API呼び出しによって返される生のJSON文字列。
    • JSONオブジェクトによって生成されたJSONオブジェクト JSON.parse() 文字列からオブジェクトへの変換を行うメソッド。
    • シンプルを使用してオブジェクトから抽出した実際のビュー数 object.property 表記
  • Line 12:コントロールバーのビュー数を表示する関数を呼び出します。

コンソールからの次のスクリーンショットは、 console.log 文:

コールバック関数でのデータ処理
	// +++ Make the request to the Analytics API +++
	// Extract views from data returned by Analytics API
	makeRequest(options, function(viewsRaw) {
	var viewsCount;
	// Remove console.log command for production code
	console.log('viewsRaw', viewsRaw);
	viewsObject = JSON.parse(viewsRaw);
	console.log('viewsObject', viewsObject);
	viewsCount = viewsObject.alltime_video_views;
	console.log('views', viewsCount);
	// Call function to place data in controlbar
	placeCountInControlbar(viewsCount);
	});

実際 makeRequest() function

このドキュメントのこのセクションでは、実際に makeRequest() 関数。 関数を定義するコードは、変更する必要がないように書かれていますが、そのまま繰り返し使用されます。 これは真実ではないエッジケースを見つけるかもしれませんが、ほとんどの場合、このコードを変更する必要はありません。

コードの行ごとの議論は以下の通りです:

  • 1-6行目:関数定義と変数作成。 重要な点は、新しい XMLHttpRequest オブジェクトが作成されます。
  • 8、26:イベントハンドラ関数を定義します。 readyState 変更。
  • 9、23、25の行: try-catch 要求が高いレベルで失敗した場合
  • 行10、11:使用 if 要求が完了したことを確認するステートメントreadyState 4です)、正常に完了すると、ステータスは200の範囲になります。 以下は、 readyStatestatus イベントハンドラ定義内の値:
    準備状態とステータスのログ記録
  • Line 18:コールバック関数が実行されます。 これにより、APIから返されたデータがコールバック関数に戻されます。 makeRequest()を呼び出す 上記のセクション。
  • Line 33:XNUMXのイベントハンドラを設定します。 XMLHttpRequest.onreadystatechange イベント。
  • Line 35:プロキシへの要求を初期化します。
  • Line 38:リクエストを送信します。これは非同期です。
	function makeRequest(options, callback) {
	var httpRequest = new XMLHttpRequest(),
	response,
	requestParams,
	dataString,
	proxyURL = options.proxyURL,
	// response handler
	getResponse = function() {
	try {
		if (httpRequest.readyState === 4) {
			if (httpRequest.status >= 200 && httpRequest.status < 300) {
				response = httpRequest.responseText;
				// some API requests return '{null}' for empty responses - breaks JSON.parse
				if (response === '{null}') {
					response = null;
				}
				// return the response
				callback(response);
			} else {
				alert('There was a problem with the request. Request returned ' + httpRequest.status);
			}
		}
	} catch (e) {
		alert('Caught Exception: ' + e);
	}
	};
	/**
	* set up request data
	* the proxy used here takes the following request body:
	* JSON.stringify(options)
	*/
	// set response handler
	httpRequest.onreadystatechange = getResponse;
	// open the request
	httpRequest.open('POST', proxyURL);
	// set headers if there is a set header line, remove it
	// open and send request
	httpRequest.send(JSON.stringify(options));
	}

返されたデータを表示する

このコードは、返されたデータをコントロールバーに配置する方法を示しています。 この関数は、コールバック関数の最後で呼び出されます。 makeRequest()を呼び出す 上記のセクション。

  • 5、16:関数を定義します。
  • 6行: spacer コントロールバーの要素。
  • ライン7: div 要素。
  • Line 9:新しく作成されたビューにラベルと値を配置する div 要素。
  • 行11:JavaScriptを使用する document.getElementsByClassName() メソッドを取得する方法 spacer 要素。
  • ライン13:スタイル spacer 右揃えの合計ビューを表示し、上から10pxを表示する spacer.
  • Line 15:新しく作成され、入力され、スタイルが設定された要素を spacer.
	/**
	* Dynamically build a div that is then
	* placed in the controlbar's spacer element
	*/
	function placeCountInControlbar(viewsCount) {
	var spacer,
	newElement = document.createElement('div');
	//Place data in div
	newElement.innerHTML = "Total Views: " + viewsCount;
	//Get the spacer in the controlbar
	spacer = document.getElementsByClassName('vjs-spacer')[0];
	//Right justify content in the spacer and add top margin
	spacer.setAttribute('style', 'justify-content: flex-end; margin-top: 10px');
	//Add the dynamically built div to the spacer in the controlbar
	spacer.appendChild(newElement);
	}

完全なコードリスト

完全で機能するコードは、このGitHubリポジトリにあります。 display-views-in-controlbar.html.

簡単なデバッグ

ご覧のとおり、REST APIを使用するときにはいくつかの部分が含まれています。 これは、アプリケーションが正しく機能していないときに問題を引き起こす可能性があります。 どこでデバッグを始めますか?

このセクションではいくつかの簡単な提案があり、デバッグの冒険を開始するのに最適な場所です。 次の2つのセクションでは、必要な最も基本的な情報、通話のために渡される内容、返される内容を確認する方法を示します。

通話オプションの確認

このドキュメントで説明するクライアント側のコードは、基本的には、プロキシで使用する正しいオプションを指定し、実際のAPIを指定することです。 したがって、正しいオプションが正しいことが、コードの正しい機能に不可欠であることがわかっている。 これを行う簡単な方法は、コンソールへのログです。 options それらがオブジェクトに渡される直前のオブジェクト makeRequest それらが使用される関数:

デバッグコードログオプション

オプションオブジェクトに含まれる内容は、実行しようとしている内容によって異なりますが、いくつかの基本は常に存在します。

  • アカウントID。 これは、個別のプロパティまたはAPIのendPoint URLの一部になります。
  • プロキシのURL。プロキシを格納する場所に依存します。
  • HTTPメソッドタイプ。たとえば、 GET, POST or PATCH.
  • APIからの実際の要求を行うためにプロキシが使用するAPIエンドポイントURL。 例えば:
    	https://players.api.brightcove.com/v2/accounts/57838016001/players
    	https://edge.api.brightcove.com/playback/v1/accounts/1752604059001/videos/5842800655001
    	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4093643993001

APIリクエストによっては、オプションオブジェクトで他のプロパティが必要になる場合があります。 すべてのリクエストを行うためにオプションオブジェクトをログに記録すると、コンソールに表示される例 player特定のアカウントの場合:

単純なデバッグオプション

以下は、更新時に使用されるもう少し複雑なログオプションオブジェクトです。 players:

デバッグオプション

返されたデータの表示

返される内容は、要求したデータとエラーが返された場合に異なります。 しかし、何が返されても、返されるデータを確認したいと思うでしょう。 これを行う簡単な方法は、コンソールにraw response 呼び出し直後のデータ makeRequest 関数:

デバッグコードログオプション

返されるものにはほぼ無限の可能性がありますが、以下にいくつかの例を示します。 最初は、すべてを要求したときの応答の始まりを示しています playerアカウントのs:

デバッグ応答 playerリクエスト

これは更新後の応答です players、使用 PATCH HTTPメソッド:

デバッグ応答 player patch

最初のレスポンスのデータをよりうまくフォーマットしました。

	{
		"id": "1OHQdsTAr",
		"preview_url": "http://preview-players.brightcove.net/v2/accounts/.../master/index.html",
		"preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/.../master/in_page.embed",
		"preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/.../master/index.html' ...></iframe>"
	}

最後に、エラーが発生したときの非常に貴重な応答です。 この場合、適切な資格情報なしでアカウントが使用されていました。

エラー時のデバッグ応答

その他のトラブルシューティングのヒント

問題が発生している場合は、こちらをご覧ください。

応答が得られない
あなたが空の応答を得ているかどうかを確認するには、いくつかのことがあります:
  • 要求が応答を返すことを確認するには、APIリファレンスを確認してください。 コンテンツのない201や204レスポンスだけを返すものがあります(特に、DELETEリクエストだけでなく)。 このケースを処理するには、コードを調整する必要があります。
  • ブラウザの[開発ツール]の[ネットワーク]セクションで、プロキシの呼び出しが正常に行われていることを確認します(そのサーバーは一時的に使用できない可能性があります)。
    開発ツールネットワークセクション
    開発ツールネットワークセクション
私は応答を見るが、私が試みるとき JSON.parse() それは例外です。
いくつかの可能性はここにあります:
  • 前の項目を参照してください - 空のスティングを解析しようとするとJSON例外がスローされます
  • レスポンスを見て、それがJSON文字列であることを確認してください( { または [)。 リクエストでJSONが返されないケースがいくつかあります。 Analytics API たとえば、 format パラメータを csv or xlxs。 このようなリクエストを行う場合は、非JSONレスポンスを処理するコードを調整する必要があります。

  • ほとんどの場合、APIによって返されるエラーもJSON形式ですが、エラーがプレーンテキストまたはHTMLとして返される例外はいくつかあります。

プロキシコード

前述のように、プロキシは選択した言語で記述できます。 Brightcove APIドキュメントの例では、PHPで記述されたプロキシを使用しています。 プロキシの実装は言語に依存しているため、以下のPHPコードはこのドキュメントでは詳細に分析されません。

プロキシによって提供される基本的な機能には、

  1. クライアント要求を受け入れます。
  2. ゲット 認証トークン から OAuth API.
  3. 認証トークンとデータ要求(エンドポイント)を意図したAPIに送信します。
  4. APIからデータを受信します。
  5. データをクライアントに送り返します。
	<?php
	/**
	 * proxy for Brightcove RESTful APIs
	 * gets an access token, makes the request, and returns the response
	 * Accessing:
	 *     (note you should **always** access the proxy via HTTPS)
	 *     Method: POST
	 *     request body (accessed via php://input) is a JSON object with the following properties
	 *
	 * {string} url - the URL for the API request
	 * {string} [requestType=GET] - HTTP method for the request
	 * {string} [requestBody] - JSON data to be sent with write requests
	 * {string} [client_id] - OAuth2 client id with sufficient permissions for the request
	 * {string} [client_secret] - OAuth2 client secret with sufficient permissions for the request
	 *
	 * Example:
	 * {
	 *    "url": "https://cms.api.brightcove.com/v1/accounts/57838016001/video",
	 *    "requestType": "PATCH",
	 *    "client_id": "0072bebf-0616-442c-84de-7215bb176061",
	 *    "client_secret": "7M0vMete8vP_Dmb9oIRdUN1S5lrqTvgtVvdfsasd",
	 *    "requestBody": "{\"description\":\"Updated video description\"}"
	 * }
	 *
	 * if client_id and client_secret are not included in the request, default values will be used
	 *
	 * @returns {string} $response - JSON response received from the API
	 */
	
	// security checks
	// if you want to do some basic security checks, such as checking the origin of the
	// the request against some white list, this would be a good place to do it
	// CORS enablement and other headers
	header("Access-Control-Allow-Origin: *");
	header("Content-type: application/json");
	header("X-Content-Type-Options: nosniff");
	header("X-XSS-Protection");
	
	// default account values
	// if you work on one Brightcove account, put in the values below
	// if you do not provide defaults, the client id, and client secret must
	// be sent in the request body for each request
	$default_client_id     = 'YOUR_CLIENT_ID';
	$default_client_secret = 'YOUR_CLIENT_SECRET';
	
	// get request body
	$requestData = json_decode(file_get_contents('php://input'));
	
	// set up access token request
	// check to see if client id and secret were passed with the request
	// and if so, use them instead of defaults
	if (isset($requestData->client_id)) {
			$client_id = $requestData->client_id;
	}
	
	if (isset($requestData->client_secret)) {
			$client_secret = $requestData->client_secret;
	}
	
	$auth_string = "{$client_id}:{$client_secret}";
	
	// make the request to get an access token
	$request = "https://oauth.brightcove.com/v4/access_token?grant_type=client_credentials";
	$curl          = curl_init($request);
	curl_setopt($curl, CURLOPT_USERPWD, $auth_string);
	curl_setopt($curl, CURLOPT_POST, TRUE);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
	curl_setopt($curl, CURLOPT_HTTPHEADER, array(
		'Content-type: application/x-www-form-urlencoded',
	));
	
	$response = curl_exec($curl);
	$curl_info = curl_getinfo($curl);
	$php_log = array(
		"php_error_info" => $curl_info
	);
	$curl_error = curl_error($curl);
	
	curl_close($curl);
	
	// Check for errors
	// it's useful to log as much info as possible for debugging
	if ($response === FALSE) {
		log_error($php_log, $curl_error);
	}
	
	// Decode the response and get access token
	$responseData = json_decode($response, TRUE);
	$access_token = $responseData["access_token"];
	// get request type or default to GET
	$method = "GET";
	if ($requestData->requestType) {
			$method = $requestData->requestType;
	}
	
	// get the URL and authorization info from the form data
	$request = $requestData->url;
	// check for a request body sent with the request
	if (isset($requestData->requestBody)) {
		$data = $requestData->requestBody;
	}
		$curl = curl_init($request);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
		curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
		curl_setopt($curl, CURLOPT_HTTPHEADER, array(
			'Content-type: application/json',
			"Authorization: Bearer {$access_token}"
		));
		switch ($method)
			{
				case "POST":
					curl_setopt($curl, CURLOPT_POST, TRUE);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "PUT":
					// don't use CURLOPT_PUT; it is not reliable
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "PATCH":
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "DELETE":
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				default:
					// GET request, nothing to do;
			}
		$response = curl_exec($curl);
		$curl_info = curl_getinfo($curl);
		$php_log = array(
			"php_error_info" => $curl_info
		);
		$curl_error = curl_error($curl);
		curl_close($curl);
	
	// Check for errors and log them if any
	// note that logging will fail unless
	// the file log.txt exists in the same
	// directory as the proxy and is writable
	
	if ($response === FALSE) {
		log_error($php_log, $curl_error);
	}
	
	function log_error($php_log, $curl_error) {
		$logEntry = "\nError:\n". "\n".date("Y-m-d H:i:s"). " UTC \n" .$curl_error. "\n".json_encode($php_log, JSON_PRETTY_PRINT);
		$logFileLocation = "log.txt";
		$fileHandle      = fopen($logFileLocation, 'a') or die("-1");
		fwrite($fileHandle, $logEntry);
		fclose($fileHandle);
		echo "Error: there was a problem with your API call"+
		die(json_encode($php_log, JSON_PRETTY_PRINT));
	}
	
	// return the response to the AJAX caller
	echo $response;
	?>

プロキシサーバーのコード全体は上に表示されていますが、GitHubリポジトリにもあります。 sample-proxy-apps PHP フォルダにコピーします。

例2

この第2の例は、先に詳述した例より複雑です。 この例では、プレイリストのアカウントから10で最も人気のある動画を表示します。 コードの主なステップは次のとおりです。

  1. からのリクエスト Analytics API 10の動画はアカウントで最も多く再生されます。 このステップでは、コールバック関数を使用した非同期呼び出しが行われます。
  2. 返されたものから Analytics API ビデオIDのみを抽出し、配列に配置します。 返されたデータからIDの抽出を行うヘルパー関数が書き込まれます。
  3. 配列内のIDリスト内の各ビデオの完全なビデオオブジェクトを要求します。 このステップでは、アレイをループして、ビデオオブジェクトを要求する player.catalog.getVideo()。 もちろん、これには複数の非同期呼び出しが含まれます。 catalog。 ヘルパ関数は、IDに基づいてビデオオブジェクトを検索し、オブジェクトを配列に配置するために作成されます。
  4. ビデオオブジェクトの配列をプレイリスト対応のプレイリストに配置します player.

APIを呼び出す方法の概念と具体的なコードの多くを理解しているので、コードを呼び出すコード makeRequest() 機能は詳細です。

  • ライン2: makeRequest() 関数は引数として、成功したREST API呼び出しに必要なオプションと、匿名で定義されたコールバック関数(黄色で強調表示)を渡します。 これは上から慣れ親しんでいるはずです。 非常に重要なのは、 makeRequest() 前の例で使用されているような、同じ機能です。 コード内で同じことができます。 ザ makeRequest() 関数は、Brightcove REST APIへの呼び出しで再利用されるように作成されました。
  • Line 3:JSONで解析された返されたデータを保持する変数を作成します。
  • Line 5:文字列からオブジェクトにifを変換するために、返されたデータを解析します。
  • Line 7:ヘルパー関数を使用して、返されたデータからビデオIDを抽出します。 残念ながら、 Analytics API フルビデオオブジェクトを返さないため、フルオブジェクトにアクセスするためにIDが必要です。
  • 9-12線: getVideoData コールバック関数を使用して videoObjects 渡されたIDに基づいた配列。
  • Line 11:プレイリストにビデオオブジェクトの配列を取り込みます。
	// +++ Make the CMS API request to get matching video IDs +++
	makeRequest(options, function(mostWatchedVideos) {
		var JSONmostWatchedVideos;
		// Convert response string into JSON
		JSONmostWatchedVideos = JSON.parse(mostWatchedVideos);
		// Extract the needed video IDs into an array
		videoData = extractVideoData(JSONmostWatchedVideos);
		// Get video objects based on array of video IDs
		getVideoData(videoData, function(videoObjects) {
			// Add the most watched videos list to the player as a playlist
			myPlayer.playlist(videoObjects);
		});
	});

完全なコードリスト

完全に機能する例は、このCodePenにあります。 プレイリストの中で最も観られたビデオ.


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