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

Question

I have a project where I am to watch a video for specific information and select a choice then click submit, then the next video is loaded. The loading between videos tends to be upwards of 5 seconds and I would like to have the videos preloaded.

How can I edit the source code of the page to preload the next videos before clicking submit?

Here is what it looks like

Mick · Accepted Answer · 2020-05-19T17:52:21.243

You can use the preload attribute in the HTML5 video tag.

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

See the note also about it being a hint - most browsers currently follow it:

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.

The snippet below shows an example. Note that it is important you videos are optimised for streaming also if they are mp4 with the header at the start - see YouTube recommendations:https://support.google.com/youtube/answer/1722171?hl=en and the info with the Quickstart tool here: https://github.com/danielgtaylor/qtfaststart

You can use this tool, ffmpeg, Handbrake etc to make this optimisation - for example: https://stackoverflow.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?

1 Answers1