Paper Contacter le support | état du système L'état du système
Contenu de la page

    Guide d'apprentissage: Utilisation des API REST

    Dans cette rubrique, vous obtiendrez d'abord un aperçu de haut niveau de l'utilisation des API REST dans les applications Web via XMLHttpRequest() et un proxy. Plus tard dans le document, une plongée plus approfondie abordera un exemple de code. Le premier exemple utilise le Analytics API récupérer et afficher dans Brightcove player barre de contrôle le nombre de vues de la vidéo actuellement dans le player a eu. Le deuxième exemple, un peu plus complexe, utilise le Analytics API en conjonction avec l' Brightcove Player catalogue pour récupérer les vidéos les plus populaires d’un compte et les afficher dans une liste de lecture. La discussion de code dans ce document se concentrera sur la récupération des données souhaitées à partir de la bonne API REST.

    Vue de haut niveau

    Pour utiliser les API REST, vous devez disposer de quelques pièces. Brièvement, ils sont:

    • Code client: Le code client demande des données spécifiques puis les affiche en fonction des besoins de l'application. Le code du client sera discuté assez longuement dans ce document car c'est ce que vous devrez écrire le plus souvent.
    • Serveur proxy: Pour des raisons de sécurité, les API REST n'acceptent pas les demandes de données directement du client, car cela encouragerait l'envoi d'informations confidentielles, telles que les informations d'identification du client, par le client. Cela signifie qu'un proxy agira en tant qu'intermédiaire entre le client et l'API REST. Le proxy utilisé dans les exemples est écrit en PHP et discuté plus loin dans ce document. Le proxy doit être configuré sur un serveur sous votre contrôle et peut être écrit dans la langue de votre choix. La configuration suggérée du proxy lui permet d'être écrite une seule fois et utilisée par l'une des API.
    • API REST: Brightcove fournit un ensemble complet d'API pour personnaliser, étendre et intégrer avec la plate-forme Brightcove. Voir le Aperçu: Video Cloud Apis document pour plus d'informations.

    Le diagramme suivant montre l'interaction entre les trois entités principales du processus pour récupérer des données à partir de l'une des API REST de Brightcove:

    Vue d'ensemble des pièces de base

    Présentation de la fonctionnalité du client

    Le code côté client change considérablement en fonction de l'API à laquelle vous demandez des données. Comme mentionné ci-dessus, le proxy est une écriture unique et ne modifie pas le morceau de code, et les API sont maintenues par Brightcove. C'est pourquoi le document mettra l'accent sur l'apprentissage de la modification du code client pour récupérer les données souhaitées à partir de l'une des API.

    Le diagramme ci-dessous met l'accent sur les parties clés du code client, à savoir:

    • La fonction qui rend le HTTPRequest à la procuration. Pour éviter toute ambiguïté, la fonction est nommée makeRequest(). Il est illustré sur le côté droit du diagramme ci-dessous.
    • Le code qui regroupe les informations requises pour la demande. Il est illustré en haut à gauche du diagramme. Ce code est généralement assez simple et utilise des concepts bien connus des programmeurs débutants.
    • L'appel qui exécute le précédemment mentionné makeRequest() fonction. Il est illustré en bas à gauche du diagramme. L'appel transmet une fonction à makeRequest() en tant que paramètre Puis dans makeRequest() cette fonction s'appelle. Ceci est un exemple de définition anonyme rappeler la fonction.

    Vous voyez les deux sections du diagramme étiquetées Activité asynchrone. Bien que représenté dans le diagramme à deux endroits différents, il s'agit en fait de la même activité asynchrone, et représente le temps inconnu qu'il faut pour:

    • Le client à envoyer la demande au proxy.
    • Le proxy pour demander des données à partir de l'API.
    • L'API pour générer le jeu de résultats et le renvoyer au proxy.
    • Le proxy pour renvoyer les données au client.

    Notez que les flèches de flux logique de la boîte qui appelle makeRequest() (case en bas à gauche) semble indiquer que le code est exécuté à deux moments différents, ce qui est exactement le cas. L'appel à la fonction est effectué, mais la fonction de rappel n'est pas exécutée jusqu'à ce que makeRequest() a fait son travail et la fonction de rappel est exécutée, ce qui renvoie les données demandées au code appelant de la fonction.

    Présentation de la fonctionnalité du client

    Exemple de procédure de passage de code

    Plutôt que de regarder le code en une seule pièce, il sera présenté et discuté dans les sections. Certaines sections se rapporteront au diagramme ci-dessus.

    Livraison player code

    Cette section de code contient la base Brightcove Player code intégré dans la page.

    • Lignes 11-21: Standard Brightcove Player code avec l'ajout d'un id attribut ajouté.
    	<!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>

    Préparation à l'appel

    Cette section de code initialise les variables et se prépare à appeler makeRequest(). D'une manière générale, pour une demande de lecture, vous devrez fournir les informations suivantes:

    1. L'URL du proxy que vous utiliserez, par exemple (bien sûr, cela doit être un proxy sous votre contrôle):
      	https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php
    2. L'URL nécessaire à la requête actuelle, normalement construite dynamiquement:
      	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4825279519001
    3. La méthode HTTP, par exemple GET.

    Un exemple suit:

    • Ligne 1: code standard pour attendre que le player est prêt à interagir avec.
    • Lignes 2-4: Créer / définir des valeurs pour les variables nécessaires plus tard dans le code.
    • Lignes 7-12: Attendre le loadstart événement de sorte que le mediainfo l'objet est peuplé. Attribuer des variables pour contenir les valeurs nécessaires à la Analytics API point final.
    • Ligne 13: Définissez la méthode HTTP pour l'appel.
    	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";

    Appelez makeRequest()

    Cette section de code appelle à makeRequest() fonction. Notez que deux paramètres sont passés. Le premier est l'objet d'options qui contient des informations pour le noeud final, et le second est la fonction de rappel. N'oubliez pas qu'il s'agit d'un appel asynchrone. Par conséquent, la fonction de rappel définie de manière anonyme ne sera pas appelée tant que les données n'auront pas été renvoyées par l'API REST makeRequest() la fonction.

    • Ligne 1: appelez le makeRequest() fonction, en passant les valeurs requises pour l'appel dans le options objet. Dans ce cas, l'objet contient les éléments suivants:
      objet options
    • Lignes 3-13: La fonction de rappel est définie comme une fonction anonyme (surlignée en jaune). Rappelez-vous que cette fonction est un paramètre et PAS appelée ici mais plus tard dans le code.
    • Lignes 6, 8, 10: console.log() déclarations qui affichent:
      • La chaîne JSON brute renvoyée par l'appel API.
      • L'objet JSON généré par le JSON.parse() méthode qui effectue la conversion de chaîne en objet.
      • Les vues réelles comptent, extraites de l'objet en utilisant simple object.property notation.
    • Ligne 12: Appelle la fonction qui affiche le nombre de vues dans la barre de contrôle.

    La capture d'écran suivante de la console affiche les données affichées réelles console.log déclarations:

    Traitement des données dans la fonction de rappel
    	// +++ 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);
    	});

    Réel makeRequest() fonction

    Cette section du document examine le code qui définit réellement la makeRequest() une fonction. Le code qui définit la fonction est écrit de telle manière qu'il n'a PAS besoin d'être modifié, mais utilisé à plusieurs reprises tel quel. Vous pouvez trouver des cas extrêmes que ce n'est pas vrai, mais pour la grande majorité des utilisations, ce code n'a PAS besoin d'être modifié.

    Une discussion ligne par ligne du code suit:

    • Lignes 1-6: définition de fonction et création de variables. Un point clé est qu'un nouveau XMLHttpRequest l'objet est créé.
    • Lignes 8, 26: Définit la fonction du gestionnaire d'événements pour readyState changements.
    • Lignes 9, 23, 25: Utiliser un try-catch dans le cas où la demande échoue à un niveau élevé.
    • Lignes 10, 11: Utilisation if déclarations pour être sûr que la demande est terminée (readyState est 4) et terminé avec succès, le statut est dans la gamme 200. Ce qui suit montre la consignation de la console du readyState et status valeurs dans la définition du gestionnaire d'événements:
      Enregistrement de l'état et de l'état
    • Ligne 18: la fonction de rappel est exécutée. Cela transmet les données renvoyées de l'API à la fonction de rappel, comme indiqué dans le Appelez makeRequest () section ci-dessus.
    • Ligne 33: définissez le gestionnaire d'événements pour le XMLHttpRequest.onreadystatechange un événement.
    • Ligne 35: Initialise la demande au proxy.
    • Ligne 38: Envoie la requête, qui est asynchrone.
    	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));
    	}

    Afficher les données renvoyées

    Ce code montre comment placer les données retournées dans la barre de contrôle. Cette fonction est appelée à la fin de la fonction de rappel, indiquée dans Appelez makeRequest () section ci-dessus.

    • Lignes 5, 16: Définissez la fonction.
    • Ligne 6: Créer une variable pour le spacer élément dans la barre de contrôle.
    • Ligne 7: créez dynamiquement un div élément.
    • Ligne 9: placez une étiquette et la valeur des vues dans la nouvelle création div élément.
    • Ligne 11: Utiliser JavaScript document.getElementsByClassName() méthode pour obtenir la barre de contrôle spacer élément.
    • Ligne 13: Style le spacer pour afficher les vues totales à droite et 10px vers le bas à partir du haut de la spacer.
    • Ligne 15: Ajouter l'élément nouvellement créé, rempli et stylé au 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);
    	}

    Liste de code complète

    Le code de fonctionnement complet se trouve dans ce dépôt GitHub: display-views-in-controlbar.html.

    Débogage simple

    Comme vous le voyez, l'utilisation des API REST implique un certain nombre d'éléments. Cela peut présenter des difficultés lorsqu'une application ne fonctionne pas correctement. Où commencez-vous le débogage?

    Quelques suggestions simples sont présentées dans cette section et constituent un excellent point de départ pour votre aventure de débogage. Les deux sections suivantes vous permettent de voir les informations les plus élémentaires dont vous avez besoin, ce qui est transmis pour passer l'appel et ce qui est renvoyé.

    Vérification des options d'appel

    Le code côté client décrit dans ce document concerne essentiellement la fourniture des options correctes à utiliser avec le proxy et, en retour, avec l'API réelle. Donc, savoir que les options sont correctes est essentiel au bon fonctionnement de votre code. Un moyen simple de le faire est de vous connecter à la console le options objet juste avant qu'ils soient passés dans le makeRequest fonction où ils sont utilisés:

    options de journalisation du code de débogage

    Le contenu de l'objet options varie en fonction de ce que vous essayez de faire, mais certaines bases seront toujours là, à savoir:

    • L'identifiant du compte. Il peut s'agir d'une propriété distincte ou d'une partie de l'URL du point de terminaison de l'API.
    • L'URL du proxy, qui dépendra du lieu où vous stockez votre proxy.
    • Le type de méthode HTTP, par exemple GET, POST or PATCH.
    • URL du noeud final de l'API utilisée par le proxy pour effectuer la demande à partir de l'API. Par exemple:
      	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

    D'autres propriétés peuvent être requises dans l'objet options en fonction de la demande d'API. Voici un exemple de ce que vous verriez dans la console lors de la journalisation de l'objet options pour faire une demande pour tous les players dans un compte spécifique:

    options de débogage simples

    Voici un objet d'options journalisées un peu plus complexe utilisé lors de la mise à jour players:

    options de débogage

    Voir les données retournées

    Ce qui est renvoyé variera en fonction des données que vous avez demandées et si une erreur est renvoyée. Mais peu importe ce qui est renvoyé, vous voudrez probablement voir quelles données sont renvoyées. Un moyen simple de le faire est de se connecter à la console en mode brut response les données juste après l'appel du makeRequest fonction:

    options de journalisation du code de débogage

    Ce qui sera retourné a des possibilités presque infinies, mais voici quelques exemples. Le premier montre le début d'une réponse en demandant tous les players dans un compte:

    réponse de débogage sur players demande

    Voici la réponse après la mise à jour players, en utilisant PATCH Méthode HTTP:

    réponse de débogage sur player pièce

    Voici une vue plus joliment formatée des données dans la première réponse:

    	{
    		"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>"
    	}

    Et enfin, voici une réponse très utile de la part d’une erreur. Dans ce cas, un compte était utilisé sans les informations d'identification appropriées:

    réponse de débogage en cas d'erreur

    Autres conseils de dépannage

    Si vous rencontrez des problèmes, voici d'autres éléments à rechercher.

    Aucune réponse
    Il y a plusieurs choses à vérifier si vous obtenez une réponse vide:
    • Vérifiez la référence de l'API pour vous assurer que la demande renvoie une réponse. Certains renvoient uniquement une réponse 201 ou 204 sans contenu (en particulier, mais pas uniquement, les demandes DELETE). Vous devrez ajuster votre code pour gérer ce cas.
    • Vérifiez la section Réseau des Outils de développement de votre navigateur pour vous assurer que l'appel au proxy a réussi (ce serveur pourrait être temporairement indisponible):
      Section réseau des outils de développement
      Section réseau des outils de développement
    Je vois une réponse, mais quand j'essaie de JSON.parse() cela, je reçois une exception.
    Quelques possibilités ici:
    • Voir l'élément précédent - essayer d'analyser une analyse vide générera une exception JSON
    • Examinez la réponse et assurez-vous qu’il s’agit d’une chaîne JSON (commençant par un { ou [). Il existe quelques cas où une demande peut ne pas renvoyer JSON - un Analytics API appeler, par exemple, si vous définissez la format paramètre csv or xlxs. Encore une fois, si vous faites ce type de demandes, vous devrez ajuster votre code pour gérer les réponses non JSON.

    • Dans la plupart des cas, les erreurs renvoyées par les API sont également au format JSON, mais il existe quelques exceptions où l'erreur est renvoyée sous forme de texte brut ou HTML.

    Code de proxy

    Comme mentionné précédemment, le proxy peut être écrit dans la langue de votre choix. Les exemples de documentation de l'API Brightcove utilisent un proxy écrit en PHP. Étant donné que l'implémentation du proxy dépend du langage, le code PHP ci-dessous ne sera pas analysé en détail dans ce document.

    La fonctionnalité de base fournie par un proxy doit inclure:

    1. Acceptez la demande du client.
    2. Munissez-vous d'un jeton d'authentification du OAuth API.
    3. Envoyez le jeton d'authentification et la demande de données (point de terminaison) à l'API voulue.
    4. Recevoir des données de l'API.
    5. Envoyer les données au client.
    	<?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;
    	?>

    Bien que tout le code du serveur proxy soit présenté ci-dessus, il se trouve également dans le référentiel GitHub: exemples de proxy de php dossier.

    Exemple 2

    Ce deuxième exemple est plus complexe que celui détaillé précédemment. Cet exemple affiche les vidéos 10 les plus populaires d'un compte dans une playlist. Les principales étapes du code sont:

    1. Demande du Analytics API les vidéos 10 avec le plus de vues dans un compte. Cette étape implique un appel asynchrone utilisant une fonction de rappel.
    2. Du retour Analytics API données, extraire uniquement les identifiants vidéo et les placer dans un tableau. Une fonction d'assistance est écrite pour extraire les identifiants des données renvoyées.
    3. Demandez les objets vidéo complets pour chacune des vidéos dans la liste des ID du tableau. Cette étape consiste à boucler le tableau et à demander les objets vidéo en utilisant player.catalog.getVideo(). Bien sûr, cela implique plusieurs appels asynchrones en utilisant le catalog. Une fonction d'assistance est écrite pour extraire les objets vidéo en fonction des ID et placer les objets dans un tableau.
    4. Placez le tableau d'objets vidéo dans la liste de lecture pour une liste de lecture activée player.

    Puisque vous connaissez maintenant de nombreux concepts et codes spécifiques sur la façon d'appeler les API, seul le code qui appelle le makeRequest() la fonction est détaillée.

    • Ligne 2: appelez le makeRequest() fonction passant en argument les options nécessaires à un appel d'API REST réussi, ainsi qu'une fonction de rappel anonyme (surlignée en jaune). Cela devrait sembler familier d'en haut. Très important, le makeRequest() La fonction qui est appelée EST LA MÊME FONCTION EXACTE UTILISÉE DANS L'EXEMPLE PRÉCÉDENT. Vous pouvez faire la même chose dans votre code. le makeRequest() a été écrite pour être réutilisée avec tous les appels à une API REST Brightcove.
    • Ligne 3: créez une variable pour contenir les données renvoyées par JSON analysées.
    • Ligne 5: analyser les données renvoyées pour convertir si d'une chaîne en un objet.
    • Ligne 7: utilisez la fonction d'assistance pour extraire les ID vidéo des données renvoyées. Malheureusement, le Analytics API ne renvoie pas les objets vidéo complets; des ID sont donc nécessaires pour accéder à ces objets.
    • Lignes 9-12: Appelez le getVideoData fonction d'assistance qui utilise une fonction de rappel pour remplir le videoObjects tableau basé sur les ID transmis.
    • Ligne 11: remplit la liste de lecture avec le tableau d'objets vidéo.
    	// +++ 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);
    		});
    	});

    Liste de code complète

    L'exemple complet et fonctionnel se trouve dans ce CodePen: Vidéos les plus regardées dans une liste de lecture.


    Dernière mise à jour de la page le 12 juin 2020