Problem Viewport on mobile (IOS and Android)


(Nim) #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:


(Nim) #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?


(Nim) #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.


(Nim) #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.


(Nim) #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


(Jonathan Deutsch) #10

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


(Nim) #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