0

Estoy realizando una página con Wordress, y me pidieron capturar una imagen para el preview de video (un featured image) con JS, el video se reproduce por un modal(que esta parte ya la tengo resuelta), el código que tengo funciona muy bien cuando solo es un video.

La estructura html la estoy utilizando en una sección que contiene 8 videos que los muestro por medio de un loop (foreach) y también en otras secciones que necesitan un solo video.

Este es el código Html

<img id="thumbnailLocalVideo" src="" alt="">
<div class="play-video-icon btn-play-local-video"><i class="fas fa-play"></i></div> //icono 'Play' para reproducir video en modal.
<video id="videoId" style="display-block: none;">
    //aquí obtengo la url del video local por medio de un custom field
  <source src="<?php echo $local_video['url'];?>" type="video/mp4">
</video>
<canvas id="canvasId"></canvas>

y este es código JS:

 // PREV THUMBNAIL VIDEO
window.onload = function () {
 var video = document.getElementById('videoId');
 var canvas = document.getElementById('canvasId');
 var img = document.getElementById('thumbnailLocalVideo');

 video.style.display = 'none';
 canvas.style.display = 'none';
 img.style.display = 'block';
 draw(video, canvas, img);
};

function draw(video, canvas, img) {
 var context = canvas.getContext('2d');
 context.drawImage(video, 0, 0, canvas.width, canvas.height);

 var dataURL = canvas.toDataURL();
 img.setAttribute('src', dataURL);
}

El problema que tengo es que en el codigo js para obtener el thumbnail, para acceder a los elementos (video, canvas, img) los llama por ID por lo que en mi página no funciona bien porque como decía anteriormente, "tengo varias secciones que contienen la misma estructura html" y los ID no se pueden repetir.

Y si llamo a los elementos con getElementsByClassName no funciona el js, no sé por qué. Entonces qué podría hacer en este caso?

1 respuesta 1

1

Hay que realizar algunos cambios:

  • Poner todos los elementos en un mismo contenedor independiente para poder acceder fácilmente
  • Cambiar todos los atributos id por class para evitar duplicados
  • Al cargar la página, usar document.querySelectorAll() para obtener todos los videos
  • Recorrer los videos para obtener los otros elementos y llamar a la función

Nota: Lamentablemente, el fragmento de código no funciona aquí por razones de seguridad, pero no deberías tener problema si el código y los videos están en el mismo servidor (dominio y puerto).

window.onload = function () {
    // Obtener todos los videos por clase
    let videos = document.querySelectorAll('.videoId');
    // Recorrer videos
    videos.forEach(video => {
        // Obtener contenedor para buscar desde ahí los otros elementos
        let parent = video.closest('div');
        // Obtener canvas y thumbnail desde el contenedor
        let canvas = parent.querySelector('.canvasId');
        let thumb = parent.querySelector('.thumbnail');
        // Llamar función para extraer imagen
        draw(video, canvas, thumb);
    });
};

function draw(video, canvas, img) {
    let context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    img.setAttribute('src', dataURL);
}
.videoId, .canvasId {
    display:none;
}
<div>
    <img class="thumbnail" src="" alt="">
    <div class="play-video-icon btn-play-local-video"><i class="fas fa-play"></i></div>
    <video class="videoId">
        <source src="<?php echo $local_video['url'];?>" type="video/webm">
    </video>
    <canvas class="canvasId"></canvas>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.