Exemple de joueur Brightcove : Naviguer sur la fin vidéo

Dans cette rubrique, vous apprendrez comment afficher une superposition à la fin de la vidéo, qui, lorsque vous cliquez dessus, fait naviguer la page vers une nouvelle URL.

Exemple de lecteur

À 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.

Voir le stylo Naviguer sur la fin de la vidéo par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Utilisation du CodePen

Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :

  • Basculez l'affichage réel du joueur en cliquant sur le Result bouton.
  • Cliquez sur les HTML/CSS/JS boutons pour afficher L'UN des types de code.
  • Plus loin dans ce document, la logique, le flux et le style utilisés dans l'application seront discutés dans la configuration Plateur/HTML, le flux d'application et le style de l'application. sections. La meilleure façon de suivre les informations contenues dans ces sections est de :
    1. Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.
    2. Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.
    3. Voir le Configuration du lecteur/HTML , Flux de candidature et/ou Style d'application sections dans un autre navigateur/onglet de navigateur. Vous pourrez maintenant suivre les explications du code et en même temps afficher le code.

Ressources API/Plugin utilisées

Plugins de lecteur Brightcove
Plugin de superposition d'affichage

Style d'application

Le CSS est utilisé pour changer l'apparence de la superposition. Dans cet exemple, le CSS utilisé est:

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

Vous devez modifier le CSS pour définir l'apparence souhaitée, puis enregistrer le CSS dans un emplacement accessible par Internet. Vous pointerez vers ce CSS dans la configuration du plugin.

Configuration du lecteur/HTML

Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.

Configuration du lecteur

Dans ce cas, vous ajouterez le plugin Display Overlay à l'aide de Studio.

  1. Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
  2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
  3. Cliquez sur Plugins dans le menu de navigation de gauche.
  4. Ensuite, cliquez sur Ajouter un plugin.
  5. Pour le nom du plugin, entrez overlay.
  6. Pour le JavaScript URL, saisissez : 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
  7. Pour le CSS URL, saisissez : 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. Entrez les options de configuration dans la zone de texte Options (JSON) . 
    {
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}
  9. Cliquez sur Save.
  10. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
  11. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Autre HTML

Aucun autre élément HTML n'est ajouté à la page.