0

I'm trying to struggle against against a large Cumulative Layout Shift (CLS) in a page where my biggest problem is (according GTMetrix) » Avoid enormous network payloads

So, my question is: Since the video is from an external URL, I was thinking if it's possible only load the video URL after page is completely loaded

Here's my code:

<video controls poster="https://picsum.photos/id/237/560/320" width="560px" height="320px" controlsList="nodownload" class="connect-bg">
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
        </video>

Is there any way to do this? Will it work?

bpy
  • 1,150
  • 10
  • 27
  • 2
    Is the CLS caused by the video in the first place? You already have width and height explicitly specified, so I don't think it should cause any "jumping"? – CBroe Jul 04 '22 at 09:46
  • It is possible? Yes. Will it work? Depends on exactly what problem you're trying to solve. If you're trying to reduce the network download then no - it will still load the same file. If you're trying to fix the GTMetrix warning then depends on how that warning is generated. The `source src=` will load asynchronously, so has no (direct) impact on the rest of your page loading time, so will have no effect if you load it later. To reduce an "enormous network payload" then you can split your video into multiple files and stream them separately (there's no doubt existing methods to do this) – freedomn-m Jul 04 '22 at 09:46
  • @freedomn-m The methods you mention to split the video into multiple files and stream them separately, will work on external sources (the videos are not hosted on my site)? – bpy Jul 04 '22 at 09:59
  • Unlikely, but I don't know details. I would expect that you would upload "segments" rather than it be applied to an existing file. – freedomn-m Jul 04 '22 at 10:00
  • Try to dynamically add url of video after window.load fire. – yashlodhi Jul 04 '22 at 10:21
  • @yashlodhi yes, that's what OP is (indirectly) asking how to do – freedomn-m Jul 04 '22 at 10:33
  • this might not be helpful but have you considered streaming the video using a jquery library like https://cloudinary.com/documentation/jquery_video_manipulation – Patrick Hume Jul 04 '22 at 11:33

1 Answers1

0

Everything is explained in comments so read it first.

// fires when page is loaded
window.addEventListener("load", () => {
  // get video by its id
  const video = document.getElementById("video");
  // poster and src url
  const poster = "https://picsum.photos/id/237/560/320";
  const src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
  // set video poster and src
  video.poster = poster;
  video.firstElementChild.src = src;
  // load video
  video.load();
});
<video id="video" controls width="560px" height="320px" controlsList="nodownload" class="connect-bg">
        <source src="" type="video/mp4">
</video>

If something is wrong then please tell me, I will fix it.

I am not 100% sure that this work.

Thank you!

yashlodhi
  • 79
  • 14
  • This looks great but I have problem on the implementation... I have two `PHP` variables: `$poster` and `$video_url`. How can Implement tose on the code you provided? – bpy Jul 04 '22 at 19:45
  • try [this](https://stackoverflow.com/a/4287379/19220606) and [this](https://www.delftstack.com/howto/php/pass-php-variable-to-javascript/) hope may they work! – yashlodhi Jul 05 '22 at 17:27