HTML/JS 加载 Large.mp4 视频
[英]HTML/JS Loading Large .mp4 Video
问题描述
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.
所以我已经遇到这个问题大约一个星期了，我想我已经尝试了超过 25 种不同的方法来尝试解决这个问题，但我似乎做不到。
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).所以我的问题是，我正在启动一个流媒体网站，它用来在网站上播放的文件每个大约有 1-2 GB（顺便说一下，视频是在本地下载并加载到网站上的）。 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.每集每页有一个视频，但问题是，每个视频大约需要 10-15 分钟才能加载和播放。
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.所有 web 浏览器都尝试在开始播放之前一次性加载整个视频，我试图避免这种情况，因为通过 inte.net 传输和接收 1-2 GB 的数据需要很长时间。
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 个解决方案
解决方案1
0 2022-04-04 14:37:22
Comment by @Offbeatmammal @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).您需要查看碎片化的 MPEG 解决方案（HLS 或 DASH），或者如果您想保留单个文件，那么如果使用 MP4，则在开始时使用 MOOV 原子对其进行编码（例如 stackoverflow.com/questions/53537770/…）和确保您的服务器支持字节范围请求（MOOV 原子包含浏览器可以用来改进加载/播放的元数据，即您的选项 2）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.