所以我已经有这个问题大约一周了,我想我已经尝试了超过25种不同的方法来解决这个问题,但我似乎做不到。
所以我的问题是,我正在创建一个流媒体网站,它用来在网站上播放的文件大约是1-2GB(顺便说一句,视频是在本地下载并加载到网站上的)。每集每页有一个视频,但问题是,每个视频加载和播放大约需要10-15分钟。
我试着让视频缓冲工作,视频流工作,以及我能想到的一切,使这些视频加载更快,但我总是走到了死胡同。
所有的网络浏览器都试图在视频开始播放之前一次加载整个视频,我试图避免这种情况,因为通过互联网传输和接收1-2GB的数据需要很长时间。
我的想法是:
-
有没有办法在人们观看视频时缓慢加载视频?
-
有没有办法在人们观看视频时将视频片段加载?
以下是我的网页代码:
<!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>
我将非常非常感谢任何对这个问题的帮助,谢谢。
