【发布时间】：2021-11-23 07:54:51
【问题描述】：
工作视频正常播放并具有常规的“控件”外观，而非工作视频不播放，甚至不显示缩略图并且具有不同的“控件”外观。
我已确认两个视频都存在，没有文件未找到错误，它们是正确的 mime_type "video/mp4"。
工作部分：
// if only 1 image
if (reply.mediaDirs.length == 1){
console.log(`only 1 image for id:${reply.id}`)
// Each file name
reply.mediaDirs.forEach((dir,idx) =>{
if (idx == 0){
html += `<div class="carousel-item active" style="width:100%;height:30vh;overflow:hidden;">`
}
else{
html += `<div class="carousel-item" style="width:100%;height:30vh;overflow:hidden;">`
}
// Check if image
if (dir.toLowerCase().endsWith('.jpg')){
html += `
<img src="/static/${dir}" class="d-block w-100 card-img-top border-top border-left border-right bg-blur-image" style="border-radius:8px 8px 8px 8px !important; width:100%;height:100%;object-fit:contain;background-image:url('/static/${dir}');">`
}
// Check if video
else if (dir.toLowerCase().endsWith('.mp4')){
html += `
<video controls class="d-block w-100 card-img-top border-top border-left border-right bg-blur-image" style="border-radius:8px 8px 8px 8px !important; width:100%;height:100%;object-fit:contain;">
<source src="/static/${dir}" type="video/mp4" >
</video>`
}
html += `
</div>
</div>`
})
}
非工作部分：
// if more than 1 image
else if (reply.mediaDirs.length > 1){
console.log(`more than 1 image for id:${reply.id}`)
// Each file name
reply.mediaDirs.forEach((dir,idx) =>{
if (idx == 0){
html += `<div class="carousel-item active" style="width:100%;height:50vh;overflow:hidden;">`
}
else{
html += `<div class="carousel-item" style="width:100%;height:50vh;overflow:hidden;">`
}
// Check if image
if (dir.toLowerCase().endsWith('.jpg')){
html += `
<img src="/static/${dir}" class="d-block w-100 card-img-top border-top border-left border-right bg-blur-image" style="border-radius:8px 8px 8px 8px !important; width:100%;height:100%;object-fit:contain;background-image:url('/static/${dir}');">`
}
// Check if video
else if (dir.toLowerCase().endsWith('.mp4')){
html += `
<video controls class="d-block w-100 card-img-top border-top border-left border-right bg-blur-image" style="border-radius:8px 8px 8px 8px !important; width:100%;height:100%;object-fit:contain;">
<source src="/static/${dir}" type="video/mp4" >
</video>`
}
html += `
</div>`
我所做的基本上是附加到 html，如果重要的话，我正在使用 Django 和 Bootstrap。
编辑： 不可能是由于 html 格式错误，关闭标签等似乎已经到位。 Inspect element of the non-working vid
编辑 2： 视频有问题吗？我只是尝试将视频源硬编码为另一个视频，它有效吗？！这是否意味着 html 对视频采用了一些标准？ （例如，最小视频长度，最小视频大小......等）（无效的视频是：4 秒长，406+kb 大） Video Codec Info
【问题讨论】：
-
因为两段代码（对于 1 或多于 1）使用相同的
reply.mediaDirs.forEach()你需要第二段代码吗？我能看到的唯一区别是第二个缺少结束</div>标记，所以它可能是错误的？！ -
嗨@ProfessorAbronsius 感谢您的回复！如更新的问题中所见，它似乎不是格式错误的 html。关于重复的 forEach()，唯一的区别在于 style="height:"
-
在您所说的代码段中有 2 个打开和 1 个关闭
div标记是Non-working part:- 我会留给您确定这是否意味着它的格式不正确在我看来，这似乎很有可能
标签： javascript html css