Cómo mostrar botones (o CTA) en ciertos momentos cuando reproduces un video HTML en divir

Los videos son herramientas de marketing efectivas para un sitio web. Y si un video intenta promocionar y vender productos o servicios en línea, debe incluir una acción clara para los clientes potenciales. Una forma simple de dar un impulso a la acción es incluir un botón al lado del video para hacer clic. Sin embargo, algunos botones (o CTA) tienen más sentido para aparecer en un momento determinado cuando el usuario mira el video. Por ejemplo, puede haber un segmento del video (como 20 segundos) en el que se menciona un cierto descuento o promoción. La aparición de un botón “Get Now” en ese momento específico puede ser más eficiente.
En este tutorial, le mostraremos cómo hacer que los botones (o CTA) aparezcan en ciertos momentos en que reproduces un video HTML en el Div. Esta técnica le permitirá usar videos y botones diseñados con Divi Builder y luego mostrar esos botones cuando el video llega a una determinada hora, cuando el usuario interrumpe el video o cuando finaliza el video. Solo se necesitan unos pocos fragmentos de JQuey. No se requiere complemento para ello. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Observe cómo ocurre el botón superior cuando la hora del video actual alcanza los 5 segundos y el botón inferior aparece cuando finaliza el video.
Este es el mismo botón desde arriba cuando la hora actual del video alcanza los 5 segundos y el botón inferior aparece cuando se interrumpe el video. También puede consultar este CodePen para una demostración en vivo de esta funcionalidad. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Lo que debería comenzar a comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.

Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Cómo mostrar un botón en ciertos momentos en que reproduce un video en división Sube el aspecto de la página del club de fútbol para comenzar repetidamente en el diseño, usaremos la página del club de fútbol en el club de fútbol Layout. Para hacer esto, abra el menú de configuración, haga clic en Agregar desde el aspecto y buscar y usar la página de la página de destino.
Actualice el módulo de video en la sección superior de la página, encontrará un video con dos botones en la columna derecha. Usaremos estos elementos para demostrar la funcionalidad de mostrar esos botones mientras reproducen un video.
Abra la configuración de video y cargue / agregue un video en formato de archivo MP4. También puede incluir un archivo Webm.

En la pestaña Avanzada, le dé al video una identificación CSS personalizada:
ID de CSS: Div-video-contenidor

Actualice el botón superior y abra la configuración del botón en la parte superior del video y actualice la opción de transformación para mover el botón detrás del video de la siguiente manera:
Transforma el eje Y traducido: 100%

Luego dale al botón la siguiente clase CSS:
Clase CSS: Div-retrasado-botton-1

Actualice el botón inferior y luego abra la configuración para el botón debajo del video y actualice la opción de transformación para mover el botón hacia arriba, de la siguiente manera: Gire el eje traducido: -100%
Luego dale al botón el siguiente ID CSS:

ID CSS: Div-retrasado-botton-2

Debido a que no necesitamos las animaciones que se han agregado a los botones desde el aspecto prefabricado, podemos eliminarlas. Use elección multise para seleccionar ambos botones (en modo de vista de capa). Luego abra la configuración de cualquier módulo de botón y configure el estilo de animación en ninguno.

Estilo de animación: ninguno
Agregue el código para el paso final, debemos agregar el código CUT0M. Para hacer esto, agregue un módulo de código debajo del botón inferior.

En el cuadro de código para la configuración del código, pegue el siguiente CSS asegurando que envuelva el código en las etiquetas de estilo.
.Divi-retrasado-botton-1,

.Divi-button-2 {

Visibilidad: oculto;
Transición: ¡todos los 400 ms de facilidad! Importante;
}
.Divi-DeLayed-Button-1.show-Button,
.Divi-DeLayed-Button-2.Show-Button {
Visibilidad: visible;
Transformar: ninguno;
}
Luego pegue el siguiente código jQuery después de CSS, asegurándose de envolver el código en las etiquetas de script. (función ($) {
$ (documento) .Ready (function () {
// Elementos

$ Divavideo = $ (“#Divide-Video-Container Video”);
VideoElment = $ (“#Video de Division-Video-Container”) [0];
$ demandadoButton1 = $ (“. Divlayed-Button-1”);
$ demandadoButton2 = $ (“. Divlayed-Button-2”);
// Agregue el evento TimeUpdate en el video con una función.
$ Divivideo.on (“timeUpdate”, function (s) {
// Agregar clase para mostrar botón1 cuando se alcanza Speciffied CurrentTime.
if (e.target.currentime> = 5) {
$ DeletedButton1.AddClass (“Show-Button”);}
// Agregar clase a mostrar botón2 cuando el video se detiene o ha terminado
if (videoElement.Paused || videoseLement.ended) {
$ DeletedButton2.AddClass (“Show-Button”);
}
});
});
}) (JQuery);
Sobre el código CSS primero, ocultamos los botones y establecemos el tiempo de transición del objetivo de los botones. .Divi-retrasado-botton-1,
.Divi-button-2 {
Visibilidad: oculto;
Transición: ¡todos los 400 ms de facilidad! Importante;

}
Luego mostramos el botón cuando la clase “Show-Button” se activa a través de JQuey y establecemos la transformación en ninguno, de modo que el botón vuelva a la ubicación inicial en la página. .Divi-DeLayed-Button-1.show-Button,
.Divi-DeLayed-Button-2.Show-Button {
Visibilidad: visible;
Transformar: ninguno;
}
JQuery Lo primero que hacemos es definir las variables que usaremos.
// Elementos
$ Divavideo = $ (“#Divide-Video-Container Video”);
VideoElment = $ (“#Video de Division-Video-Container”) [0];
$ demandadoButton1 = $ (“. Divlayed-Button-1”);
$ demandadoButton2 = $ (“. Divlayed-Button-2”);
Luego agregamos el evento TimeUpdate al video con una función, para que podamos determinar dinámicamente el tiempo de video durante la reproducción. Para obtener más información, lea sobre el evento de actualización aquí. // Agregue el evento TimeUpdate en el video con una función.
$ Divivideo.on (“timeUpdate”, function (s) {
});
Dentro de la función, usamos una instrucción IF para mostrar el botón 1 (el botón superior) siempre que el atributo CurrentTima del video sea igual o mayor de 5 segundos. // Agregue el evento TimeUpdate en el video con una función.
$ Divivideo.on (“timeUpdate”, function (s) {
// Agregar clase para mostrar botón1 cuando se alcanza el tiempo de corriente específico. if (e.target.currentime> = 5) {
$ DeletedButton1.addClass (“Show-Button”);
}
});
Nota: La condición de la instrucción IF es E.Target.Currentime> = 5, pero puede cambiar esto para mostrar el botón en un momento diferente al reproducir video. Por ejemplo, si desea mostrar el botón cuando CurrentItime Video alcanza 20 segundos, puede reemplazar con la condición E.Target.Currentime> = 20. Luego usamos otra instrucción IF para mostrar el botón 2 (el botón inferior) o cómo Muchos, el video se interrumpe o finaliza (utilizando las propiedades htmlmediaement interrumpidas y concluyadas. // Agregue el evento TimeUpdate en el video con una función.
$ Divivideo.on (“timeUpdate”, function (s) {
// Agregar clase para mostrar botón1 cuando se alcanza Speciffied CurrentTime.
if (e.target.currentime> = 5) {
$ DeletedButton1.addClass (“Show-Button”);
}
// Agregar clase a mostrar botón2 cuando el video se detiene o ha terminado
if (videoElement.Paused || videoseLement.ended) {
$ DeletedButton2.AddClass (“Show-Button”);
}
});
Resultado final Observe cómo aparece el botón superior cuando la hora del video actual alcanza los 5 segundos y el botón inferior aparece cuando termina el video. Este es el mismo botón desde arriba cuando la hora actual del video alcanza los 5 segundos y el botón inferior aparece cuando se interrumpe el video. También puede consultar este CodePen para una demostración en vivo de esta funcionalidad. Los pensamientos finales que muestran un botón basado en un video pueden ser útiles para vender sus productos y servicios. Cualquier video promocional exitoso merece un impulso convincente. Esperamos que este tutorial le brinde una mejor comprensión de cómo usar la funcionalidad de los videos HTML para servir a esos CTA fuertes cuando y dónde lo desee. Si está interesado en otras formas creativas de usar videos HTML en DIV, aquí hay algunos artículos que le pueden gustar: Cómo crear comandos de video HTML en DIV
Agregar efectos 3D a videos HTML5 para mostrar animaciones de productos únicas en Div
Cómo crear un video promocional pegajoso con un interruptor de pantalla / ocultación en la división
Espero tener noticias suyas en los comentarios. ¡Suerte!