Home / Questions / 180088
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-07-14 03:37:43 +0800 CST 2020-07-14 03:37:43 +0800 CST

What size and resolution should a video have for full screen on the web?

  • 772

I want a 20-30 second fullscreen loop video to appear on my website. I have downloaded it on shutterstock in hd quality, right now it weighs 200mb. What I don't know is what characteristics the video must have to be 100% optimized so that it loads as quickly as possible and doesn't lose excessive quality.

Is there any free tool to do this?

<video autoplay muted loop id="myVideo" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support HTML5 video.
</video>

*Note: I have put up a test video right now.

javascript

1 Answers

  1. Best Answer

    'The more quality the better'. But...

    Always think about the people you are going to address. They may not all have fiber or broadband.

    Assume an 'average download speed' for these people and use this value as the video bitrate.

    Also consider that the speed at which the server serves may be less than the download speed that you are going to assume.

    In addition, a user will not only be downloading the video. You will also be downloading the rest of the web page.

    When encoding the video, it uses the assumed download speed (eg 3Mbps) as the video bitrate.

    To make sure you don't go outside the bitrate you want to use, you have two options:

    1. Encode a video with a fixed bitrate. It is faster to process but has poorer quality
    2. Use a '2-pass' system: You will achieve the desired bitrate with the highest quality (for that bitrate) at the cost of more processing time.

    A free video encoding utility is https://handbrake.fr/

    Also, keep in mind that you should encode the video in various formats/containers (mp4, webm, ogv) for the best possible compatibility.

    Finally, to help you choose which bitrate to use, I'll pass you this page where the different bitrates used by YouTube are specified depending on the video used:

    https://support.google.com/youtube/answer/2853702?hl=es

    Although it would be somewhat more conservative than these values ​​because: first: you probably don't have the same servers as google :), and second: you can always pause a video and wait for it to load a bit. But on a web page the experience is different.

    • 1