Contacter le support
L'état du systèmeXMLHttpRequest() 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:
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éemakeRequest(). 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 dansmakeRequest()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.
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
idattribut 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:
- 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 - L'URL nécessaire à la requête actuelle, normalement construite dynamiquement:
https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4825279519001 - 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 lemediainfol'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 leoptionsobjet. Dans ce cas, l'objet contient les éléments suivants:
- 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.propertynotation.
- 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:
// +++ 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
XMLHttpRequestl'objet est créé. - Lignes 8, 26: Définit la fonction du gestionnaire d'événements pour
readyStatechangements. - Lignes 9, 23, 25: Utiliser un
try-catchdans le cas où la demande échoue à un niveau élevé. - Lignes 10, 11: Utilisation
ifdéclarations pour être sûr que la demande est terminée (readyStateest 4) et terminé avec succès, le statut est dans la gamme 200. Ce qui suit montre la consignation de la console dureadyStateetstatusvaleurs dans la définition du gestionnaire d'événements:
- 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.onreadystatechangeun é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ôlespacerélément. - Ligne 13: Style le
spacerpour afficher les vues totales à droite et 10px vers le bas à partir du haut de laspacer. - 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:
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,POSTorPATCH. - 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:
Voici un objet d'options journalisées un peu plus complexe utilisé lors de la mise à jour players:
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:
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:
Voici la réponse après la mise à jour players, en utilisant PATCH Méthode HTTP:
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:
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
- 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 laformatparamètrecsvorxlxs. 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:
- Acceptez la demande du client.
- Munissez-vous d'un jeton d'authentification du OAuth API.
- Envoyez le jeton d'authentification et la demande de données (point de terminaison) à l'API voulue.
- Recevoir des données de l'API.
- 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:
- 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.
- 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.
- 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 lecatalog. Une fonction d'assistance est écrite pour extraire les objets vidéo en fonction des ID et placer les objets dans un tableau. - 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, lemakeRequest()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. lemakeRequest()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
getVideoDatafonction d'assistance qui utilise une fonction de rappel pour remplir levideoObjectstableau 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.