HTML Videos not playing on deployed site, really choppy

Question

So, i'm creating a website and everything is cool but the videos are really choppy and wont load. I've never had this issue before and I'm not getting any errors in the console.

Problem: Video is choppy and wont load, plays choppy and laggy

Solution I would like: To be pointed in the right direction with how I can fix this so that the video plays normally when a user presses play.

This is my code:

<div class="col-12">
                <video width="320" height="240" class="pt-3" controls preload="auto">
                    <source src="/videos/video1.MP4" type="video/mp4"> Your browser does not support the video tag.
                </video>
                <video width="320" height="240" controls class="pt-3" preload="auto">
                    <source src="/videos/video2.MOV" type="video/mp4"> Your browser does not support the video tag.
                </video>
                <video width="320" height="240" controls class="pt-3" preload="auto">
                    <source src="/videos/video3.MOV" type="video/mp4"> Your browser does not support the video tag.
                </video>
                <video width="320" height="240" controls class="pt-3" preload="auto">
                    <source src="/videos/video4.MP4" type="video/mp4"> Your browser does not support the video tag.
                </video>
            </div>
        </div>

I need this done in like.. an hour so can someone please help me? Thank you.

.mov isn't a normally supported extension (if they're mp4, can you rename it just to avoid any confusion). with mp4 videos have you made sure the MOOV Atom is at the front (see https://stackoverflow.com/questions/28503324/html5-video-safari-downloads-full-before-playing/28512437#28512437) also preloading (and potentially playing) four videos at once may run into network constraints — Offbeatmammal, Jan 14 '20 at 07:14
Thanks for your reply @Offbeatmammal learned something new. Im about to check out the link you provided. Could you provide resources for how to correctly load videos so that the user can play whichever video they want but without clogging up the network? thanks — Dre Jackson, Jan 14 '20 at 18:10
and also @Offbeatmammal thanks for letting me know .MOV isn't normally supported. Maybe id have better luck if I try to convert the formats. — Dre Jackson, Jan 14 '20 at 18:11
if the video is correctly optimized for streaming (eg https://stackoverflow.com/questions/40836206/html5-video-not-streaming-and-taking-90-seconds-to-load/40943383#40943383) then as long as you have bandwidth to the server should be okay. if you have multiple videos/concurrent users it's going to be more challenging. you could look at a fragmented mp4 solution (HLS or Dash) for quicker starts and better network resilience — Offbeatmammal, Jan 14 '20 at 21:58

score 0 · Answer 1 · answered Jan 14 '20 at 03:09

0

Have you tried not preloading the videos?

answered Jan 14 '20 at 03:09

Yael Valle

13
1
4

Yes, still the same behavior – Dre Jackson Jan 14 '20 at 03:09
is the *controls* property a typo? and do you have to write it in this format, because I think i was reading up somewhere that the **video** tag has a *src* property? – Yael Valle Jan 14 '20 at 03:10
Thanks for taking the time to respond. Yes, the video tag has an src, which mine is pointing to a folder with the video in it. And controls just allows users to play, pause, fast forward, etc. the video. Without it I would have to make a custom control panel but it isn't needed it's fine as is. I just need it to work properly. @Yael – Dre Jackson Jan 14 '20 at 03:15
do you have discord – Yael Valle Jan 14 '20 at 03:34
No i dont @Yael – Dre Jackson Jan 14 '20 at 03:35
send me your code `yael.valle@gmail.com` and let me take a look – Yael Valle Jan 14 '20 at 03:39

HTML Videos not playing on deployed site, really choppy

1 Answers1