MP4 playback faulty on mobile / Lazyload bug?

[stefan_s]

While updating our website we encountered serious problems with html5 mp4's on most mobile browsers. The current layout can be accessed here:
https://stark.shakupa.com/start-2/

On mobile devices the Videos are loaded super slow and are stuck on their embedded thumbnail and only start to play after one scrolls around the page for some time. On reloading the page the videos sometimes are completly omitted and only proper images are displayed. Sometimes only a couple of videos start to play jagged while others stuck to their thumbnail.

On a desktop everything runs fine both in desktop an mobile view. But if you switch on the mobile display with speedthrotteling (3G or 4G) within the Firefox inspector the response can be replicated.

To further test, we unlinked all videos from the desktop version and replaced them with even smaller versions. Mostly around 150-400kb per video.

One strange and inconsitent behavior we've noticed in the "network anaylsis" tab of the Firefox inspector is that if switched to mobile view the page requests and downloads all videos (not pictures) at once. While on desktop view it does so in a peacemeal manner consistent with lazy loading. (see attached screenshots below).

We've tested the page on iPhone 12 with safari and firefox and on a Samsung Galaxy 20 with Firefox, Opera and Samung Browser

For testing we've deactivaved all WP Plugins. No Cache Plugins are installed. WP, Lay, and PHP are up to date. The Videos were converted with Handbreak, we tried many different setting tweaks to no avail. They are encoded with the web/faststart encoder setting so they should be able to play back while loading. No custom code / css is used on the page.

After hitting refresh on mobile view. Media only:

Images only:

Media load traffic after reloading desktop version:

[stefan_s]

@Richard did you get a chance to look this behavior over?

if not, I just changed the link. Just use the front page: https://stark.shakupa.com

[Richard]

Dear Stefan

@stefan_s

Thank you for the updated Link, have forwarded to Armin as well ✅

You can confirm this behaviour would occur in a Vanilla Lay Theme environment? - no Custom code/ third-party plugins causing this?

I saw:

"For testing we've deactivaved all WP Plugins. No Cache Plugins are installed. WP, Lay, and PHP are up to date."

I will try to recreate the Bug on Lay Theme and get back to you 🌝

---

Best

Richard

[stefan_s]

Hey Richard, thanks for getting back to us.
Yes, I can confirm that this behavoir is present with all plug ins deactived and no custom code or css was used.

[stefan_s]

dear @Richard we're you able to recreate this scenario?

[stefan_s]

@Richard @Armin-Unruh @armin could you please get back to us about the issue. Having the mobile Version not working properly is highly unconvinient to us!

[Richard]

Dear Stefan

@stefan_s

Have sent you a message via 'Chats' ✨

---

Best

Richard

[Richard]

Dear Stefan

@stefan_s

"@Richard @Armin-Unruh @armin could you please get back to us about the issue. Having the mobile Version not working properly is highly unconvinient to us!"

I am sorry for delay, and the inconvenience caused.


Initially when i made the tests i could not recreate the Bug: https://stark.shakupa.com/

Testing on two real mobiles in my hands ( iPhone and Android )
the videos loaded within a decent timeframe and played.

I tested on a ‘Real mobile’ app (iPhone 12,13 Safari & chrome).

These were all playing in my tests:

Now coming back, testing on Desktop devices using a small browser size simulating Mobile is where it loads the slowest for me.

Could you please confirm that the behaviour occurs on real mobile devices if possible & then back to Desktop (mobile layout)?

Q: Are you using a lot of y or x-parallax?
Is there a page where you can test it easily without Parallax and see loading times?

I know of handbrake, did you read the section in documentation:
https://laytheme.com/documentation/speeding-up-your-website.html

---

"While updating our website we encountered serious problems with html5 mp4's on most mobile browsers."

Q: Did you at any prior time or version not experience these issues?

If yes, I can provide a previous version of Lay Theme while the Bug is remedied:

"Please send your website address, /wp-admin/ username and password and a link to this topic to licensekeys@laytheme.com"

An update would offer the quickest solution.

---

Talk soon 🌝

Richard

[stefan_s]

Dear Richard,

thanks for your thorough reply.

The bahavior occurs on all mobiles (Android and iOS) we tested it on. And on Desktop in small window size or firefox inspector set to mobile view.

Were you able to recreate the situation I screenshoted in the OP where all assests were being loaded upfront for mobile view irregardless scroll position?

I know of handbrake, did you read the section in documentation:

A: We have used Handbrake and tried with different optimzied settings. Also the flag that reduces CPU usage. As mentioned before video file sizes are quite small. We use separte video files for mobile.

Q: Are you using a lot of y or x-parallax?

A:There is a Y-paralax on a majority of assets throughout the page. I'll dublicate the page and see if mobile loading behavoir changes without it.

Q: Did you at any prior time or version not experience these issues?

A: At least to my knowledge this behavoir did not appear after our last content update (early 2021) but haven't really checked mobile version performance in between.

[arminunruh]

hey there

sorry this hasn't been resolved in such a long time.
working on it now.

[arminunruh]

im going to try to fix this tomorrow

[stefan_s]

Dear Armin, thanks a lot!

[arminunruh]

hey stefan i need a bit more time for this, im on it :O

[arminunruh]

hey can u update lay theme now and see if it works?
i think it works now!