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 inte.net.
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.
1 answers
solution1
0 2022-04-04 14:37:22
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.