Problem Viewport on mobile (IOS and Android)

1

Hi guys,
this page


is working fine on desktop: when you scroll there are 4 video starting at Enter Viewport

I dunno why, on mobile they don’t work: different reactions on different devices…

index copy.zip (2.4 MB)

2

To get muted video to autoplay in this format, you should add playsinline="" to the <video> tag.

Cool document :slight_smile:

3

the videos haven’t audio…the problem it’s not the audio:

  • the page crash on IOS
  • the videos play badly on android, sometimes yes, sometimes not…
4

You should address the console errors:

[Error] TypeError: undefined is not an object (evaluating 'f.execStart=a.performance&&a.performance.now&&a.performance.now()')
	(anonymous function) (1584891668417455:21)
	(anonymous function) (1584891668417455:21:31558)
	Global Code (1584891668417455:21:31562)
[Error] ReferenceError: Can't find variable: fbq
	Global Code (fbevents.js:21)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (hola_videojs_hls.min.js.map, line 0)
[Error] ReferenceError: Can't find variable: jQuery
	Global Code (cookielaw.js:24)

I notice the page sometimes refreshes when scrolling down.

Check scene 2 here: index copy.zip (2.5 MB)
when scrolling down the video reloads for no reason, but this doesn’t happen on a clean document using the same viewport action and inner HTML: video-simple.zip (12.0 KB).

Could there be something that videoJS is doing onscroll?

1 Like
5

i dont have a “Scene 2” just one…
Anyway, you mean probably the file is corrupted and I gotta re-make it new?

The only actions on scroll are Enter and Exit Viewport and these 4 videos. that’s it.

6

I added another scene to see what would happen if I drastically simplified the document. The error still happened. But it doesn't happen if I remove all the code you added and just have a simplified demo of what you're doing with the videos, as is shown below:

I never said that -- it looks like you're missing jquery and you have a some JS errors occurring when loading the page.

7

ah ok got, but now, for you what is the solution?
try to remake it or what?
Cause I used some pieces of others hype files to make this, so probably this method made some error… i dunno…

8

If you delete the HTML widgets the document works as you'd expect, so I think there's something odd going on with the code included in the document which is what I was talking about regarding the JS errors in the console.

9

I already done today, nothing has changed.
I just finished to re-make the file as new, not copying the elements from others hype files, and till now, where on Android was working badly, it seems to works good.
https://www.vogue.it/partner/balenciaga/index2.html

no responsive yet, but it seems working…
The HTML widgets are there both

[UPDATE]
With hype, till 3 video OK, with 4 videos it doesn’t works on some devices, it plays max 3 videos
Does Hype has some limitation of number playing simultaneously?

With pure html it working good https://www.vogue.it/partner/balenciaga/index_div.html

10

I’m getting a 404 on the first link; can you repost with a working version and your current .hype document? Thanks!

11

Thanks Jonathan, but actually the task is not more video play at scroll, but only the text, so no problem, much easier.
Anyway I found out a probleme with the video autoplay on Android Chrome…when you have “Save mobile data” activated, chrome doesn’t play the videos…So i had to replace all the videos with gif’s.

Finished

1 Like