如何编辑页面源以预加载系列中的下一个视频？

Question

我有一个项目，我要观看一个视频以获取特定信息，然后 select 进行选择，然后单击提交，然后加载下一个视频。视频之间的加载往往超过 5 秒，我想预加载视频。

如何编辑页面的源代码以在单击提交之前预加载下一个视频？

Here is what it looks like

Answer 1

您可以在 HTML5 视频标签中使用 preload 属性。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

另请参阅有关它是提示的说明 - 目前大多数浏览器都遵循它：

Note: The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback. The specification does not force the browser to follow the value of this attribute; it is a mere hint.

下面的代码片段显示了一个示例。请注意，重要的是，如果视频是 mp4 且开头带有 header，那么您的视频也针对流媒体进行了优化 - 请参阅 YouTube 推荐：https://support.google.com/youtube/answer/1722171?hl=en and the info with the Quickstart tool here: https://github.com/danielgtaylor/qtfaststart

您可以使用此工具、ffmpeg、Handbrake 等进行优化 - 例如：https://whosebug.com/a/50914703/334402

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");

vid1.onloadeddata = function() {
    vid1.currentTime = 882; //Go to end of video for this illustration
    vid1.play()
};

vid2.onloadeddata = function() {
    vid2.pause()
};

nextVideoStart = function() {
    vid2.play()
};

<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source   src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

<p></p>

<button onclick="nextVideoStart()">Click for next video</button>

如何编辑页面源以预加载系列中的下一个视频？

How can I edit the page source to preload the next videos in a series?

html

html5-video