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


working video tag

non-working video tag

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.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here