HTML video tag giving different results on different videos, may I know what is the issue?

Question

The working video plays normally and has regular "controls" appearance, while the non-working video does not play, does not show even the thumbnail and has a different "controls" appearance.

I have confirmed that both videos exists, there is no file not found error, they are the correct mime_type "video/mp4".

Working part:

// 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>`
    })
}

Non-working part:

// 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>`

What I am doing is basically appending to the html and if it matters, I am working with Django and Bootstrap.

EDIT: Not possible that it is due to malformed html, closing tags and such seems to be in place. Inspect element of the non-working vid

EDIT 2: There is something wrong with the video? I just tried hardcoding the video source to another video and it worked?! Does that mean there is some criteria that html employs for videos? (Eg. minimum video length, minimum video size... etc.) (The vid that did not work was: 4 seconds long, 406+kb big) Video Codec Info

as both pieces of code ( for 1 or more than 1 ) use the same `reply.mediaDirs.forEach()` do you need the 2nd piece of code? The only difference I can see is that the 2nd lacks a closing `` tag so it is potentially badly formed?! — Professor Abronsius, Nov 23 '21 at 08:04
Hi @ProfessorAbronsius thanks for the reply! It does not seem to be malformed html as seen in the updated question. regarding the repeated forEach(), the only difference lies in the style="height:" — Thambolo, Nov 23 '21 at 09:52
There are 2 opening and 1 closing `div` tags in the piece of code you say is `Non-working part:` - I'll leave it to you to determine if that means it is or is not badly formed as in my opinion it seems highly likely — Professor Abronsius, Nov 23 '21 at 11:09

score 2 · Answer 1 · answered Nov 23 '21 at 10:43

Thanks to @JurgenRutten for pointing me in the right direction.

The problem lies where browsers do not support the codec H265, as explained in another post:

In short: you should convert it using FFMPEG to a supported codec like H264

score 0 · Answer 2 · answered Nov 23 '21 at 08:15

0

At: <div class="carousel-item" style="width:100%;height:30vh;overflow:hidden;">

I can see that in the above you have 30vh, and in the bottom 50vh; but I cannot see a difference, have you tried using different video's? It might be that the browser is unable to properly load the second video.

I ran your code using video's I have and everything seems to be working fine.

answered Nov 23 '21 at 08:15

Jurgen Rutten

181
9

yes I have a feeling that it has something to do with that specific video(s), but I can't figure out why. Maybe there is something I don't know of eg. video must be a certain seconds long, video must be at least a certain size, etc. **EDIT**: I tried to hardcode and place a different video and It worked??? that means there is something to do with the other videos which caused this issue – Thambolo Nov 23 '21 at 09:59
Can you manually run the video in windows or linux on the desktop? What format is it, and what format are all your video's using? – Jurgen Rutten Nov 23 '21 at 10:03
Yes I can run the video as per normal, it is just any other .mp4 video really. – Thambolo Nov 23 '21 at 10:12
codec info is updated to the post!! thanks a lot :) – Thambolo Nov 23 '21 at 10:23
Really... really weird question.. because when I'm looking at my own files I cannot find anything special either, but I noticed that when I rename a .wmv file to .mp4 it runs fine in windows too... but it might be that the codec is not recognized by the browser. Have you tried changing the suffix and converting it? Just to verify any faulty codex. – Jurgen Rutten Nov 23 '21 at 10:24
By the way I cannot test this as I only have mp4 files on this device (not mine, using a bootable usb) – Jurgen Rutten Nov 23 '21 at 10:30
oh my goodness, its because browsers don't support H265... Thanks for guiding me in the right direction! https://stackoverflow.com/questions/11588654/why-wont-some-mp4-files-play-via-html5/11588682 – Thambolo Nov 23 '21 at 10:32
Nice! We both learned something today. I didn't know this either. – Jurgen Rutten Nov 23 '21 at 10:34

HTML video tag giving different results on different videos, may I know what is the issue?

2 Answers2