search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.53k stars 5.89k forks source link

Possible to lazy-load html5 video? #1175

Open nickpish opened 9 years ago

nickpish commented 9 years ago

I'm just curious if it's possible to lazy-load html5 video into the slider in a way similar to images, either natively or via another library perhaps? Thanks for any insight here.

zavrus commented 9 years ago

same problem .. problem with videos http://v40.zavrus.pro/ .. after first play dont works ( the best solution that I have found is to disable preloading videos and enable the launch of the video when you hover over it .. You can also link the video from the launch event of the carousel Check my site to see

nguyenj commented 9 years ago

@nickpish what about setting the src of those videos to data-src and then once slick is initialized, you set those data-src as src so they can then be loaded once slick is initialized... or set data-src to src when the item is active?

nickpish commented 9 years ago

@nguyenj -- thanks for your response; would you be able to provide some direction as to how I might set the data-src to src when the video item is active via jquery? That sounds like a fantastic approach.

HellPat commented 9 years ago

This approach works. You can leverage the beforeChange or afterChange Events to do something like this. Sorry I'm in a hurry, so can't write more. But this is the way to go.

nguyenj commented 9 years ago

@nickpish this is a very crude start, jsbin.com/kenace.

tonhaoln commented 9 years ago

@nguyenj this is great, however the video auto play when the sites load in Firefox.. any idea?

nguyenj commented 9 years ago

@tonhaoln No idea, it's probably a FF bug; but to workaround that, just trigger the play method on the video and remove the autoplay attribute of the video. http://jsbin.com/kejolafeve

sinyayadynya commented 8 years ago

@nguyenj thanks for your script, almost working for me, only the first video is not auto-playing (I have only video in my carousel). But as soon as I 'slide' to the second video, it woks. Any idea how to fix that?

onigetoc commented 8 years ago

Here a plugin to lazyload almost everythigh. (Video Exemple) http://ressio.github.io/lazy-load-xt/demo/video-html5.htm

sinyayadynya commented 8 years ago

@onigetoc thanks, I will give it a try!

nguyenj commented 8 years ago

@sinyayadynya sorry for the delayed response; but this is just building upon the previous jsbin–http://jsbin.com/wukaku/1.

Note - this is a rough sketch of how it could work