HTML/JS Loading Large .mp4 Video

Question

so I have been having this problem for about a week or so now, and I think I have tried over 25 different ways to try and solve this, but I just can't seem to do it.

So my problem is this, I am starting a streaming website, and the files it uses to play on the website are around 1-2 gigabytes each (btw the videos are downloaded and loaded to the website locally). There is one video per page for each episode, but the thing is, the videos take about 10-15 minutes each to load and be playable.

I have tried to get video buffering working, video streaming working, and everything I could possibly think about to make these videos load faster, but I have always hit a dead end.

All the web browsers try to load the entire video all at once before it starts playing, and I'm trying to avoid this as it takes way to long to transfer and receive 1-2 gigabytes of data over the internet.

My thoughts are these:

Is there a way to slowly load the video as the person watches it?
Is there a way to load the video in fragments as the person watches it?

Here is the code for my webpage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8^">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="with=device-width, inital-scale=1.0">
        <title>Anime Alpha</title>
        <link rel="stylesheet" href="../Episode Style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/920bf63c36.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <section class="header">
            <nav>
                <a href="../../index.html"><img src="../../graphics/logos&icons/Anime Alpha.png"></a>
                <div class="nav-links" id="navLinks">
                    <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="../../index.html">HOME</a></li>
                        <li><a href="../../watch.html">WATCH</a></li>
                        <li><a href="../../donate.html">DONATE</a></li>
                    </ul>
                </div>
                <i class="fa-solid fa-bars" onclick="showMenu()"></i>
            </nav>
            <div class="container">
                <div class="row">
                    <div class="playVideo">
                        <div class="episodeInfo">
                            <p class="name">A Certain Scientific Railgun</p>
                            <p class="episode">Episode 08</p>
                        </div>
                        <video autoplay controls id="animeMedia">
                            <source src="../../AnimeAlphaMedia\A Certain Scientific Railgun\Season 1\E08.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="bottomBar">
                        <a href="E01.html" class="episodes">Episode 1</a> 
                        <a href="E02.html" class="episodes">Episode 2</a> 
                        <a href="E03.html" class="episodes">Episode 3</a> 
                        <a href="E04.html" class="episodes">Episode 4</a> 
                        <a href="E05.html" class="episodes">Episode 5</a> 
                        <a href="E06.html" class="episodes">Episode 6</a> 
                        <a href="E07.html" class="episodes">Episode 7</a> 
                        <a href="E08.html" class="episodes">Episode 8</a> 
                        <a href="E09.html" class="episodes">Episode 9</a> 
                        <a href="E10.html" class="episodes">Episode 10</a> 
                        <a href="E11.html" class="episodes">Episode 11</a> 
                        <a href="E12.html" class="episodes">Episode 12</a> 
                        <a href="E13.html" class="episodes">Episode 13</a> 
                        <a href="E14.html" class="episodes">Episode 14</a> 
                        <a href="E15.html" class="episodes">Episode 15</a> 
                        <a href="E16.html" class="episodes">Episode 16</a> 
                        <a href="E17.html" class="episodes">Episode 17</a> 
                        <a href="E18.html" class="episodes">Episode 18</a> 
                        <a href="E19.html" class="episodes">Episode 19</a> 
                        <a href="E20.html" class="episodes">Episode 20</a> 
                        <a href="E21.html" class="episodes">Episode 21</a> 
                        <a href="E22.html" class="episodes">Episode 22</a> 
                        <a href="E23.html" class="episodes">Episode 23</a> 
                        <a href="E24.html" class="episodes">Episode 24</a> 
                    </div>
                </div>
            </div>
            <div class="videoDescription">
                <h3>Video Description:</h3>
            </div>
        </section>

        <script>
            var navLinks = document.getElementById("navLinks")
            var video = document.getElementById("animeMedia")

            video.buffered.start(0); 
            video.buffered.end(0);

            function hideMenu(){
                navLinks.style.right = "-200px";
            }

            function showMenu(){
                navLinks.style.right = "0px";
            }
        </script>
    </body>
</html>

I would very very deeply appreciate any help towards this problem, thank you.

Your server and your video file need to meet certain requirements in order for clients to be able to do more than download the whole file. E.g. [Http Media Streaming Server](https://stackoverflow.com/questions/20369046/http-media-streaming-server), [How to build a simple video streaming server?](https://stackoverflow.com/questions/47845571/how-to-build-a-simple-video-streaming-server) — Amadan, Apr 04 '22 at 03:22
HLS would be my suggestion; can't go wrong all major platforms use it like Twitch, Youtube, and etc. — BGPHiJACK, Apr 04 '22 at 03:41
you need to either look at a fragmented MPEG solution (HLS or DASH) or if you want to keep a single file then if using MP4 encode it with the MOOV atom at the start (eg https://stackoverflow.com/questions/53537770/safari-videos-load-far-too-slowly/53547419#53547419) and make sure your server supports Byte Range Requests (MOOV atom contains the metadata that the browser can leverage to improve loading/playback, ie your option 2). — Offbeatmammal, Apr 04 '22 at 10:21
The easiest way is to decrease the bit rate of the MP4s with video editing sofware. Decreasing to about 1500 is usually safe with no loss of perceptable quality and the filesize should be substantially smaller. — zer00ne, Apr 04 '22 at 15:02

score 0 · Answer 1 · answered Apr 04 '22 at 14:37

Comment by @Offbeatmammal

You need to either look at a fragmented MPEG solution (HLS or DASH) or if you want to keep a single file then if using MP4 encode it with the MOOV atom at the start (eg stackoverflow.com/questions/53537770/…) and make sure your server supports Byte Range Requests (MOOV atom contains the metadata that the browser can leverage to improve loading/playback, ie your option 2).

HTML/JS Loading Large .mp4 Video

1 Answers1