62

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?

Will Ryan
  • 1,815
  • 4
  • 19
  • 21

3 Answers3

102
<!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

Timothy Radzikowski
  • 1,238
  • 2
  • 10
  • 12
  • does this show any snapshot, or image that shows how the video looks like? – Oscar Reyes Jun 30 '16 at 05:03
  • 2
    for a preview the attribute `poster` have to be set linked to an image file. The video tag does not automatically extract anything from the video to generate a thumbnail. – Frébo Feb 01 '17 at 12:21
  • I'm finding Safari is ignoring this attribute and downloading the file anyway, whereas Chrome doesn't - as @Gaby's quote suggests it is just a hint. BTW browser dev tools seem to be struggling with videos at the moment - there's a bug in both Chrome and FF which means requests for the media files don't show up in the network tab. They appear in Safari, but without metadata for size, timeline and other stuff. – And Finally Sep 14 '17 at 10:38
15

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.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
4

Just use <video preload="none">

And if you want to load meta data only of video then use <video preload="metadata">

Harikrishna
  • 438
  • 5
  • 8