Lessons

Video Player

The video player on the page is placed with the following code:

<video poster="/preview-image.png" preload="none">
        <source src="./video-file.mp4" type="video/mp4">
        <source src="./video-file.webm" type="video/webm">
    </video>

Here are some simple guidelines that will help improve the user experience of your customers:

  • Specify the preload="none" attribute. This will prevent the video file from being preloaded. Without it, the page will load the first few seconds of the video, which will weigh like the rest of the page along with the pictures. This slows down the page loading a lot.
  • Specify the poster in the attribute `preload=”none”’. A poster is a preview image that is displayed by default until the user starts playing the video.
  • Specify the video in 2 formats: WebM and MP4. The first format is the most modern and weighs the least. But it is not always supported by operating systems. Users will save this video to their computer and will not be able to play it.
  • For each source, specify the type attribute.
  • The aspect ratio of the poster must match the aspect ratio of the video file. If your video is FullHD with an aspect ratio of 16:9, then the poster should have the same aspect ratio.

Also, our check checks the presence of video files and a poster, as well as the fact that they can be opened and played.

Check your website
It's free and will take from 11 to 45 seconds

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree