Sometimes, we want to add a loader image to HTML5 video.

In this article, we’ll look at how to add a loader image to HTML5 video.

How to add a loader image to HTML5 video?

To add a loader image to HTML5 video, we can set the poster attribute.

For instance, we write:

<video poster='https://picsum.photos/200/200' src='https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4' controls></video>

to set the poster attribute to the URL of the loader image.

As a result, the loader image will show until we play the video.

Conclusion

To add a loader image to HTML5 video, we can set the poster attribute.