我正在嘗試使用 Javascript 從某些視頻 URL 設定 HTML 海報影像，我可以獲得檔案的完整路徑，" element "但最后無法洗掉擴展名。我嘗試了幾種方法，但它們都會產生錯誤。
" element " 會產生這個結果 img/holidays/4ofjuly2.mp4
我需要洗掉poster="img/holidays/4ofjuly2.mp4" .mp4添加.jpg
我試過 .replace(/.[^/.] $/, "")
和 .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;
}
uj5u.com熱心網友回復：
您可能正在尋找substring。檢查下面的代碼，如果你想了解更多關于reduce, 從 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;
}
uj5u.com熱心網友回復：
我認為問題在于<video>標記的語法，請檢查格式。
<video>
<source src="">
</video>
uj5u.com熱心網友回復：
JS 功能替換在這個用例中做得很好。
const poster = "img/holidays/4ofjuly2.mp4";
const result = poster.replace(/mp4/g, "jpg");
console.log(result)轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361878.html