Exemples de codes

Les exemples de code suivants illustrent les personnalisations et les améliorations apportées à Brightcove Player. Les échantillons marqués d'un double astérisque ** dépendent partiellement ou entièrement des fonctionnalités de Video Cloud. Vous pouvez également trouver une liste alphabétique d'échantillons ici.

Lecteur externe (publicité uniquement)

Lecteur externe (publicité uniquement)

Cet exemple fournit des fonctions d'aide JavaScript qui montrent comment ajuster dynamiquement la taille d'un <div> dans le DOM de la page, y injecter le Brightcove Player, charger et lire une annonce, puis supprimer le lecteur

Faire défiler le lecteur dans la vue avec des publicités

Scrolling Player to View with Ads

Dans le lecteur, notez que la barre de contrôle du volume horizontale remplace la barre de contrôle verticale par défaut.

Contrôle du volume horizontal (lecteur 1.x uniquement)

Contrôle du volume horizontal (lecteur 1.x uniquement)

Dans le lecteur, une barre de contrôle de volume horizontale remplace la barre de contrôle verticale par défaut.

Volume vertical

Volume vertical

Réglez le contrôle du volume pour afficher un curseur vertical au lieu de la disposition horizontale par défaut.

Indicateurs d'annonce dans la barre de lecture

Indicateurs d'annonce dans la barre de lecture

Cet exemple montre un lecteur où les trois points de repère publicitaires associés à la vidéo sont affichés dans la barre de lecture sous forme de marqueurs bleus.

Publicité avec le plugin SSAI

Publicité avec le plugin SSAI

Cet exemple utilise des annonces IMA définies dans un fichier VMAP pour diffuser des annonces côté serveur dans le flux vidéo. Il y a une annonce pré-roll, mi-roll et post-roll. Le fichier VMAP est défini dans la configuration de l'annonce.

Minuterie de compte à rebours

Minuterie de compte à rebours

Créez un compte à rebours pour une publicité à l'aide du plugin Overlay.

Porte d'âge avec ModalDialog

Porte d'âge avec ModalDialog

Cet exemple utilise le ModalDialog pour couvrir initialement le lecteur. Lorsque l'utilisateur confirme son âge en cliquant sur la fenêtre modale, les contrôles sont affichés et la vidéo est lue.

Affichage des points de repère CTA

CTA d'affichage des points de repère **

Le joueur montre deux CTA différents affichés en fonction des points de repère. Le premier CTA est affiché à 3 secondes, pendant une durée de 5 secondes. Le deuxième CTA s'affiche à 13 secondes pour une durée de 3 secondes.

Appel à l'action dynamique **

Appel à l'action dynamique **

Vous pourrez voir trois techniques d'affichage d'appel à l'action différentes avec ce lecteur.

Lecture/pause vidéo depuis iFrame Parent

Lecture/pause vidéo depuis iFrame Parent

Cliquez sur le bouton lecture ou pause, qui fait partie de la page parent de l'iframe, pour le voir lancer la lecture / pause de la vidéo dans le lecteur iframe.

Porte de l'âge

Cet exemple affiche une superposition qui masque les commandes du lecteur et le bouton de lecture. Lorsque l'utilisateur confirme son âge en cliquant sur la superposition, les commandes s'affichent et la vidéo est lue.

Lecture automatique avec le bouton Activer le son

Lecture automatique avec le bouton Activer le son

La vidéo se comportera différemment selon le navigateur / la plate-forme sur lequel vous exécutez la vidéo. Si la vidéo est automatiquement lu avec de l'audio, c'est ce qu'elle fait. Sinon, la lecture de la vidéo commence, mais un bouton de réactivation du son apparaît.

Playlist aléatoire vidéo d'arrière-plan

Liste de lecture aléatoire de la vidéo d'arrière-plan **

Dans le lecteur, vous verrez des vidéos sélectionnées au hasard dans une liste de lecture qui sont continuellement lues comme vidéos d'arrière-plan. Au début de chaque vidéo, le titre et la description de chaque vidéo sont affichés.

Playlist vidéo d'arrière-plan

Liste de lecture vidéo d'arrière-plan **

Dans le lecteur, vous verrez qu'il y a quatre vidéos qui sont continuellement lues comme vidéos d'arrière-plan. En outre, au début de chaque vidéo, le titre et la description de chaque vidéo sont affichés en superposant la vidéo d'arrière-plan.

Vidéo d'arrière-plan de la fenêtre complète

Vidéo d'arrière-plan pleine fenêtre **

Dans cette rubrique, vous apprendrez à utiliser une liste de lecture pour fournir des vidéos d'arrière-plan et à redimensionner automatiquement le lecteur lorsque la fenêtre du navigateur est redimensionnée afin que la vidéo remplisse entièrement la fenêtre du navigateur.

Création d'une boucle vidéo

Création d'une boucle vidéo

Dans certaines situations, vous souhaiterez peut-être utiliser une vidéo en boucle. Cet exemple boucle la vidéo 3 fois puis arrête la lecture vidéo.

Désactiver le scrubber de progression

Désactiver le scrubber de progression

Lisez la vidéo. Notez que vous ne pouvez pas utiliser le scrubber de progression pour faire avancer la vidéo.

Arrêt des autres lecteurs sur la page lorsqu'une vidéo démarre

Arrêt des autres lecteurs sur la page lorsqu'une vidéo démarre

Commencez à lire l'une des vidéos. Ensuite, lisez la vidéo dans un autre lecteur et vérifiez que la lecture vidéo s'arrête dans l'autre lecteur en cours de lecture.

Chargement dynamique du lecteur

Chargement dynamique du lecteur

Dans cet exemple, vous cliquez sur le bouton Ajouter un lecteur pour créer et charger dynamiquement le lecteur, puis pour lire la vidéo.

RequireJS et Brightcove Player

RequireJS et Brightcove Player

Dans cette rubrique, vous apprendrez à utiliser RequireJS, un chargeur de fichiers et de modules JavaScript, avec Brightcove Player.

Changer dynamiquement les vidéos sources **

Changer dynamiquement les vidéos sources **

Cliquez sur le bouton sous le lecteur pour modifier dynamiquement la vidéo source.

Application kiosque **

Application kiosque **

Le joueur lira une vidéo à partir du tableau d'objets vidéo dans une boucle infinie.

Animation de légende

Animation de légende

Démarrez la lecture vidéo. Lorsque vous déplacez votre souris sur et loin du lecteur, les légendes s'animeront pour rester au-dessus de la barre de contrôle.

Afficher le lien associé **

Afficher le lien associé **

Pour cet exemple, vous voyez le texte associé à la vidéo affiché sous le lecteur. Vous utilisez la section MÉDIAS> INFORMATIONS VIDÉO de Studio pour fournir le texte et le lien associé.

Afficher les vues dans la barre de contrôle

Afficher les vues dans la barre de contrôle

Lors de la lecture de la vidéo, vous verrez les vues vidéo dans la barre de contrôle. Il peut y avoir un léger délai avant l'affichage des informations Analytics API est interrogé de manière asynchrone pour les données.

Afficher les miniatures en survol

Afficher les miniatures en survol

Cet exemple utilise ModalDialog pour afficher quatre images miniatures prises à divers points de la vidéo. Cela permet à l'utilisateur d'avoir un aperçu de ce qui est dans la vidéo.

Afficher les bumpers aléatoires

Afficher les bumpers aléatoires

Dans cet exemple, des bumpers sélectionnés au hasard sont lus avant chaque vidéo d'une liste de lecture. Dans ce cas, les bumpers sont des publicités, mais pas tirées d'un serveur publicitaire, mais plutôt des vidéos définies dans la bibliothèque Video Cloud.

Logo de l'entreprise avec hyperlien

Cet exemple affiche un logo d'entreprise dans la barre de contrôle du lecteur. La sélection du logo vous redirigera vers le site Web de l'entreprise.

Carrousel Lightbox

Carrousel Lightbox

Parcourez les vidéos du carrousel. Sélectionnez une miniature pour lire la vidéo dans un conteneur de visionneuse. Avec la visionneuse affichée, sélectionnez le lien Fermer pour masquer le conteneur de la visionneuse.

Lightbox avec Scroller

Lightbox avec Scroller

Faites glisser la barre de défilement sous les images miniatures pour parcourir les vidéos. Sélectionnez une vidéo pour lire la vidéo dans un conteneur de visionneuse. Avec la visionneuse affichée, sélectionnez le lien Fermer pour masquer le conteneur de la visionneuse.

Lightbox simple

Lightbox simple

Cet exemple affiche une image d'affiche vidéo interactive qui ouvre une lightbox avec Brightcove Player. Sélectionnez l'image de l'affiche pour lire la vidéo dans un conteneur Lightbox.

Plugin de superposition de logo

Dans l'exemple suivant, vous voyez un logo affiché dans le coin inférieur gauche du lecteur. Au bout de cinq secondes dans la vidéo, le logo disparaîtra lentement.

Lecture à plusieurs sessions

Lecture à plusieurs sessions

Lisez la vidéo et arrêtez-la à un moment donné pendant la lecture. Lorsque vous actualisez la page, la lecture de la vidéo reprend là où vous l'avez laissée.

Naviguer sur la fin vidéo

Naviguer sur la fin vidéo

À la fin de la très courte vidéo, vous verrez une superposition apparaître avec un lien vers la page d'accueil de Brightcove. Le plugin Overlay fourni par Brightcove est utilisé, donc aucun JavaScript n'est nécessaire. CSS est utilisé pour styliser la superposition.

Défilement du lecteur dans la vue

Défilement du lecteur dans la vue

Faites défiler le lecteur dans et hors de la vue. Lorsque le lecteur est entièrement défilé vers la vue, la vidéo commence à être lue. Lorsque vous faites défiler le lecteur hors de la vue, la lecture de la vidéo s'arrête.

Basculer une superposition

Basculer une superposition

Cet exemple vous permet de basculer l'affichage d'une superposition interactive. Sélectionnez le bouton Basculer la superposition pour afficher et masquer la superposition.

Déclencher le rembobinage avec un événement personnalisé

Déclencher le rembobinage avec un événement personnalisé

Démarrez la lecture vidéo. Cliquez ensuite sur le bouton de rebobinage vidéo. Vous devriez voir que la lecture vidéo recule de 5 secondes.

Télécharger Video Plugin

Télécharger le plugin vidéo **

Vous verrez une icône de téléchargement située sur le côté droit de la barre de contrôle pour télécharger le rendu MP4 de la plus haute qualité de la vidéo chargée dans le lecteur.

Message d'erreur personnalisé en direct

Message d'erreur personnalisé en direct

Le joueur ne pourra pas se connecter au flux en direct. Un objet ModalDialog est créé, une image personnalisée y est placée, puis le ModalDialog s'affiche. Si le ModalDialog est fermé, l'erreur par défaut est affichée.

Playground Styling Player

Playground Styling Player

Dans cette rubrique, vous utiliserez un Codepen, illustré ci-dessous, comme terrain de jeu de style. Consultez-le sur le site codepen.io pour apporter des modifications et n'hésitez pas à utiliser le Codepen pour votre propre usage.

Liste de lecture horizontale et réactive

Liste de lecture horizontale et réactive

Vous verrez la liste de lecture horizontale sous le lecteur. Si vous redimensionnez votre navigateur, vous verrez le lecteur et la liste de lecture se redimensionner.

Vidéos les plus regardées dans la playlist **

Vidéos les plus regardées dans la playlist **

Dans l'exemple suivant, vous verrez le lecteur avec une liste de lecture apparaître à droite. La liste de lecture est remplie en récupérant les vidéos les plus populaires, en fonction du plus grand nombre de lectures, à l'aide du catalogue Brightcove Player.

Vidéos les plus récentes dans la liste de lecture **

Vidéos les plus récentes dans la liste de lecture **

Dans le lecteur suivant, vous voyez une liste de lecture contenant les 10 vidéos les plus récentes ajoutées au compte de l'équipe Knowledge.

Pagination de l'API de lecture

Pagination de l'API de lecture **

Cet exemple utilise un Brightcove Player pour afficher une vidéo dans le lecteur avec les 3 premières vidéos de la playlist. Sélectionnez le bouton Vidéos suivantes pour afficher les 3 prochaines vidéos de la liste de lecture.

Vidéos populaires Overlay

Superposition de vidéos populaires **

La superposition apparaîtra lorsque vous interrompez une vidéo ou lorsque la vidéo se termine. La demande à la Analytics API pour obtenir les 6 vidéos les plus vues au cours des dernières 24 heures s'affiche, ainsi que la réponse de l'API.

Playlist Vidéos populaires

Liste de lecture de vidéos populaires **

La liste de lecture apparaîtra automatiquement dès que les données vidéo sont récupérées. La demande à la Analytics API pour obtenir les 6 vidéos les plus vues au cours des dernières 24 heures s'affiche, ainsi que la réponse de l'API.

Vidéos associées d'une liste de lecture

Vidéos liées d'une playlist **

Cet exemple affiche une superposition interactive de miniatures vidéo associées lorsque la lecture est interrompue ou est terminée.

Vidéos associées via Tags

Vidéos associées via des balises (API CMS) **

Cet exemple affiche une superposition interactive de miniatures vidéo associées lorsque la lecture est interrompue ou est terminée.

Vidéos associées via Tags

Vidéos associées via des balises (API de lecture) **

Cet exemple affiche une superposition interactive de miniatures vidéo associées lorsque la lecture est interrompue ou est terminée.

Liste de lecture à onglets

Liste de lecture à onglets **

Sélectionnez un onglet dans la navigation par onglets pour basculer entre les listes de lecture. Sélectionnez une vidéo dans une liste de lecture pour démarrer la lecture vidéo.

Toutes les vues vidéo

Visionnages vidéo de toutes les périodes

Le lecteur ci-dessous comprend une liste de lecture pour vous montrer que le code utilisé pour récupérer toutes les vues temporelles fonctionnera avec les listes de lecture. Il fonctionnera également avec un seul lecteur vidéo.

Vidéo avant la liste de lecture

Vidéo avant la liste de lecture

Créez un lecteur compatible avec la playlist pour commencer avec une vidéo ne figurant pas dans la playlist.

Vidéo à la fin de la playlist

Vidéo à la fin de la playlist

Vous voyez que la playlist contient trois vidéos. Une fois ces trois vidéos lues, une autre vidéo NON dans la liste de lecture sera lue. Une fois que la vidéo ne figurant pas dans la liste de lecture est lue, la lecture de la vidéo s'arrête.

Régleur de fréquence de lecture

Ajoutez un bouton de taux de lecture à la barre de contrôle Brightcove Player.

Vidéo d'arrière-plan

Vidéo d'arrière-plan

Utilisez un lecteur Brightcove pour une vidéo d'arrière-plan sur votre page Web.

Obtenir le temps recherché

Obtenir le temps recherché

En cliquant dans la barre de recherche, les heures auxquelles vous avez cliqué s'affichent sous le lecteur.

Barre de marqueurs de chapitre en cours

Barre de marqueurs de chapitre en cours

Créez des marqueurs dans la barre de progression pour afficher les chapitres définis.

Écran final personnalisé dynamique

Écran final personnalisé dynamique

Ajoutez un lien associé aux données vidéo dans l'écran final personnalisé.

Tu regardes toujours ?

Tu regardes toujours ?

Dans cette rubrique, vous apprendrez à créer un lecteur Brightcove qui détecte quand le spectateur a arrêté de regarder, tout en quittant la lecture de la vidéo.

Agrandir le lecteur sur le survol de la souris

Agrandir le lecteur sur le survol de la souris

Dans cette rubrique, vous apprendrez à utiliser JavaScript et CSS pour agrandir un petit lecteur lorsque vous passez la souris dessus, puis le réduire à une petite taille lorsque vous passez la souris.

Lecteur flottant

Lecteur flottant

Dans cette rubrique, vous apprendrez à configurer le HTML / CSS / JavaScript pour permettre au lecteur d'être déplacé vers une nouvelle position. La position du joueur restera alors fixe même lorsque l'utilisateur fait défiler la page de haut en bas.

Jeux limités

Dans cette rubrique, vous apprendrez à utiliser un Brightcove Player qui limite le nombre de fois qu'un utilisateur peut visionner une vidéo en une seule journée.

S'inscrire pour jouer

S'inscrire pour jouer

Dans cette rubrique, vous apprendrez à utiliser un Brightcove Player dans lequel l'utilisateur doit remplir un formulaire pour visionner la vidéo.

S'inscrire pour jouer après l'aperçu

S'inscrire pour jouer après l'aperçu

Dans cette rubrique, vous apprendrez à utiliser un Brightcove Player dans lequel l'utilisateur doit remplir un formulaire pour visionner la vidéo, après l'affichage d'un bref aperçu.

Mot de passe pour voir la vidéo

Mot de passe pour voir la vidéo

Dans cette rubrique, vous apprendrez à demander un mot de passe pour visionner la vidéo.

Basculer la barre de contrôle

Basculer la barre de contrôle

Dans cette rubrique, vous apprendrez comment faire basculer un bouton pour afficher la barre de contrôle.

Boutons arrière et avant

Boutons Précédent Suivant

Dans cette rubrique, vous apprendrez à placer des boutons dans la barre de contrôle pour rembobiner et faire avancer la vidéo d'un nombre spécifié de secondes.

Ajouter un drapeau de pays à l'étiquette de légende

Ajouter un drapeau de pays à l'étiquette de légende

Dans cette rubrique, vous apprendrez à ajouter un drapeau de pays devant l'étiquette de légende de pays.

Télécharger la transcription

Télécharger la transcription

Dans cette rubrique, vous apprendrez à utiliser le fichier de légendes WebVTT et à le convertir en une transcription téléchargeable.

Télécharger l'audio

Télécharger l'audio

Dans cette rubrique, vous apprendrez à créer un lien pour permettre le téléchargement du MP4 de la meilleure qualité d'un actif audio lu dans Brightcove Player.

Définir la langue des légendes

Définir automatiquement la langue des légendes

Dans cette rubrique, vous apprendrez à définir la langue des sous-titres par défaut en fonction de la langue du navigateur.

Définir la langue de la piste audio

Définir automatiquement la langue de la piste audio

Dans cette rubrique, vous apprendrez à définir la langue par défaut de la piste audio en fonction de la langue du navigateur.

Définir la langue de la piste audio

Vidéo Verticale

Dans cette rubrique, vous apprendrez à afficher une vidéo verticale avec le Brightcove Player.