Estoy tratando de configurar una imagen de póster HTML desde la URL de algunos videos usando Javascript, puedo obtener la ruta completa al archivo usando "+ element +" , pero no puedo eliminar la extensión al final. Intenté varias formas pero todas generan errores.
"+ element +" generará este resultado img/holidays/4ofjuly2.mp4
Necesito eliminar en poster="img/holidays/4ofjuly2.mp4" .mp4 para agregar .jpg
Probé .replace(/.[^/.]+$/, "")
y .split('.').slice(0, -1).join('.')
function createImagesTag(data){ var imagesdata = JSON.parse(data); images=imagesdata; var imagesTag=""; var a=0; imagesdata.forEach(element => { if(a==0){ imagesTag+="<video muted preload='none' poster='"+ element +"' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected("+ a +")' class='imagescards' <source src='"+ element +"#t=1.5'type='video/mp4' style='border: 3px solid red;'></video><br />" } else{ imagesTag+="<video muted preload='none' poster='"+ element +"' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected("+ a +")' class='imagescards' <source src='"+ element +"#t=1.5' type='video/mp4'></video><br />" } a++; }); document.getElementById("images").innerHTML = imagesTag; }Probablemente estés buscando subcadena . Verifique el código a continuación, y si desea obtener más información sobre reduce, consulte este enlace de MDN .
function createImagesTag(data){ const images = JSON.parse(data); const imageList = images.reduce((acc, el, index) => { const srcWithoutSuffix = el.substring(0, el.length - 4); if(index === 0) { acc+=`<video muted preload='none' poster='${srcWithoutSuffix}'' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected(0)' class='imagescards' <source src='${el}'#t=1.5'type='video/mp4' style='border: 3px solid red;'></video><br />`; return acc; } acc+=`<video muted preload='none' poster='${srcWithoutSuffix}' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected(${index})' class='imagescards' <source src='${el}'#t=1.5' type='video/mp4'></video><br />` return acc; }, ''); const imagesHTML = imageList.substr(0, imageList.length - 4); document.getElementById("images").innerHTML = imagesHTML; }Creo que el problema está en la sintaxis de la etiqueta <video> , verifique el formato.
<video> <source src=""> </video>El reemplazo de la función JS hace un buen trabajo para este caso de uso.
const poster = "img/holidays/4ofjuly2.mp4"; const result = poster.replace(/mp4/g, "jpg"); console.log(result)