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).

<video controls
  width="400"
  preload="none"
  poster="https://ak.picdn.net/shutterstock/videos/172/thumb/1.jpg?ip=x480"
>
  <source
    src="https://ak.picdn.net/shutterstock/videos/172/preview/stock-footage-furnace-chimney.mp4"
    type="video/mp4"
  >
</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

Created 2022-09-29T12:52:21-07:00, updated 2022-09-29T12:56:07-07:00 · History · Edit

HTML video that loads when the user clicks play

Related