How to prevent html5 video from loading before playing?

I have several html5 videos on one page and I've just realized that when you visit the page, all the videos start loading even though I haven't clicked play on any of them.

Is there a way to only load a video once you click play, to prevent unnecessary downloading?

Solution 1:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

</body>
</html>

Use Preload"none"

http://diveintohtml5.info/video.html

Solution 2:

You should use the preload attribute, and set its value to none.

Quote from the <video> specification

preload = "none" or "metadata" or "auto" or "" (empty string) or empty
Represents a hint to the UA about whether optimistic downloading of the video itself or its metadata is considered worthwhile.
- "none": Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.

How to prevent html5 video from loading before playing?

Solution 1:

Solution 2:

Related

Recent Posts