Afficher un bouton (ou CTA) à un moment précis lors de la lecture d’une vidéo HTML dans Divi
La vidéo est un outil de marketing efficace pour les sites Web. Si une vidéo tente de promouvoir et de vendre un produit ou un service en ligne, elle devrait inclure un appel clair à l’action pour les clients potentiels. Une façon simple d’offrir une invitation à agir est d’ajouter un bouton à côté de la vidéo qu’ils peuvent cliquer. Cependant, lorsque l’utilisateur regarde la vidéo, certains boutons (ou CTA) sont plus significatifs à un moment donné. Par exemple, il peut y avoir une vidéo (par exemple 20 secondes) qui fait référence à une réduction ou à une promotion. Il peut être plus efficace d’afficher le bouton get now à un moment donné.
Dans ce tutoriel, nous vous montrerons comment afficher un bouton (ou CTA) à un moment précis lors de la lecture d’une vidéo HTML dans Divi. Cette technologie vous permet d’utiliser des vidéos et des boutons conçus avec Divi Builder, puis de les afficher lorsque la vidéo arrive à un moment précis, lorsque l’utilisateur met la vidéo en pause, ou lorsque la vidéo se termine. Vous n’avez besoin que de quelques fragments de jquery. Ce n’est pas nécessaire. Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Notez comment les boutons supérieurs sont affichés lorsque le temps vidéo actuel atteint 5 secondes et comment les boutons inférieurs sont affichés à la fin de la vidéo.
Ici, le même bouton en haut apparaît lorsque l’heure actuelle de la vidéo atteint 5 secondes, et le bouton en bas apparaît lorsque la vidéo est en pause. Vous pouvez également voir ce stylo de code pour une démonstration en direct de cette fonctionnalité. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes
Dans la colonne de droite de la page, vous verrez une vidéo avec deux boutons. Nous utiliserons ces éléments pour démontrer la capacité d’afficher ces boutons lors de la lecture de la vidéo.
Ouvrez les paramètres vidéo et téléchargez \/ Ajoutez la vidéo au format de fichier MP4. Vous pouvez également inclure des fichiers WebM. 
Dans l’onglet avancé, spécifiez un ID CSS personnalisé pour la vidéo: CSS id: Divi Video container
Déplacement de la transformation axe Y: – 100%
– Oui. Divi – Delay – button – 2 {
Visibilité: cachée;
Transition: détendez – vous tous les 400 MS! Important
}
– Oui. Divi Delayed button – 1. Afficher le bouton,
– Oui. Divi – Delayed – button – 2. Afficher le bouton
Visibilité: visible;
Transformation: aucune;
}
Ensuite, collez le Code jquery d suivant
\
});
Dans la fonction, nous utilisons l’instruction if pour afficher le bouton 1 (bouton supérieur) Chaque fois que la propriété currenttime de la vidéo est égale ou supérieure à 5 secondes Utilisez la fonction pour ajouter un événement timeupdate à la vidéo.
Dollar divideo. Open (\
Lorsque le temps actuel spécifié est atteint, ajoutez une classe pour afficher le bouton 1.
Si (e.target.currenttime > = 5) {
$Delay button 1. Addclass (\
}
});
Note: la condition de l’instruction if est e.target. Currenttime > = 5, mais vous pouvez le modifier pour afficher les boutons à différents moments pendant la lecture de la vidéo. Par exemple, si vous souhaitez afficher le bouton lorsque le temps actuel de la vidéo atteint 20 secondes, vous pouvez remplacer cette condition par e.target. Heure actuelle > = 20. Ensuite, nous utilisons une autre instruction if pour afficher le bouton 2 (le bouton ci – dessous) Chaque fois que nous interrompons ou complétons la vidéo (en utilisant les propriétés de l’élément htmlmedia pause et finished \/ \/ pour ajouter l’événement timeupdate à la vidéo et en utilisant la fonction).
Dollar divideo. Open (\
Lorsque le temps actuel spécifié est atteint, ajoutez une classe pour afficher le bouton 1.
Si (e.target.currenttime > = 5) {
$Delay button 1. Addclass (\
}
Ajouter une classe pour afficher le bouton 2 lorsque la vidéo est en pause ou se termine
Si (videoelement.paused | | videoelement.end)
$Delay button 2. Addclass (\
}
});
Notez comment les boutons supérieurs sont affichés lorsque le temps vidéo actuel atteint 5 secondes et comment les boutons inférieurs sont affichés à la fin de la vidéo. Ici, le même bouton en haut apparaît lorsque l’heure actuelle de la vidéo atteint 5 secondes, et le bouton en bas apparaît lorsque la vidéo est en pause. Vous pouvez également voir ce stylo de code pour une démonstration en direct de cette fonctionnalité. Dernière idée un bouton de visualisation basé sur l’heure actuelle de la vidéo est très utile pour votre com
Commercialisation de produits et de services. Toute vidéo promotionnelle réussie mérite un appel à l’action convaincant. J’espère que ce tutoriel vous donnera une meilleure idée de la façon d’utiliser la vidéo HTML pour fournir un CTA puissant n’importe quand, n’importe où. Si vous êtes intéressé par d’autres façons créatives d’utiliser la vidéo HTML dans Divi, Voici quelques articles qui pourraient vous intéresser: Comment créer un contrôle vidéo HTML personnalisé dans Divi pour ajouter des effets 3D à une vidéo HTML5 pour afficher une animation de produit unique dans Divi comment créer une vidéo promotionnelle collante avec un interrupteur affichage \/ cache dans Divi j’ai hâte d’entendre vos commentaires. Bonjour!