Video player preload settings + lazyload videos
I'm using Fullscreen Slider with quite a lot of HTML5 embedded videos and video backgrounds and I was wondering if there is a way to change how these videos are preloaded, because it slows down the pageload a lot.
My main concern are videos that don't autoplay (unchecked) and which the user has to start playing by clicking on them (which he never might). They are embedded with the setting
preload="auto", which means most browsers will preload the entire video (which can be huge) and in the end, maybe for no reason. I would prefer
preload="metadata"for these videos. Maybe this could be a setting to choose or would happen automatically if autoplay is unchecked and Standard Controls are checked. That would help a lot and speedup the whole pageload.
I understand that autoplay videos have to be preloaded, but if there is no video on the first slide, maybe the preloading could start after the first slide has been rendered or in some form of lazyloading? Is there a way to influence this behaviour? At the moment the preloading of a few videos at the same time seems to block the rendering of the page significantly and nothing is shown for a long time, while the videos are loading and blocking bandwidth. I came across a few JS based exemples of lazyloading videos like this one https://web.dev/lazy-loading-video/ but to be able to use them I would need to add a class to the video tag, which I can't at the moment.
I hope there is a solution to this. Thanks.
I did a bit more testing (this time in Chrome), and it seems that Chrome behaves very different than Firefox in terms of preloading autoplay videos. In Chrome I didn't really see a need vor Lazyloading Videos, because the browser itself seems to take care of this and does it quite efficient.
But being able to set the
preloadtag by yourself would be good for Chrome too and especially for the mobile versions of the page, because random preloads aren't really necessary for all videos and being able to decide that would be great.
hey can u please post a link to the page with the videos?
im totally down to code improvements for loading behaviour!
This page has several different videos (autoplay, as row-background and non-autoplay), and depending on the browser, they sometimes load at the beginning of the page-load (even if they aren't needed) and block other content to be loaded faster.
Thanks for looking into it.
hey there thanks!
looking at my code i see i already lazyload videos
however i will take a closer look at this soon
Thanks for looking into it @arminunruh,
Lazyloading videos seems to work well in Chrome, but it doesn't in Firefox.
yea lazyloading in firefox created some bugs for firefox, so i disabled it for firefox
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
Go here, see if your problem is listed here:
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it