Use-Cases of this tutorial
- Know how to prevent browser from downloading the video until user chooses to play it.
- Know about the "preload" attribute of the <video> element.
HTML videos can be lazily loaded using the preload attribute of the <video> element.
Sometimes we may need to lazy load a video on the webpage — we would like the video to start downloading only when user clicks on the play button.
This pre-loading of the video can be prevented using the preload attribute of the <video> element. Setting preload="none" will ensure that video is not preloaded. Even the video metadata (such as title, duration etc) will not be loaded.
<!-- disable preloading -->
<video controls preload="none" width="300">
<source src="files/sample.mp4" type="video/mp4">
</video>
Make sure that the "autoplay" attribute is not set, otherwise browser will need to start loading the video, and preload="none" will not work.
<!-- video will still be preloaded -->
<video controls autoplay preload="none" width="300">
<source src="files/sample.mp4" type="video/mp4">
</video>
Better Presentation of Non-Loaded Video Using poster Attribute
Setting preload="none" on the video may not look good in the webpage. For example, on Firefox the video will not have any background. For Chrome, it will look black.
To remove these inconsistencies, we can use the poster attribute to show a preview image, until user clicks on the play button.
<video controls preload="none" poster="img/cover.jpg" width="300">
<source src="files/sample.mp4" type="video/mp4">
</video>