Lazy loading autoplay videos

[mondalaci]

I'm trying to lazy load autoplay videos, but they get loaded without scrolling. Any ideas how to make them work?

[aFarkas]

I think I have to alter the markup here a little bit because you can use autoplay="" attribute. Maybe data-autoplay=""?

[mondalaci]

Yes, being able to use data-autoplay="" to lazy-load autoplay videos would be awesome!

[aFarkas]

@mondalaci

I will only have time to do this after 10.10.19. In general it should be easy so you can give it a try.

[mondalaci]

Are you suggesting that I should implement this myself to test it? I would much rather wait for your implementation. It's not a pressing issue, and I better trust your code given your experience.

[rickydazla]

You can do that using the unveilhooks extension if you do something like this (or a data attribute), after it has changed the preload value to auto:

if(e.target.hasClass('autoplay') && e.target.autoplay != true){
  e.target.autoplay = true;
}

[aFarkas]

I just added the feature. You will need the following markup:

<video
	class="lazyload"
	preload="none"
	muted=""
	data-autoplay=""
	data-poster="poster.jpg"
	src="src.mp4">
</video>

[rickydazla]

Love your work @aFarkas

[mondalaci]

@aFarkas The latest lazysizes version has been integrated into the beta version of the aforementioned WordPress plugin, and I can confirm that it's working as expected. Thank you so much for the great work!

[aerni]

@aFarkas This is only working halfway for me. Using the markup above the following happens:

Chrome
the video doesn't start playing. When I add autoplay it works. But this way the video gets loaded twice when looking at the network tab. I suppose data-autoplay has to be changed to autoplay after the content is loaded?

Firefox
The video gets lazyloaded, but the poster doesn't fade out and the video doesn't start playing. When adding autoplay it works as well. But same issue with double loading the video like in Chrome.

[aFarkas]

@aerni
Could you please provide a testcase on jsfiddle, codepen, codesandbox or what ever.

[aerni]

@aFarkas Sure I can. To my clarification; Do you need the unveilhooks plugin to make this work or no plugin at all?

[aFarkas]

@aerni
yes, this is only available via the unveilhooks plugin.

[willstocks]

@aFarkas - this appears to only work when you use src=, but not if/when you use multiple <source>'s - is that intentional?
Fortunately, in the case of the video I have on my site at the mo, I have a fairly well compressed .mp4 so have swapped it into the src and it appears to work fine! But if I wanted <source type="webm"><source type="mp4"> etc. this wouldn't work?
Note: appears to work perfectly otherwise... so thank you very much! 😁

[willstocks]

Also, interestingly (and I haven't had a chance to debug yet), the solution does not appear to work on iOS 13.2 - the video just never loads for me on Safari/Chrome/Brave (obviously, all use the same underlying engine)
Works fine on Android though!

[aFarkas]

@aerni and @willstocks

I can't really reproduce your issues. Here is my testcase:
https://output.jsbin.com/qijoziq

[willstocks]

Thanks @aFarkas - I will take a look/will spin up a test case when I get home. For the time being, I don’t know if this helps: https://willstocks.co.uk/ scroll down to the “MPOW” article (last one of four)

…

On Mon, 18 Nov 2019 at 20:56, Alexander Farkas ***@***.***> wrote: @aerni <https://github.com/aerni> and @willstocks <https://github.com/willstocks> I can't really reproduce your issues. Here is my testcase: https://output.jsbin.com/qijoziq — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#697?email_source=notifications&email_token=AKNX2AR66RRSPYOG5HS6DM3QUL6PRA5CNFSM4ITXC4UKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEL4DYI#issuecomment-555205089>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKNX2ATMHFPVBHFWJT7JTALQUL6PRANCNFSM4ITXC4UA> .

[aerni]

@aFarkas You're right. Your test case works as expected. I implemented your markup on my website but I still can't figure out why it's not working. The JS works as the class lazyloaded gets applied and the video lazyloaded. But the video just doesn't start playing.

See here: https://stage.michaelaerni.ch/en/work/hyve
Scroll down past the quote. There are two videos.

[aFarkas]

@aerni
As it seems to me you don't have included the unveilhooks plugin.

[aerni]

@aFarkas I do have it included. It's bundled with Webpack in the vendor.js.

import lazySizes from 'lazysizes';
import 'lazysizes/plugins/unveilhooks/ls.unveilhooks';

Funny enough; I just figured that it works fine when adding the unveilhooks plugin as an external script in my HTML like so:

<script src="https://afarkas.github.io/lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js"></script>

Seems to be an issue with importing the plugin and bundling with Webpack?

[willstocks]

@aFarkas - I've just taken a look at that testcase and it appears to work as expected. I believe that, for some reason, regardless of my markup including playsinline and -webkit-playsinline, these two items are being stripped from my output for some reason... weird
Otherwise, lazyloading of the video works fine everywhere else!

[stoyan0v]

I can't really reproduce your issues. Here is my testcase:
https://output.jsbin.com/qijoziq

Hey @aFarkas the testcase is not working.
The lazyload is now working when the source is added in separate tag

[alexkuc]

Maybe this codepen will help someone - https://codepen.io/alex2407/pen/RwpJBJz

Some observations:

• it is src, not data-src
• it is data-autoplay, not autoplay
• .container is purely decorative to create large enough viewport to avoid loading video immediately
• unveilhooks plugin is included

Initial page load:

Scrolling down until lazyloading happens:

Ps. I have used a free placeholder video, in case it breaks any copyright let me know and I will replace it with anything else; it is meant to be purely educational w/o any copyright infringement intentions

[onlinebizsoft]

Maybe this codepen will help someone - https://codepen.io/alex2407/pen/RwpJBJz

Some observations:

* it is `src`, **not** `data-src`

* it is `data-autoplay`, **not** `autoplay`

* `.container` is purely decorative to create large enough viewport to avoid loading video immediately

* `unveilhooks` plugin _is_ included

Initial page load:

Scrolling down until lazyloading happens:

Ps. I have used a free placeholder video, in case it breaks any copyright let me know and I will replace it with anything else; it is meant to be purely educational w/o any copyright infringement intentions

I have just tested and the webm seems to be loading once I open the page. In theory, when you use src then of course browser will load it once the HTML is parsed.

[alexkuc]

I have just tested and the webm seems to be loading once I open the page

I have just tried and in my case, it opens when I scroll down to the video itself. I am on OSX with Google Chrome.

[willstocks]

Doesn't seem to be SUPER happy on iOS (any browser - Safari, Chrome, Brave - all open the video full screen even when playsinline is set)

[alexkuc]

@willstocks are you suggesting there is a bug or issue with my sample code? To be honest, my code is not meant to be used as a ready-copy-and-paste solution. But rather a guideline or reference to get started. If you can reproduce the bug, I think it's better to raise it as an actual bug issue.

[willstocks]

Hi @alexkuc - no, just lazyloaded video as a whole appears to still not be 100% happy autoplaying/playing inline on iOS. I did peek very quickly at your codepen, but I only see the poster image as I think webm video hasn't yet made its way to iOS (webm audio is though through a flag I think)

[gelsas]

I am completly new to this and I am trying to lazyload autoplay videos in my shopify stroe.

Can someone guide me in the right direction on what I need to do ?

[alexkuc]

@gelsas there is a "How To" section in README.md