Lazy load html5 videos

Hi everyone, I would like to get rid of YouTube and use html5 videos instead. But this slows down the page. How do you handle this topic?

1 Like

I have never found that to be a problem. Indeed I ditched Vimeo on one site and moved to self hosting because their wretched callout for analytics to servers on the other side of the world were slowing down the page opening.

I gather there is coding you can add that ensures only metadata is preloaded and I’ll look for that when I am back at the computer. I assume you have not set the video here to autoplay as well. Assuming you have reasonable web hosting though it really shouldn’t be a problem if the video is properly optimised.

1 Like

Hi both, I use self-hosted wherever possible, slight lag, but not too bad. I reckon that’s because my encoding aunt the optimal size. The only time I’m using YouTube videos is with Volt CMS, which (at the moment) doesn’t seem to support self hosted.
Just veering off slightly, do either of you have any particular presets/file sizes per minute you would opt for? I’m talking about a hero video rather than a background one.
Thanks in advance.

Sorry folks,
can anybody tell me what the difference is?

I think Volt does support self hosted video and should be responsive with the recent update. @Jannis

A hero video really wants to be 3mb or less. Don’t use it for mobile.

1 Like

Hi @Bootsie, I believe the background videos can be encoded at a lesser quality compared to ones that are an integral part of ‘the story’. They’re really just there for a mood and decoration, not really for people to scrutinise.
A bit like background and hero jpegs on a page, the background ones can have a lot more compression as they’re disguised by the page going on above them.
That’s my belief anyway!

You have to make sure that your videos are web optimised and are set to stream rather than just load. The best free way of doing this is to run your videos through HandBrake and make sure to check the settings shown below:

This should ensure that your videos start streaming on page load. If you don’t set these options, the video will have to load before it starts playing.

4 Likes

Thanks @Flashman, I have’t really used the latest Volt update on anything new yet, so I’ll look out for that.
Say I have a video of 7 minutes or so (a montage of a band playing live), 3mb seems very small for such a thing. Any thoughts on that?
Cheers
(sorry @wolfganghofer, I seem to have hijacked your post here!)

1 Like

No problem Trevor :slight_smile:
I need lazy video loading for a band website. They want to have a few longer videos on their site.
I will try this: Lazy loading video

I meant 3mb max for a hero bloc video lasting just a few seconds. Normal videos can and will obviously be heavier.

1 Like

@hendon52 I suspect you have used Handbrake a good deal more than I have, so I’ll take note of these settings. Recently I just used the template settings intended for Vimeo or Youtube.

My trick in the past has always been to upload a high quality file through Vimeo and rely on their encoding. They have an option to download encoded video, so you know it is high quality, light and compatible. After downloading the encoded file I just upload it to my server via FTP and add it the asset manager.

@Flashman Thats a good option because the online services do optimise for web and set fast encoding. I think handbrake just cuts out the middleman.

Thanks everybody for the answers.

Not yet. Self hosted audio and video is on the todo list.

1 Like

@wolfganghofer, I’ve just seen @hendon52 post regarding Handbrake. I do use that app, but good to see those settings, and I think it’s a worthwhile tool to have in your armoury.

As I have you here, what’s the most common file extension? I guess mp4 and mp3?

For video definitely mp4 and probably mp3 for audio, though I do occasionally see other formats for audio. Now I think about it I am not sure Blocs even works with WebM or Ogg.

https://help.blocsapp.com/knowledge-base/video-backgrounds/#video-format

1 Like

Mp4, mp3 (and pdf’s) would all be very handy for me @Jannis.
I’ll go away and leave everyone alone now.
Have a good weekend everybody.

1 Like

Yes. These are the two most used file formats for video and audio.