HTML video that loads when the user clicks play#

Today I figured out how to use the <video> tag to show a static thumbnail that gets replaced by the loaded video only when the user clicks play.

This is useful if you are going to show multiple video players on a page at the same time, as I do on webvid.datasette.io (described here).

1
<video controls
2
  width="400"
3
  preload="none"
4
  poster="https://ak.picdn.net/shutterstock/videos/172/thumb/1.jpg?ip=x480"
5
>
6
  <source
7
    src="https://ak.picdn.net/shutterstock/videos/172/preview/stock-footage-furnace-chimney.mp4"
8
    type="video/mp4"
9
  >
10
</video>

• preload="none" causes the browser to not preload the video until the user hits play
• poster="..." provides an image thumbnail to show in the player when it first loads

More information: MDN guide to the Video element