Introduction
Dans ce document pas à pas, vous effectuerez les tâches suivantes:
- Créer un player
- Mettre à jour le player pour lire automatiquement la vidéo
- Personnalisez un player en ajoutant un plugin
- Afficher la configuration d'un player
Commencez gratuitement
L'approche de ce document étape par étape consiste à utiliser des instructions curl pour communiquer avec le Player API de service. L'outil curl est utilisé sur la ligne de commande pour transférer des données avec la syntaxe URL. Plus d'informations sur curl peuvent être obtenues auprès de http://curl.haxx.se.
Vous n'avez certainement pas à utiliser curl comme vous le faites dans ce document détaillé, par souci de simplicité. Vous pouvez bien sûr utiliser votre langue préférée pour communiquer avec les API. Vérifiez Mis en place pour Player Échantillons de gestion qui montre comment utiliser l'authentification de base, AJAX et JavaScript pour écrire des mini-applications pour des tâches de base comme la création d'un player, affichant tous vos players, suppression players, etc.
Quelques étapes préliminaires doivent être effectuées avant de pouvoir commencer à utiliser l'API. Ceux-ci sont:
- Connectez-vous à Studio. Si vous avez plusieurs comptes, utilisez le menu déroulant pour sélectionner celui dans lequel vous souhaitez créer votre nouveau compte. players. Pour que le système d'informations d'identification fonctionne correctement, vous devez disposer des droits d'administrateur sur ce compte. Si vous ne savez pas si un utilisateur a des droits d'administrateur, accédez à la page Paramètres des utilisateurs pour voir les utilisateurs répertoriés avec leur rôle.
- Dans Studio, assurez-vous d'avoir sélectionné ACCUEIL à partir des listes de modules. Dans le coin supérieur gauche de la page, vous pourrez, juste en dessous du nom du compte, copier votre identifiant de compte.
- Sur la ligne de commande, entrez les informations suivantes pour affecter la valeur de l'ID de compte à une variable d'environnement:
export ACCOUNT_ID=YourAccountID
- L'authentification sera effectuée en fournissant l'adresse e-mail de votre compte dans le cadre de l'instruction curl, puis l'API vous demandera un mot de passe. Étant donné que l'adresse e-mail sera fréquemment utilisée, affectez également cette valeur à une variable d'environnement:
export EMAIL=YourEmailAddress
Vous êtes maintenant prêt à commencer à utiliser l'API.
Créer un player
Vous pouvez maintenant créer un player avec un appel au Player Management API. Cet appel API est expliqué en détail dans la section Player Management API Vue d'ensemble document. Il est suggéré de copier et coller les instructions curl suivantes sur la ligne de commande.
Les étapes suivantes vous aident à créer un player.
- La première instruction curl crée le player et attribue un nom et une description. Après avoir collé cette instruction sur la ligne de commande et appuyé sur Entrer, vous serez invité à entrer votre mot de passe.
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ --data '{ "name": "My New Player Name v2", "description": "My new player description" }' \ https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players
Vous verrez le serveur retourner les données de réponse au format JSON:
{ "id": "S1qN4xeG7", "url": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html", "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>", "embed_in_page": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed", "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html", "preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed", "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>" }
- Voir votre player en utilisant une (ou toutes) des valeurs suivantes (à ce stade, il n'y a pas de vidéo dans player, mais vous pouvez publier une vidéo en utilisant votre nouvelle création player en utilisant Studio):
- Copiez le
url
dans un navigateur pour voir votre player. - Copiez le
embed_code
dans une page HTML pour afficher votre player dans un iframe. Pour que cela fonctionne correctement, la page contenant l'iframe doit être servie à partir d'un serveur HTTP réel. - La
embed_in_page
l'utilisation de la fonctionnalité est détaillée dans le Options disponibles pour le code incorporé avancé (sur la page) document.
- Copiez le
Video Cloud vidéos
Bien sûr, vous pouvez créer un player en utilisant une vidéo de votre Video Cloud bibliothèque. Au lieu d'utiliser un media
section dans les données JSON, vous utilisez un video_cloud
section. La déclaration curl ci-dessous montre player création à l'aide d'un Video Cloud ID de la vidéo.
curl \
--header "Content-Type: application/json" \
--user $EMAIL \
--request POST \
--data '{
"name": "Video Cloud CURL 10 March",
"configuration": {
"video_cloud": {
"video": "4093372393001"
}
}
}' \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players
La réponse est logiquement équivalente à la réponse lors de la création d'un player en utilisant media / sources / src Comme montré ci-dessus.
{
"id": "HJyMlHiuZ",
"url": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html",
"embed_code": "<iframe src="//players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>",
"embed_in_page": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
"preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html",
"preview_embed_code": "<iframe src="//preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>"
}
Tu peux voir le playerconfiguration en parcourant la valeur URL renvoyée et modifiez la index.html à config.json. Pour l' player créé par l'instruction curl ci-dessus, vous verrez ce qui suit:
{
"account_id": "1507807800001",
"compatibility": true,
"embed_id": "default",
"player": {
"template": {
"name": "single-video-template",
"version": "6.5.0"
}
},
"player_id": "HJyMlHiuZ",
"player_name": "Video Cloud CURL 10 March",
"updated_at": "2017-08-23T17:48:55.622Z",
"video_cloud": {
"policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
"video": "4093372393001"
}
}
La policy_key
est automatiquement ajouté au playerconfiguration. Ceci est créé en utilisant le Policy API, et cela permettra de placer des restrictions spéciales sur votre player pour accéder à différentes vidéos. En d'autres termes, la clé de stratégie contrôle les vidéos pouvant être visionnées à quel moment.
Mettre à jour un player
Vous avez maintenant effectué les bases de la création d'un player. Ensuite, vous apprendrez à effectuer une simple mise à jour du player. Dans ce cas, vous définissez player pour lire automatiquement la vidéo dans le player, si le navigateur le permet.
- Dans le JSON renvoyé par player création d'un
id
la valeur était affichée. Copiez ceci dans unPLAYER_ID
variable d'environnement.export PLAYER_ID=YourPlayerID
- Pour mettre à jour le player vous utiliserez le HTTP
PATCH
méthode. Vous enverrez des données pour mettre à jour votre player. Vous définirez laautoplay
Option detrue
. Copiez et collez l'instruction curl suivante et exécutez-la.curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request PATCH \ --data '{ "autoplay": true }' \ https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
- Assurez-vous que le serveur renvoie les données qui incluent le
id
,preview_url
etpreview_embed_code
valeurs dans le format JSON suivant:{ "id": "S1qN4xeG7", "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html", "preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed", "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>" }
- Utilisez soit le
preview_url
orpreview_embed_code
valeurs pour voir les changements dans votre playerconfiguration. Vous verrez que la lecture automatique est désormais vraie. - Vous allez maintenant publier le player pour le pousser à l'emplacement correct pour que les utilisateurs puissent le voir. Entrez la commande suivante:
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish
Une fois que le player est publié, vous aurez players qui diffèrent des versions d'aperçu. Les versions publiées diffèrent des versions d'aperçu sur ces points:
- Le JavaScript et le CSS sont minifiés, concaténés et intégrés dans le player directement.
- Une version basse résolution de l'image de l'affiche est générée et intégrée dans la page pour améliorer les temps de chargement perçus sur les réseaux ayant un temps de configuration des demandes élevé (c.-à-d. Les réseaux de données cellulaires).
- La version précédente du player est enregistré afin qu'il puisse être récupéré si des problèmes sont découverts après la mise à jour live.
- Vérifiez que la réponse JSON de la publication du player apparaît comme suit:
{ "id": "S1qN4xeG7", "url": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html", "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>", "embed_in_page": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed" }
- Utilisez l'un des player implémentations pour être sûr que votre publié player fonctionne correctement.
Personnalisez un player
Vous pouvez personnaliser votre player en utilisant des plugins. Vous pouvez apprendre à inclure des plugins préexistants dans votre player ou construisez votre propre Pas à pas: développement de plugins.
Dans ce cas, vous utiliserez un plugin préexistant très simple pour superposer un message texte sur la vidéo. Voici le code d'un plugin qui crée une balise de paragraphe HTML. Remarque: un nom de classe et un texte sont attribués au paragraphe, puis ils sont ajoutés à l'existant player. Ce plugin existe déjà pour votre commodité et se trouve à l'adresse //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js.
videojs.registerPlugin('firstPlugin', function() {
var player = this,
overlay = document.createElement('p');
overlay.className = 'vjs-overlay';
overlay.innerHTML = "First Plugin Working!";
player.el().appendChild(overlay);
});
Le paragraphe doit être stylisé pour éviter, dans ce cas particulier, un texte noir sur fond noir. Les styles suivants sont appliqués au nom de classe du paragraphe. Cette feuille de style existe déjà pour votre commodité et se trouve à //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css.
.vjs-overlay {
background-color: #333333;
color: white;
font-size: 2em;
padding: 5px;
position: absolute;
top: 100px;
left: 20px;
width: 150px;
}
Tout comme vous avez utilisé une instruction curl pour affecter la source vidéo et l'image de l'affiche, vous utiliserez une instruction curl pour indiquer player ce qui suit:
- Emplacement du fichier JavaScript contenant le code du plug-in
- Emplacement de la feuille de style
- Le nom du plugin à utiliser avec le player
- Utilisez l'instruction curl suivante pour rendre le plugin fonctionnel.
curl\ --header "Content-Type: application/json"\ --user $EMAIL\ --request PATCH\ --data '{ "scripts": [ "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js" ], "stylesheets": [ "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css" ], "plugins": [{ "name": "firstPlugin" }] }'\ https: //players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
- Utilisez l'instruction curl suivante pour publier la mise à jour player. Il s'agit du même code de publication que vous avez utilisé dans la section précédente pour publier un player.
curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request POST \ https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish
- Copiez l'URL renvoyée et parcourez-la. Vous verrez que le plugin fonctionne et le texte du plugin est affiché.
Texte du plugin
Lorsqu'un plugin est ajouté à la player utilisant l' Player Management API, que ce soit un plugin fourni par Brightcove ou un plugin personnalisé que vous avez créé, le plugin fait partie du player code lui-même.
Afficher la configuration
Pour déboguer et confirmer le travail que vous avez effectué, il est souvent utile d'afficher un playerconfiguration.
- Pour ce faire, utilisez un
GET
méthode avec leconfiguration
URL.curl \ --header "Content-Type: application/json" \ --user $EMAIL \ --request GET \ https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
- Vérifiez que la réponse de la configuration JSON est similaire à la suivante:
{ "media": { "poster": { "highres": "//solutions.brightcove.com/bcls/assets/images/Tiger.jpg" }, "sources": [{ "type": "application/x-mpegURL", "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8" }, { "type": "video/mp4", "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4" }] }, "compatibility": true, "video_cloud": { "video": "4093372393001", "policy_key": "BCpkADawqM3ugPRAtcx48_C4FjXiEiJORcRFnXkeL9siQUpauO_o7SaIhSnYvM24nUCeD74UFG1LMW8vtmaftsO1vYeeOn2iglfvEbG-c0PYwJ_zQCQGsvkrbgrNyEDvbEKjyrsQVXj0DOco" }, "player": { "template": { "name": "single-video-template", "version": "6.7.0" } }, "scripts": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"], "stylesheets": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"], "plugins": [{ "name": "firstPlugin" }] }
Une autre façon de voir le playerLa configuration de est en parcourant la valeur URL renvoyée et en modifiant le index.html à config.json.
Delivery system APIs
La Delivery System APIs permettent la gestion et le déploiement d'un groupe de fichiers, appelé référentiel. Ces fichiers sont gérés via les API REST et via git. La plupart des utilisateurs ne devraient pas avoir besoin de ces API lors de la création ou de la modification players, mais ils peuvent être un ensemble très intéressant d'API à utiliser à d'autres fins. Si vous souhaitez les essayer, vous pouvez faites-le ici. Pour une introduction pratique, essayez le Étape par étape: Delivesystème ry document.