soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Guía de aprendizaje: Uso de las API REST

    En este tema, primero obtendrá una descripción general de alto nivel sobre el uso de las API REST en aplicaciones web a través de XMLHttpRequest() y un proxy. Luego, más adelante en el documento, una inmersión más profunda discutirá el código de ejemplo. El primer ejemplo utiliza para recuperar y mostrar en la barra de control del reproductor de Brightcove el número de vistas que ha tenido el vídeo actualmente en el reproductor.Analytics API El segundo ejemplo, un poco más complejo, utiliza junto con el catálogo de Brightcove Player para recuperar los vídeos más populares de una cuenta y mostrarlos en una lista de reproducción.Analytics API La discusión de código en este documento se centrará en recuperar los datos deseados de la API REST correcta.

    Vista de alto nivel

    Para utilizar las API REST necesita tener algunas piezas en su lugar. Brevemente, son:

    • Código de cliente: El código de cliente solicita datos específicos y luego los muestra de acuerdo con los requisitos de la aplicación. El código del cliente se discutirá con cierta amplitud en este documento, ya que es lo que tendrá que escribir con mayor frecuencia.
    • Servidor proxy: Por razones de seguridad, las API REST no aceptarán solicitudes de datos directamente del cliente, ya que eso fomentaría el envío de información confidencial, como las credenciales del cliente, del cliente. Esto significa que un proxy actuará como intermediario entre el cliente y la API REST. El proxy utilizado en los ejemplos está escrito en PHP y discutido más adelante en este documento. El proxy debe configurarse en un servidor bajo su control y puede escribirse en el idioma de su elección. La configuración sugerida del proxy permite escribirlo una vez y ser utilizado por cualquiera de las API.
    • API REST: Brightcove proporciona un conjunto completo de API para personalizar, ampliar e integrar con la plataforma Brightcove. Consulte la descripción general: para obtener más información, documento API de Video Cloud.

    El siguiente diagrama muestra la interacción entre las tres entidades principales del proceso para recuperar datos de una de las API REST de Brightcove:

    Descripción general de piezas básicas

    Introducción a la funcionalidad del cliente

    El código del lado del cliente cambia significativamente dependiendo de la API que esté solicitando datos. Como se mencionó anteriormente, el proxy es una escritura una vez y no modifica fragmento de código, y Brightcove mantiene las API. Esta es la razón por la que el énfasis en el documento estará en aprender a modificar el código del cliente para recuperar los datos deseados de una de las API.

    El siguiente diagrama se centra en las partes clave del código del cliente, que son:

    • La función que hace el al proxy.HTTPRequest Para evitar ambigüedades, se nombra la función.makeRequest() Se muestra en la parte derecha del diagrama de abajo.
    • El código que recopila la información necesaria para la solicitud. Se muestra en la parte superior izquierda del diagrama. Este código suele ser bastante sencillo y utiliza conceptos bien conocidos por los programadores principiantes.
    • La llamada que ejecuta la función mencionada anteriormente.makeRequest() Se muestra en la parte inferior izquierda del diagrama. La llamada pasa una función a como parámetro.makeRequest() Luego, en esa función se llama.makeRequest() Este es un ejemplo de una función de devolución de llamada definida de forma anónima.

    Verá las dos secciones del diagrama con la etiqueta Actividad asíncrona. Aunque está representado en el diagrama en dos lugares diferentes, esta es en realidad la misma actividad asincrónica, y representa el tiempo desconocido que tarda:

    • El cliente para enviar la solicitud al proxy.
    • El proxy para solicitar datos de la API.
    • La API para construir el conjunto de resultados y devolverlo al proxy.
    • El proxy para devolver los datos al cliente.

    Tenga en cuenta que las flechas de flujo lógico de la caja que llama (cuadro inferior izquierdo) parecen indicar que el código se ejecuta en dos momentos diferentes, que es exactamente el caso.makeRequest() Se realiza la llamada a la función, pero la función de devolución de llamada no se ejecuta hasta que haya hecho su trabajo y se ejecuta la función de devolución de llamada, que devuelve los datos solicitados al código de llamada a la función.makeRequest()

    Introducción a la funcionalidad del cliente

    Tutorial de código de ejemplo

    En lugar de mirar el código como una sola pieza, se presentará y discutirá en secciones. Algunas de las secciones se relacionarán con el diagrama anterior.

    Código de reproductor estándar

    Esta sección de código contiene el código básico de inserción de la página de Brightcove Player.

    • Líneas 11-21: Código estándar de Brightcove Player con la adición de un atributo añadido. 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>

    Preparación para realizar una llamada

    Esta sección de código inicializa las variables y se prepara para realizar la llamada a.makeRequest() En términos generales, para una solicitud de lectura tendrá que proporcionar la siguiente información:

    1. La URL del proxy que utilizará, por ejemplo (por supuesto, esto debe ser proxy bajo su control):
      	https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php
    2. La URL necesaria para la solicitud real, normalmente construida dinámicamente:
      	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4825279519001
    3. El método HTTP, por ejemplo.GET

    A continuación se muestra un ejemplo:

    • Línea 1: Código estándar para esperar hasta que el reproductor esté listo para interactuar.
    • Líneas 2-4: Crear/establecer valores para las variables necesarias más adelante en el código.
    • Líneas 7-12: Espere el evento para que el objeto se complete.loadstartmediainfo Asigne variables para contener los valores necesarios para el Analytics API extremo.
    • Línea 13: Establezca el método HTTP para la llamada.
    	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";

    Llamar makeRequest()

    Esta sección de código hace que la llamada a la función.makeRequest() Tenga en cuenta que se pasan dos parámetros. El primero es el objeto options que contiene información para el extremo, y el segundo es la función de devolución de llamada. Recuerde, esta es una llamada asincrónica por lo que la función de devolución de llamada definida de forma anónima no será llamada hasta que la API REST haya devuelto los datos a la función.makeRequest()

    • Línea 1: Llame a la makeRequest() función, pasando los valores requeridos para la llamada en el options objeto. En este caso, el objeto contiene lo siguiente:
      options (objeto)
    • Líneas 3-13: La función de devolución de llamada se define como una función anónima (resaltada en amarillo). Recuerde que esta función es un parámetro y NO se llama aquí sino más tarde en el código.
    • Líneas 6, 8, 10: declaraciones que muestran:console.log()
      • La cadena JSON sin procesar que devuelve la llamada API.
      • El objeto JSON generado por el método que hace la conversión de cadena a objeto.JSON.parse()
      • El recuento de las vistas reales, extraído del objeto mediante notación simple.object.property
    • Línea 12: Llama a la función que muestra el número de vistas en la barra de control.

    La siguiente captura de pantalla de la consola muestra datos reales mostrados de las instrucciones:console.log

    Procesamiento de datos en función de devolución de llamada
    	// +++ 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() Función real

    Esta sección del documento examina el código que realmente define la función.makeRequest() El código que define la función está escrito de tal manera que NO necesita ser modificado, sino que se usa repetidamente tal como está. Puede encontrar casos extremos que esto no es cierto, pero para la gran mayoría de los usos este código NO necesita ser modificado.

    A continuación se muestra una discusión línea por línea del código:

    • Líneas 1-6: Definición de funciones y creación de variables. Un punto clave es que se crea un nuevo XMLHttpRequest objeto.
    • Líneas 8, 26: Define la función del controlador de eventos para los cambios.readyState
    • Líneas 9, 23, 25: Utilice un en caso de que la solicitud falla en un nivel alto.try-catch
    • Líneas 10, 11: Utilice instrucciones para asegurarse de que la solicitud ha finalizado (es 4) y se ha completado correctamente, el estado está en el rango 200.ifreadyState A continuación se muestra el registro de la consola de los valores y en la definición del controlador de eventos:readyStatestatus
      Registro ReadyState y estado
    • Línea 18: Se ejecuta la función de devolución de llamada. Esto pasa los datos devueltos de la API a la función de devolución de llamada como se detalla en la sección Call MakeRequest () anterior.
    • Línea 33: Establezca el controlador de eventos para el evento.XMLHttpRequest.onreadystatechange
    • Línea 35: Inicializa la solicitud al proxy.
    • Línea 38: Envía la solicitud, que es asincrónica.
    	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));
    	}

    Mostrar los datos devueltos

    Este código muestra cómo colocar los datos devueltos en la barra de control. Esta función se llama al final de la función de devolución de llamada, que se muestra en la sección Call MakeRequest () anterior.

    • Líneas 5, 16: Defina la función.
    • Línea 6: Cree una variable para el spacer elemento en la barra de controles.
    • Línea 7: Cree dinámicamente un div elemento.
    • Línea 9: Coloque una etiqueta y el valor de las vistas en el elemento recién creado.div
    • Línea 11: Utilice el método de JavaScript para obtener el elemento de la barra de control.document.getElementsByClassName()spacer
    • Línea 13: Estilo de para mostrar las vistas totales justificadas a la derecha y 10 px hacia abajo desde la parte superior de.spacerspacer
    • Línea 15: Agregue el elemento recién creado, rellenado y con estilo a la 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);
    	}

    Listado de código completo

    El código completo que funciona se encuentra en este repositorio de GitHub: display-views-in-controlbar.html.

    Depuración sencilla

    Como puede ver, hay una serie de piezas involucradas cuando se usan las API REST. Esto puede presentar desafíos cuando una aplicación no funciona correctamente. ¿Por dónde empezar a depurar?

    Un par de sencillas sugerencias se hacen en esta sección, y son un gran lugar para comenzar su aventura de depuración. Las dos secciones siguientes le dan una forma de ver la información más básica que necesita, qué se pasa para realizar la llamada y lo que se devuelve.

    Comprobación de las opciones de llamada

    El código del lado del cliente discutido en este documento es básicamente todo acerca de proporcionar las opciones correctas para ser usadas con el proxy, y a su vez la API real. Así que saber que las opciones son correctas es esencial para el correcto funcionamiento de su código. Una forma simple de hacer esto es registrar en la consola el options objeto justo antes de pasar a la makeRequest función donde se usan:

    opciones de registro de código de depuración

    Lo que contiene el objeto options variará según lo que está tratando de hacer, pero algunos conceptos básicos siempre estarán allí, los siguientes son:

    • El ID de cuenta. Puede ser una propiedad independiente o parte de la URL de EndPoint de API.
    • La URL del proxy, que dependerá de dónde almacene su proxy.
    • El tipo de método HTTP, por ejemplo, o.GETPOSTPATCH
    • La dirección URL de extremo de la API utilizada por el proxy para realizar la solicitud real de la API. Por ejemplo:
      	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

    Otras propiedades pueden ser necesarias en el objeto options dependiendo de la solicitud API. Aquí hay un ejemplo de lo que vería en la consola al registrar el objeto de opciones para hacer una solicitud para todos los jugadores en una cuenta específica:

    opciones de depuración simples

    Aquí hay un poco más complejo de opciones registradas objeto utilizado al actualizar jugadores:

    opciones de depuración

    Ver datos devueltos

    Lo que se devuelva variará según los datos solicitados y si se devuelve un error. Pero no importa lo que se devuelva, lo más probable es que desee ver qué datos se devuelven. Una forma simple de hacer esto es registrar en la consola los response datos sin procesar justo después de la llamada a la makeRequest función:

    opciones de registro de código de depuración

    Lo que se devolverá tiene posibilidades casi infinitas, pero los siguientes son algunos ejemplos. La primera muestra el comienzo de una respuesta cuando se pide a todos los jugadores de una cuenta:

    respuesta de depuración en la solicitud de los jugadores

    Aquí está la respuesta después de actualizar los reproductores, usando el método PATCH HTTP:

    respuesta de depuración en el parche del reproductor

    Aquí hay una vista más bien formateada de los datos en la primera respuesta:

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

    Y finalmente, aquí hay una respuesta muy valiosa de cuando ocurrió un error. En este caso, se estaba utilizando una cuenta sin las credenciales adecuadas:

    respuesta de depuración en caso de error

    Otros consejos para la solución de problemas

    Si tiene problemas, aquí hay algunas otras cosas a buscar.

    No obtener respuesta
    Hay un par de cosas para verificar si está recibiendo una respuesta vacía:
    • Compruebe la referencia de la API para asegurarse de que la solicitud devuelva una respuesta. Algunos solo devuelven una respuesta 201 o 204 sin contenido (especialmente, pero no solo, solicitudes DELETE). Tendrá que ajustar su código para manejar este caso.
    • Compruebe la sección Red de las Herramientas para desarrolladores en su navegador para asegurarse de que ve una llamada correcta al proxy (ese servidor podría no estar disponible temporalmente):
      Sección de Red de Herramientas de Desarrollador
      Sección de Red de Herramientas de Desarrollador
    Veo una respuesta, pero cuando intento JSON.parse() hacerlo, obtengo una excepción.
    Algunas posibilidades aquí:
    • Ver el elemento anterior: tratar de analizar una picadura vacía arrojará una excepción JSON
    • Mire la respuesta y asegúrese de que sea una cadena JSON (comenzando con a o a).{[ Hay algunos casos en los que una solicitud podría no devolver JSON, una llamada, por ejemplo, si establece el parámetro en o.Analytics APIformatcsvxlxs Nuevamente, si está haciendo ese tipo de solicitudes, deberá ajustar su código para manejar respuestas que no sean JSON.

    • En la mayoría de los casos, los errores devueltos por las API también están en formato JSON, pero hay algunas excepciones en las que el error se devuelve como texto sin formato o HTML.

    Código proxy

    Como se mencionó anteriormente, el proxy se puede escribir en el idioma de su elección. Los ejemplos de documentación de la API de Brightcove utilizan un proxy escrito en PHP. Dado que la implementación del proxy es tan dependiente del lenguaje, el código PHP a continuación no será analizado en detalle en este documento.

    La funcionalidad básica proporcionada por un proxy debe incluir:

    1. Acepte la solicitud del cliente.
    2. Obtenga un token de autenticación de la API de OAuth.
    3. Envíe el token de autenticación y la solicitud de datos (endpoint) a la API deseada.
    4. Reciba datos de la API.
    5. Enviar datos de vuelta al cliente.
    	<?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;
    	?>

    Aunque el código completo para el servidor proxy se muestra arriba, también se encuentra en el repositorio de GitHub: sample-proxy-apps en la carpeta php .

    Ejemplo 2

    Este segundo ejemplo es más complejo que el detallado anteriormente. En este ejemplo se muestran los 10 vídeos más populares de una cuenta de una lista de reproducción. Los pasos principales del código son:

    1. Solicite desde los 10 vídeos con mayor cantidad de vistas en una cuenta.Analytics API Este paso implica una llamada asincrónica usando una función de devolución de llamada.
    2. De los Analytics API datos devueltos, extraiga sólo los ID de vídeo y colóquelos en una matriz. Se escribe una función auxiliar para hacer la extracción de identificadores de los datos devueltos.
    3. Solicite los objetos de vídeo completos para cada uno de los vídeos de la lista de ID de la matriz. Este paso implica realizar un bucle sobre la matriz y solicitar los objetos de vídeo utilizando.player.catalog.getVideo() Por supuesto, esto implica múltiples llamadas asincrónicas usando el.catalog Se escribe una función auxiliar para recuperar los objetos de vídeo basados en ID y colocar los objetos en una matriz.
    4. Coloque la matriz de objetos de vídeo en la lista de reproducción de un reproductor habilitado para la lista de reproducción.

    Dado que ahora está familiarizado con muchos de los conceptos y el código específico sobre cómo llamar a las API, solo se detalla el código que llama a la función.makeRequest()

    • Línea 2: Llame a la makeRequest() función pasando como argumentos las opciones necesarias para una llamada a la API REST exitosa, junto con una función de devolución de llamada definida de forma anónima (resaltada en amarillo). Esto debería sonar familiar desde arriba. Muy importante, la función que se llama ES LA MISMA FUNCIÓN EXACTA UTILIZADA EN EL EJEMPLO ANTERIOR.makeRequest() Puedes hacer lo mismo en tu código. La función se escribió para ser reutilizada con cualquier llamada a una API REST de Brightcove.makeRequest()
    • Línea 3: Cree una variable para contener los datos devueltos analizados JSON.
    • Línea 5: Analizar los datos devueltos para convertir si de una cadena a un objeto.
    • Línea 7: Utilice la función auxiliar para extraer los ID de vídeo de los datos devueltos. Desafortunadamente, el no devuelve los objetos de vídeo completos, por lo que se necesitan ID para acceder a los objetos completos.Analytics API
    • Líneas 9-12: Llame a la función getVideoData auxiliar que utiliza una función de devolución de llamada para rellenar la videoObjects matriz basada en los identificadores pasados.
    • Línea 11: Rellene la lista de reproducción con la matriz de objetos de vídeo.
    	// +++ 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);
    		});
    	});

    Listado de código completo

    El ejemplo completo de funcionamiento se encuentra en este CodePen: Vídeos más vistos en una lista de reproducción.


    Última actualización de la página el 28-09-2020