当前位置：文江博客话题详情

HTML/JS 加载大型 .mp4 视频

发布于 2025-01-18 18:27:08 字数 5617 浏览 1 评论 0原文

所以我已经遇到这个问题大约一周左右了，我想我已经尝试了超过 25 种不同的方法来尝试解决这个问题，但我似乎就是做不到。

所以我的问题是这样的，我正在启动一个流媒体网站，它用于在网站上播放的文件每个大约 1-2 GB（顺便说一句，视频是在本地下载并加载到网站的）。每集每页有一个视频，但问题是，每个视频需要大约 10-15 分钟才能加载和播放。

我尝试过让视频缓冲工作、视频流工作以及我能想到的一切来让这些视频加载得更快，但我总是陷入死胡同。

所有网络浏览器都会在开始播放之前尝试一次性加载整个视频，我试图避免这种情况，因为通过互联网传输和接收 1-2 GB 的数据需要很长时间。

我的想法是：

有没有办法在人们观看视频时缓慢加载视频？
有没有办法在人们观看视频时分段加载视频？

这是我的网页的代码：

<!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>

我非常非常感谢对这个问题的任何帮助，谢谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤蝉 2025-01-25 18:27:08

@Offbeatmammal 的评论

您需要查看分段的 MPEG 解决方案（HLS 或 DASH），或者如果您想保留单个文件，那么如果使用 MP4，则在开头使用 MOOV 原子对其进行编码（例如stackoverflow.com/questions/53537770/…）并确保您的服务器支持字节范围请求（MOOVatom包含浏览器可以利用来改善加载/播放的元数据，即您的选择2）。

回复收藏 0 原文

~没有更多了~