Lazysizes: 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 [e-mail]
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
https://github.com/aFarkas/lazysizes/issues/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