预加载视频文件 - HTML5播放

Question

我希望在网站首次加载时预加载一些小型视频文件，这样当用户点击进入网站的某个部分时，它们可以自动播放和使用。我需要过渡无缝，因此最好是预加载整个视频文件以避免任何延迟。

我尝试了一些不同的插件，如html5preloader，还尝试了一些其他JS技术来将视频文件加载到页面上，但将其隐藏以尝试强制浏览器在使用它们之前加载视频。

都没有真正产生太大的区别，只是在需要播放不同的视频时更换视频src。

是否有适用于此的正确解决方案，或者是因为HTML5视频播放而导致浏览器仅部分下载文件？

感谢任何有关HTML5播放预加载视频文件的想法和反馈。

谢谢

- Rob Dove

---

你可能并不想预加载整个视频。如果用户从未观看任何特定的视频，那该怎么办呢？理想情况下，您可以部分预加载视频，然后在用户观看时加载其余部分。这使用户能够立即播放，而您也不会浪费带宽。这实际上就是YouTube所做的。 - Tyler Crompton

这些片段非常短，每个只有5秒钟，并且总共有5个。用户将在浏览网站场景时逐一观看每个电影。我只需要文件完全加载，以便从一个部分过渡到另一个部分会更加流畅。 - Rob Dove

你尝试过在视频元素中添加“preload”属性吗？ - brianchirls

Answer 1

类似这样的代码应该会有所帮助：

<video controls="controls" preload="auto">
  <source src="sample.mp4" type="video/mp4" />
  ...
  Your browser does not support the video tag.
</video>

虽然因为 preload="auto" 在不同的浏览器中表现不一致，所以可能会有所不同。如果这些片段非常短（你提到了5秒钟），那么它可能会相当可靠。

- Offbeatmammal