Video player preload settings + lazyload videos
-
Hi,
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 settingpreload="auto"
, which means most browsers will preload the entire video (which can be huge) and in the end, maybe for no reason. I would preferpreload="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.
Also:
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 thepreload
tag 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.
Thanks -
hey can u please post a link to the page with the videos?
im totally down to code improvements for loading behaviour! -
@arminunruh
Here is the link to the website, that I'm developing at the moment:
https://develop.uber.space/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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it