Cómo crear controles de video HTML5 personalizados para un video en Divi

Los videos HTML5 son una forma conveniente y efectiva de mostrar videos en cualquier sitio web. De hecho, Divi usa el formato de video HTML5 para mostrar videos en Divi usando el módulo de video. Sin embargo, de manera predeterminada, estos videos contienen controles integrados (como reproducir, silenciar, volumen, etc.) que tienen un diseño estándar que depende de su navegador. Pero, si desea mejorar el diseño de estos controles, puede crear y diseñar sus propios controles externos para su video HTLM5.

En este tutorial, le mostraremos cómo crear controles de video HTML5 personalizados para un video en Divi. Para hacer esto, crearemos y diseñaremos el video y los botones de control personalizados usando Divi Builder. Luego agregaremos un Javascript personalizado para que todo funcione.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

También puede consultar este codepen que demuestra algunas de las mismas funciones que se muestran en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Breve resumen de nuestro objetivo para este tutorial

La sintaxis básica para un video HTML5 se vería así…

01
02
03
04
<video controls="">
  <source type="video/mp4" src="video.mp4">
  <source type="video/webm" src="video.webm">
</video>

Observe el atributo de controles en el elemento de video . Eso es lo que se usa para mostrar los controles estándar que normalmente vemos en un video HTML5.

El módulo de video de Divi usa la misma estructura de elementos de video HTML5 para mostrar videos alojados por usted mismo que cargue dentro del módulo. Entonces, cuando usamos un módulo de video, estamos usando videos HTML5.

Nuestro objetivo para este tutorial es ocultar inicialmente esos controles predeterminados para un video Divi y crear algunos de nuestros propios controles personalizados externos usando Divi Builder y algún código personalizado.

Parte 1: Crear el video HTML5 en Divi

En esta primera parte del tutorial, vamos a crear un video HTML5 utilizando el módulo de video Divi. Pero primero, necesitamos actualizar el fondo de nuestra sección.

Fondo de la sección

Comience por actualizar la configuración de la sección para la sección predeterminada disponible de forma predeterminada de la siguiente manera:

  • Gradiente de fondo Color izquierdo: rgba(0,0,0,0.8)
  • Degradado de fondo Color derecho: #000000
  • Coloque el degradado sobre la imagen de fondo: SÍ
  • Imagen de fondo: [subir imagen de elección]

La fila de videos

A continuación, debemos agregar la fila que contendrá nuestro video. Agregue una nueva fila de una columna a la sección.

Luego actualice la configuración de la fila de la siguiente manera:

  • Ancho: 100%
  • Ancho máximo: ninguno
  • Relleno: 0px inferior

Crear el vídeo

Como se mencionó anteriormente, Divi ya usa el elemento de video HTML5 dentro del módulo de video Divi. Entonces, para crear el video, simplemente agregue un nuevo módulo de video a la fila/columna.

Subir archivos de video al módulo de video

Para obtener el máximo rendimiento, suba un archivo de video MP4 y WEBM de su video a la galería de medios.

A continuación, agregue los archivos de video MP4 y WEBM al módulo de video en la pestaña de contenido:

Actualizar configuración de video

En la pestaña de diseño, actualice lo siguiente:

  • Ancho máximo: 1080px
  • Alineación del módulo: centro

En la pestaña avanzada, agregue la siguiente ID de CSS:

  • ID de CSS: divi-video-contenedor

Parte 2: Crear la barra de progreso

Los videos HTML incluyen una función integrada para mostrar una barra de progreso. Podemos usar un poco de código personalizado para agregar nuestra propia barra de progreso para nuestro video.

La fila de la barra de progreso

Para mostrar una barra de progreso personalizada para el video, primero, cree una nueva fila de una columna debajo de la fila que contiene el video.

Abra la configuración de la fila y actualice el relleno de la siguiente manera:

  • Relleno: 10px arriba, 0px abajo

Agregando el HTML de la barra de progreso

Para agregar nuestro fragmento personalizado de HTML para mostrar la barra de progreso, debemos agregar un nuevo módulo de código a la fila.

Dentro del cuadro de código, pegue el siguiente código HTML:

01
02
03
<progress id="progress" value="0" min="0">
  <span id="progress-bar"></span>
</progress>

Agregaremos la funcionalidad que necesitamos a la barra de progreso con nuestro Javascript personalizado más adelante.

Parte 3: Crear los botones de control de video en Divi

Ahora estamos listos para comenzar a agregar algunos botones de control de video personalizados usando una serie de módulos de botones Divi.

Crear la fila y la columna

Primero, necesitamos configurar nuestra fila y columna que servirán como nuestra barra de botones/contenedor.

La fila

Agregue una nueva fila de una columna debajo de la fila que contiene el código de barras de progreso.

Abra la configuración de la fila y actualice lo siguiente:

  • Ancho del canalón: 1
  • Relleno: 10px arriba, 20px abajo

Agregar Flex a la columna

Una forma sencilla de obtener la alineación horizontal de nuestros botones es usar display:flex en la columna que contiene nuestros botones. Para hacer esto, abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

01
02
03
04
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;

Ahora que nuestra columna está lista, estamos listos para agregar nuestros botones.

El botón Reproducir/Pausar

Haremos de este primer botón el botón «Reproducir/Pausa» que alternará la función de reproducción y pausa para nuestro video. Para crear el botón, agregue un módulo de botón a la columna.

Abra la configuración del botón y actualice el texto del botón:

  • Texto del botón: Reproducir/Pausar

En la pestaña de diseño, diseñe el botón de la siguiente manera:

  • Usar estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 18 px (escritorio), 14 px (tableta y teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: rgba(255,255,255,0.15)
  • Ancho del borde del botón: 0px
  • Mostrar icono de botón: NO

Actualice el margen del botón de la siguiente manera:

  • Margen: 10 px arriba, 10 px a la izquierda, 10 px a la derecha

En la pestaña avanzada, agregue la siguiente ID de CSS:

  • ID de CSS: dividir-reproducir-pausar

El botón de parada

El siguiente es el botón Detener. Este botón detendrá el video y lo devolverá al punto de inicio.

Para crear el botón, duplique el módulo del botón «reproducir/pausar».

Luego actualice el texto del botón:

  • Texto del botón: Detener

Y dale al botón una ID de CSS personalizada:

  • ID de CSS: divi-stop

El botón de silencio

Para crear el botón Silenciar que silenciará el volumen del video, duplique el botón «Detener» que acabamos de crear.

Actualice el texto del botón:

  • Texto del botón: Silencio

Luego dale una ID de CSS personalizada:

  • ID de CSS: divi-mute

El botón para subir el volumen

Nuestro próximo botón aumentará el volumen del video gradualmente cada vez que haga clic en él. Lo llamaremos el botón Subir volumen.

Para crear el botón, duplique el módulo del botón «Silencio».

Luego actualice el texto del botón:

  • Texto del botón: Vol.

En la pestaña de diseño, agregue una flecha hacia arriba junto al texto del botón actualizando lo siguiente:

  • Mostrar icono de botón: SÍ
  • Icono de botón: flecha hacia arriba (ver captura de pantalla)
  • Color del icono del botón: #00a9d8
  • Mostrar solo el icono al pasar el mouse sobre el botón: NO

Luego actualice el relleno del botón de la siguiente manera:

  • Relleno: 0,5 em izquierda, 1,5 em derecha

Luego actualice la ID de CSS:

  • ID de CSS: divi-volinc

El botón para bajar el volumen

No podemos tener un botón de «Subir volumen» y también tener un botón de «Bajar volumen» para disminuir gradualmente el volumen del video con cada clic.

Para crear el botón «Bajar volumen», duplique el botón «Subir volumen» que acabamos de crear.

Luego actualice el icono del botón a un icono de «flecha hacia abajo».

Luego actualice la ID de CSS:

  • ID de CSS: divi-voldec

El botón de vista grande

Para nuestro último botón, vamos a crear un botón de «Vista grande» que aumentará el ancho del contenedor de video al hacer clic.

Para crear el botón, duplique el botón «Silencio». Luego arrastre el botón duplicado debajo del botón «Bajar volumen» para que quede en el extremo derecho de la barra de botones.

Abra la configuración del botón duplicado y actualice el texto del botón:

  • Texto del botón: vista grande

Luego asigne al botón una ID de CSS personalizada:

  • ID de CSS: divi-vista grande

Parte 4: agregar el código CSS y JS personalizado

Ahora que todos nuestros elementos Divi están creados, estamos listos para incorporar el código personalizado necesario para que todo funcione.

Continúe y agregue otro módulo de código debajo del módulo de código que contiene la barra de progreso HTML en la segunda fila de nuestra sección.

el css

En el cuadro de código, pegue el siguiente CSS asegurándose de envolver el CSS dentro de las etiquetas de estilo necesarias .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
.control-button-active,
#divi-volinc:active,
#divi-voldec:active,
#divi-play-pause:active,
#divi-stop:active {
  background: #666666 !important;
}
 
#progress {
  display: block;
  width: 100%;
}
 
#divi-video-container.expand-video {
  max-width: 1400px;
}

JavaScript/JQuery

Debajo del CSS (la etiqueta de estilo final), pegue el siguiente código JS asegurándose de envolver el código dentro de las etiquetas de script necesarias .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
jQuery(document).ready(function ($) {
  $diviVideoContainer = $("#divi-video-container");
  $diviVideo = $("#divi-video-container video");
  videoElement = $("#divi-video-container video")[0];
  $play = $("#divi-play");
  $playPause = $("#divi-play-pause");
  $stop = $("#divi-stop");
  $mute = $("#divi-mute");
  $volinc = $("#divi-volinc");
  $voldec = $("#divi-voldec");
  $progress = $("#progress");
  progressElement = $("#progress")[0];
  $progressBar = $("#progress-bar");
  $largeView = $("#divi-large-view");
 
  videoElement.controls = false;
 
  $diviVideo.on("loadedmetadata", function () {
    $progress.attr("max", videoElement.duration);
  });
 
  $diviVideo.on("timeupdate", function (e) {
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
    );
  });
 
  $diviVideo.on("timeupdate", function () {
    if (!$progress.attr("max")) {
      $progress.attr("max", videoElement.duration);
      progressElement.value = videoElement.currentTime;
      $progressBar.css(
        "width",
        Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
          "%"
      );
    }
  });
 
  $playPause.on("click", function (e) {
    e.preventDefault();
    if (videoElement.paused || videoElement.ended) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  });
 
  $stop.on("click", function (e) {
    e.preventDefault();
    videoElement.pause();
    videoElement.currentTime = 0;
    progressElement.value = 0;
  });
 
  $mute.on("click", function (e) {
    e.preventDefault();
    videoElement.muted = !videoElement.muted;
    $(e.target).toggleClass("control-button-active");
  });
 
  $volinc.on("click", function (e) {
    e.preventDefault();
    alterVolume("+");
  });
 
  $voldec.on("click", function (e) {
    e.preventDefault();
    alterVolume("-");
  });
 
  alterVolume = function (dir) {
    currentVolume = Math.floor(videoElement.volume * 10) / 10;
    if (dir === "+") {
      if (currentVolume < 1) videoElement.volume += 0.1;
    } else if (dir === "-") {
      if (currentVolume > 0) videoElement.volume -= 0.1;
    }
  };
 
  $largeView.on("click", function (e) {
    e.preventDefault();
    $(e.target).toggleClass("control-button-active");
    $diviVideoContainer.toggleClass("expand-video");
  });
  //shows default controls when hovering over video
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true;
    } else {
      videoElement.controls = false;
    }
  });
});

Desglosando el código

Variables que apuntan a elementos HTML y botones Divi

Para comenzar, debemos declarar variables que apunten a cada uno de los elementos Divi que tienen nuestra ID de CSS especificada. También necesitamos dos variables importantes que apunten a elementos HTML reales (no a objetos jQuery). Estos incluyen videoElement (que apunta al elemento de video HTML) y ProgressElement (que apunta al elemento de progreso HTML).

01
02
03
04
05
06
07
08
09
10
11
12
13
$diviVideoContainer = $("#divi-video-container");
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$play = $("#divi-play");
$playPause = $("#divi-play-pause");
$stop = $("#divi-stop");
$mute = $("#divi-mute");
$volinc = $("#divi-volinc");
$voldec = $("#divi-voldec");
$progress = $("#progress");
progressElement = $("#progress")[0];
$progressBar = $("#progress-bar");
$largeView = $("#divi-large-view");

Una vez que las variables están en su lugar, ocultamos los controles de video HTML predeterminados.

01
videoElement.controls = false;

A continuación, debemos hacer que nuestra barra de progreso crezca en ancho en relación con el tiempo actual y la duración del video.

Una vez que el video carga los metadatos (usando el eventoloadedmetadata ), en el elemento de progreso, establecemos un atributo máximo con un valor igual a la duración del video.

01
02
03
$diviVideo.on("loadedmetadata", function () {
  $progress.attr("max", videoElement.duration);
});

Luego usamos el evento timeupdate para actualizar el valor y el ancho de la barra de progreso para indicar la posición de reproducción actual.

01
02
03
04
05
06
07
$diviVideo.on("timeupdate", function (e) {
  progressElement.value = videoElement.currentTime;
  $progressBar.css(
    "width",
    Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
  );
});

También agregamos una alternativa para los navegadores móviles en caso de que el atributo máximo del elemento de progreso no esté configurado correctamente en este punto.

01
02
03
04
05
06
07
08
09
10
11
$diviVideo.on("timeupdate", function () {
  if (!$progress.attr("max")) {
    $progress.attr("max", videoElement.duration);
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
        "%"
    );
  }
});

A continuación, comenzamos a crear funciones que hacen cosas al hacer clic en nuestros botones.

Para el botón de reproducción/pausa, alternamos los métodos de reproducción () y pausa () utilizando los atributos de pausa y finalización de Media API con una declaración if .

01
02
03
04
05
06
07
08
$playPause.on("click", function (e) {
  e.preventDefault();
  if (videoElement.paused || videoElement.ended) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
});

Para el botón de parada, pausamos el video y llevamos el valor de progreso y el tiempo actual a 0 .

01
02
03
04
05
06
$stop.on("click", function (e) {
  e.preventDefault();
  videoElement.pause();
  videoElement.currentTime = 0;
  progressElement.value = 0;
});

Para el botón de silencio, alternamos el atributo silenciado y también alternamos una clase que diseñará el botón con un fondo más claro cuando esté silenciado.

01
02
03
04
05
$mute.on("click", function (e) {
  e.preventDefault();
  videoElement.muted = !videoElement.muted;
  $(e.target).toggleClass("control-button-active");
});

Para los botones de volumen, uno está definido para aumentar el volumen al hacer clic ( $volinc ) y el otro está definido para disminuir el volumen al hacer clic ( $voldec ). Esto se logra utilizando la función alterVolume() que verifica el parámetro dir en busca de un «+» o «-« y aumenta o disminuye el volumen de forma incremental con cada clic.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
$volinc.on("click", function (e) {
  e.preventDefault();
  alterVolume("+");
});
 
$voldec.on("click", function (e) {
  e.preventDefault();
  alterVolume("-");
});
 
alterVolume = function (dir) {
  currentVolume = Math.floor(videoElement.volume * 10) / 10;
  if (dir === "+") {
    if (currentVolume < 1) videoElement.volume += 0.1;
  } else if (dir === "-") {
    if (currentVolume > 0) videoElement.volume -= 0.1;
  }
};

El botón Vista grande alterna una clase CSS que ajusta el ancho máximo del contenedor de video al hacer clic.

01
02
03
04
05
$largeView.on("click", function (e) {
  e.preventDefault();
  $(e.target).toggleClass("control-button-active");
  $diviVideoContainer.toggleClass("expand-video");
});

Y debido a que este ejemplo no contiene todos los controles y funciones disponibles dentro de los controles de video predeterminados, aquí hay una función que muestra el atributo de esos controles al pasar el mouse sobre el video.

01
02
03
04
05
06
07
$diviVideo.hover(function () {
  if (!videoElement.controls) {
    videoElement.controls = true;
  } else {
    videoElement.controls = false;
  }
});

Resultado final

Aquí esta el resultado final.

Y así es como se apilan los controles en el móvil.

También puede consultar este codepen que demuestra la misma funcionalidad.

Explora más

Si está familiarizado con HTML y Javascript y está interesado en agregar más funciones y controles personalizados a sus videos HTML5, puede consultar esta guía sobre cómo crear un reproductor de video desde cero . También puede consultar la API de HTMLMediaElement para ver las posibilidades que ofrece.

Espero poder compartir más formas útiles de manipular videos HTML5 y Divi en un futuro cercano.

Pensamientos finales

La creación de algunos controles personalizados externos para sus videos en Divi puede abrir las puertas para un diseño y una funcionalidad únicos. De acuerdo, el ejemplo de este tutorial no explora todas las opciones (o controles) que están disponibles. Y la funcionalidad está limitada a un video en una página, no a varios. Por lo tanto, es ideal para personalizar uno de los videos principales que desea presentar. Pero con suerte, servirá como una introducción sólida a lo que se necesita para crear algunos controles de video HTML5 personalizados para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!