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?