Créer une expérience de synchronisation des diapositives

Dans cette rubrique, vous apprendrez à créer une expérience de synchronisation des diapositives.

L'expérience Slide Sync permet d'afficher côte à côte une vidéo et le PDF correspondant. Au fur et à mesure de la lecture de la vidéo, les pages du PDF changent pour correspondre à ce qui est présenté dans la vidéo. Toute l'interactivité vidéo s'affichera également.

Créer une nouvelle expérience

Pour créer une nouvelle expérience Slide Sync, procédez comme suit :

  1. Connexion à Brightcove Interactivity Studio.
  2. Dans la navigation de gauche, cliquez sur Gérer.
  3. En haut de la page, cliquez sur Expériences.
  4. Cliquez sur Nouvelle expérience.
  5. Saisissez un nom pour l'expérience.
  6. Dans la liste des types d'expérience, cliquez sur Synchronisation des diapositives.
  7. Choisissez une mise en page.
  8. Cliquez sur SUIVANT.
  9. Entrez un titre pour la vidéo.
  10. Choisissez une vidéo, il y a 4 options :
    • Exemple de vidéo - Utiliser un exemple de vidéo
    • URL ou code intégré : entrez le code intégré ou l'URL d'une vidéo
    • Importer : glisser-déposer ou sélectionner une nouvelle vidéo (doit être un fichier .mp4)
    • Choisir un projet existant - Choisissez un projet existant
  11. Cliquez sur SUIVANT. La boîte de dialogue de confirmation Nouvelle expérience s'affiche.
  12. Cliquez sur CRÉER. L'éditeur d'interactivité s'ouvre avec la ou les vidéos sélectionnées.
  13. Ajoutez des diapositives PDF à l'expérience en faisant glisser un fichier dans la zone de dépôt ou en cliquant n'importe où dans la zone de dépôt et en naviguant pour sélectionner un fichier.
    • Les diapositives doivent être au format PDF
    • La première page du PDF s'affiche et se synchronise avec le point 0 seconde de la vidéo

Synchronisation des diapositives

Pour synchroniser les diapositives avec la vidéo, procédez comme suit :

  1. Lire la vidéo jusqu'au moment où la diapositive doit changer.
  2. Utilisez les icônes fléchées situées sous l'aperçu du PDF pour naviguer vers la page à afficher à l'endroit correspondant dans la vidéo.
  3. Cliquez sur le bouton Synchroniser sous l'aperçu du PDF pour synchroniser le PDF avec l'endroit où il se trouve dans la vidéo. Le bouton de réglage de l'heure situé à côté du bouton de synchronisation peut être utilisé pour ajuster l'heure si nécessaire.
  4. (Facultatif) Pour ajouter un marqueur de chapitre en même temps que le changement de diapositive, cliquez sur l'icône de marqueur de chapitre après avoir synchronisé une diapositive, ajoutez le titre du chapitre, puis cliquez sur Terminé.
  5. Répétez ces étapes jusqu'à ce que toutes les diapositives soient synchronisées pour la vidéo.
Au fur et à mesure que le PDF est synchronisé avec la vidéo, une liste de toutes les synchronisations s'affiche en bas de l'éditeur d'interactivité.

Modifier le rapport de taille de la vidéo et des diapositives

Pour modifier le ratio de taille de la vidéo et des diapositives, procédez comme suit :

  1. Ajoutez à la vidéo une action déclenchée par le temps.
  2. Dans le champ Addon Type, entrez slider.
  3. Pour la commande, saisissez change.
  4. Cliquez sur ADD NEW à côté de Command Data.
  5. Pour la clé, entrez newValue et pour la valeur, entrez le pourcentage de la largeur que la vidéo doit occuper
  6. Cliquez sur SOUMETTRE.

Ajouter d'autres annotations

D'autres annotations peuvent être ajoutées à la vidéo de la même manière que pour tout autre projet de vidéo interactive.

Ajouter des vidéos et des diapositives

  1. Pour ajouter une autre vidéo, cliquez sur le bouton AJOUTER PROJET dans la liste de lecture, sous la zone des vidéos et des diapositives.
  2. Entrez un titre pour la vidéo.
  3. Sélectionnez une vidéo.
  4. Répétez ces étapes jusqu'à ce que l'expérience soit complète.

Configuration des paramètres de l'expérience

Pour configurer les paramètres de l'expérience, cliquez sur PARAMÈTRES en haut à droite de la page. Les paramètres suivants sont disponibles :

Paramètres d'expérience

  • Progression automatique : permet de lire la vidéo suivante de la playlist une fois la vidéo précédente terminée
  • Lecture automatique : la vidéo sera automatiquement lue lors du chargement de la page de destination
  • Zoom par défaut : définit le niveau de zoom initial de l'expérience sur la page de destination (les utilisateurs pourront ajuster le niveau de zoom lorsqu'ils visionneront l'expérience)
  • CSS personnalisé (URL) : fichier CSS personnalisé pour l'expérience
  • Tags - Tags pour l'expérience

Paramètres de partage social

  • Cases à cocher pour le partage social : utilisées pour sélectionner les boutons qui seront affichés sur la page de destination.
  • Message : message configurable qui s'affichera comme texte par défaut dans les boîtes de dialogue de partage

Paramètres de l'image de marque

  • En-tête et pied de page de page de destination : ajoutez du code HTML personnalisé pour l'en-tête et le pied de page utilisés sur la page de destination
  • Image d'arrière-plan : image d'arrière-plan utilisée sur la page de destination

Exemple de balise d'en-tête

<img src="//solutions.brightcove.com/bcls/assets/images/platform/brightcove-logo-bl.png" />

Exemple de balise de pied de page

<div style="largeur : 100 % ; marge intérieure gauche : 30 pixels ; marge intérieure droite : 30 pixels ; « ><div style="hauteur minimale : 70 pixels ; position : relative ; famille de polices : 'Helvetica Neue', Helvetica, Arial, sans-serif ; color : #3e4459 ; text-align : left ; « ><a href= » https://www.brightcove.com/en/legal/privacy/ « target="_blank » style="text-decoration:none ; "> Politique de confidentialité.</a ><BR>Copyright ©2022 Brightcove Inc. Tous droits réservés.</div ></div >

Réglages du portillon d'accès

  1. Ajouter un portail d'accès.
  2. Ajoutez l'URL de redirection pour le formulaire d'inscription.
  3. Veillez à ce que votre formulaire d'inscription ou autre formulaire de validation redirige l'utilisateur vers l'expérience une fois l'inscription/la connexion terminée.
  1. Clique sur le Lien Bouton
  2. Le lien vers l'expérience se trouve en haut.
  3. Créez un lien personnalisé avec des attributs en remplissant les champs personnalisés suivants :
    • Vidéo de départ(obligatoire)
    • Durée de la vidéo à rechercher(facultatif)
    • URL de l'actif téléchargeable/visible(facultatif)
    • Titre modal(facultatif)
    • Texte lié(facultatif)
    • Texte du bouton (par défaut "View")(obligatoire)
    • Texte modal (non lié)(facultatif)
  4. Cliquez sur Générer pour créer un lien avec des paramètres personnalisés.

Partager l'expérience

Pour afficher la page de destination, procédez comme suit :

  1. Cliquez sur SHARE en haut à droite de la page.
  2. Sélectionnez un type de partage.
    • Intégrer uniquement : génère un code d'intégration à placer dans une page Web existante
    • Page de destination : créez une page de destination pour héberger l'expérience
  3. Sélectionnez l'option Utiliser les contrôles natifs ? Sélection Non affichera les commandes HapYak dans le lecteur. Si vous sélectionnez Oui, les commandes natives s' afficheront en fonction du type de vidéo publiée. Par exemple, si vous utilisez des vidéos Brightcove, le lecteur affichera les commandes natives du lecteur Brightcove (le lecteur ressemblera à un lecteur Brightcove normal).
  4. Sélectionnez COPIER pour copier le code ou le lien intégré ou cliquez sur VISUALISER pour ouvrir un aperçu de l'expérience dans un autre onglet du navigateur.