javascript - 视频有时可以很好地加载，有时却需要很长时间才能加载，或者根本不加载？

Question

我有一个 10 秒的视频剪辑，以及该视频剪辑来 self 网站的完整视频。 10 秒视频设置为(自动播放、预加载=自动和静音)，完整视频设置为(预加载=无)并设置为仅在单击时加载。视频都是 .mp4。

我将站点发布到计算机上的 IIS，然后转到本地主机，站点将正常加载。 10 秒视频在我的视频轮播上加载正常，但是当我单击它转到有关视频的专用页面时，10 秒视频将按应有的方式加载，或者需要额外几秒钟加载，或者不加载完全加载？？

即使 10 秒的视频没有加载，完整视频每次都会完美加载我仍然可以点击它应该在的空间(我有一个被点击的 div 激活完整视频而不是剪辑的点击)，完整视频将打开，并开始正常播放？

我无法弄清楚是什么导致了这个问题，因为即使 5 个其他视频同时加载到轮播上，该视频也可以在主页上正常加载，但是当它在自己的页面上时，它只是不加载几乎每次..？我尝试清除缓存并重新加载页面，但仍然有 90% 的时间它只是没有加载？

所以有人能告诉我是什么原因导致 10 秒的视频 2.2mb 在预加载开启时无法加载，而 90.2mb 的视频在激活时会立即加载，即使预加载已关闭？即使我重新加载页面，并立即单击以加载完整视频，它也会几乎立即加载？？我在主页上确实有相同的代码来获取视频剪辑并播放它，每次都有效!

10 秒剪辑:我在这些具有 ID 的视频剪辑周围设置了 div，因此可以将 div 加载到加载视频的其他页面上。

<video preload="auto" src="@Url.Content("~/Content/Video/")@item.clip" autoplay loop="" muted style="width:100%;"></video>

完整视频:

<video id="videoClick1" controlsList="nodownload" src="@Url.Content("~/Content/Video/")@item.selectFile" preload="none" controls style="width:100%;"></video>

这里是视频加载的地方:

<div id="fullVideoClick">
     <div id="video2">
     </div>
     <div id="video1">
     </div>
</div>
<script>
     $("#video1").load("/VideoCarousels/index #profileVideo1");
     $("#video2").load("/VideoCarousels/index #carouselVideo1");
</script>

在主页上:

<div id="video1">
</div>
<script>
     $("#video1").load("/VideoCarousels/index #carouselVideo1");
</script>

我唯一能想到的是视频剪辑的预加载有时出于某种原因没有激活，因为它在大约 5% 的时间里工作完美，并且 5% 的时间比平时花费更长的时间，但仍然加载，而其他 90% 的时间它根本不会加载，但在主页上它有 95% 的时间完美加载，而其他 5% 的时间最终会加载，但比正常情况需要更长的时间。

--编辑--

我已经将我的 5 个视频轮播设置为在每张幻灯片上播放相同的视频剪辑，当我清除缓存后重新加载页面时，它似乎加载了 5 张幻灯片中的 3 张视频，但是当我第二次重新加载页面时时间加载它们都很好，但仍然在专用页面上它只是不加载剪辑。我还添加了$(文档).ready(函数(){ ... });起初它加载了剪辑，这让我希望这会是答案，但再次刷新页面后，即使清除缓存后剪辑也不再加载，它是否加载是随机的。

--编辑2--发现了最奇怪的东西!我检查了元素，并删除了弹出的完整视频，因为它后面是视频剪辑，所以我能够看到视频剪辑的视频控件，奇怪的是视频剪辑实际上加载得很好，但最奇怪的是点击播放什么都不做？？我点击播放，然后我必须点击几秒钟进入视频，然后它开始播放？？？有谁知道为什么会这样吗？？

Answer 1

您还没有将 jQuery 代码包装在

$(document).ready(function(){ ... });

始终是解决任何负载问题的好地方。