Vue d'ensemble
Pour en savoir plus sur l'approche générale concernant l'architecture de cet exemple d'application, en particulier l'authentification et les implémentations AJAX, voir exemples qui utilisent HTTPRequest.
Architecture d'application
La logique d'application de haut niveau pour cette application est la suivante:
- Recueillir les données utilisateur nécessaires pour accéder au compte
- Au clic sur le bouton, effectuez un appel AJAX pour récupérer tous player info
- Sur le succès d'appel AJAX, effectuez les opérations suivantes:
- Injecter des données de réponse JSON dans la page HTML
- Créez dynamiquement du HTML qui affiche player informations dans une liste ordonnée et injectez-les dans la page HTML
Exemple d'application
Code Source
Retrouvez tout le code associé à cet exemple dans ce dépôt GitHub.
Exemple d'application
Voir le stylo Ecran Players par Brightcove Learning Services (@rcrooks1969) Sur CodePen.
Utilisation du CodePen
Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus:
- Basculer l'affichage réel du player en cliquant sur le Le résultat .
- Cliquez HTML / CSS / JS boutons pour afficher l'un des types de code.
- Cliquez Modifier sur CodePen dans le coin supérieur droit pour bifurquer ce CodePen dans votre propre compte.
- Trouver tout le code associé à cet exemple dans cette GitHub référentiel.
Code de proxy
Pour créer votre propre version de l'exemple d'application sur cette page, vous devez créer et héberger votre propre proxy. (Les proxys utilisés par Brightcove Learning Services acceptent uniquement les demandes des domaines Brightcove.) Un exemple de proxy, très similaire à celui que nous utilisons, mais sans les vérifications qui bloquent les demandes des domaines non Brightcove, se trouve dans ce dépôt GitHub. Vous y trouverez également des instructions de base pour l’utiliser, ainsi qu’un guide plus élaboré sur la création d’applications autour du proxy dans Utilisation des API REST.