Resolved page buider : background video for smartphone

Please send your site URL here or PM me.

- Best regards

Hi

thanks, PM sent

cyril

Hi, did you see my PM please?

thanks

cyril

I checked the site on Google Chrome Mobile and works well for me.

- Best regards

We tried on several mobile and it doesn't work at all. did you test on a smartphone or an emulator please?

thanks

cyril

On IphoneXR the video is not played at all
on all android phones the video doesn't start until we touch the screen

Sorry to chime in but yes, I am having the exact same issue.
IOS, blank white area (even with a background color), when user engaes (ie scrolls) video poster shows
Android (chrome), Video is paused until user engagement (ie scrolls)

The link below leads me to believe that the function is available, simply not working in SP page builder:

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

**ALSO, I have a duplicate of my site built in wordpress, with the exact same video (different page builder) and it WORKS in the wordpress page builder

Thanks Casey

so it seems we have a real issue here. Can we expect a fix soon please?

thanks

Cyril

And just to help illustrate the issue. Attached is a screenshot of the inline code, it is similar between the SP PB site (top) and the WP PB site (bottom), and somehow the SP site doesn't load but the WP site does.

** BTW, both of these example sites are on the same server
and just to review, this is a mobile issue only, loading on desktop browsers is fine.

Thanks again!
Let's hope Joomshaper people will show up sometime with a fix

cyril

Hi
Toufiq ? Ofi ? Can we have an update on this please?

thanks

cyril

Hello JoomShaper guys ! It would be nice to have at least your opinion here ?

thanks

cyril

I will like to see a respond form Joomshaper people.

Sincere apology for the delay. The autoplay functionality is needed user interaction on mobile browsers and it is built-in. So, it is not a bug as it is by default functionality.

- Best regards

Hello,

Also to note, I've seen a couple of your moderater responses that cite the link*** from google chrome that explains why they USE TO block autoplay, although if you read the entire release, it also states that if you abide by their policies, autoplay IS possible. Now I am not a application developer, but it is quite obvious that autoplay IS possible without user interaction (see example from google dev). Now it may be that your team of developer have chosen not to implement it, and if that is the case, it needs to be stated clearly as a "feature".

https://developers.google.com/web/updates/2016/07/autoplay

LIVE EXAMPLE from google dev: autoplay available since Chrome 53+:
https://googlechrome.github.io/samples/muted-autoplay/index.html

https://www.joomshaper.com/forums/mobile-autoplay#reply-220918

***https://www.joomshaper.com/forums/video-background-does-not-start-automatically-on-mobile-devices#reply-216690

Another thought, if you won't support autoplay in the near future, other page builders have a "fallback" or simply a mobile option to replace the video (more for page load and speed).

if you won't support autoplay

it's not a problem on our side. Almost all mobile browsers disabled auto-play. It's a software lock.
Chrome is only one browser, mobile users have 10 more.

---

have a "fallback" or simply a mobile option to replace the video

Do you mean image?

Just make a simple test:
1) Simple Page
2) Add Raw HTM addon
3) Use HTML5 player

<video controls autoplay>

  <source src="/forums/images/movie.mp4" type="video/mp4">

</video>

upload your short video , update link etc.

3) Now browse that page using 3 mobile browsers.

4) On desktop: The above code will make a video automatically play when the webpage is loaded in the browser.

Paul, I'm sorry, I don't understand your response.

Q.)--Did you not read my article linked above? (and below on this post which mentioned the top 4 browsers that NOW support autoplay, Chrome, IOS, Opera, & Firefox)

Q.)--Did you click the linked example for a demo (did it not autoplay for you )?

Q.)--Can you point me to your source which states something about this Software-Lock concerning autoplay?

-These are all real questions that I would like answered. I just find it hard to believe that you or anyone else on your team have never visited a website with autoplay on a mobile device.

-Concerning the fallback, yes, an image fallback would be nice, attached is an example from another pagebuilder I will not name, but I know of this functionality on at least 6 more popular page builders.

https://developers.google.com/web/updates/2016/07/autoplay

Chrome standards:
https://googlechrome.github.io/samples/muted-autoplay/index.html

IOS (safari) standards:
https://developer.apple.com/documentation/webkit/safari_tools_and_features/delivering_video_content_for_safari

Thanks for the responses, I hope some of this helps.

Hello Paul, wasn't sure if you viewed my last response as it seems it published just after yours. I've also decided to create a test for you at the link below if you would like to view on a mobile.

https://codepen.io/czinsight/pen/OJPgYwW

Just to be sure we are talking about the same thing, we are talking about the background video in the "ROW options" under "style". Not a RAW html addon. Also to note, we are not talking about the syntax attribute "autoplay" we are referring to the general function "autoplay" of which the syntax would be "playsinline" (please refer to the extensive documentation I have provided in the links, screenshots, and references.)


more references:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay#Browser_compatibility
https://caniuse.com/#search=autoplay

Hi @Casey,

By default video autoplay is turned off in Mobile browser. So we added event listener that If user touch the screen the video will play. Without that hacks we can't autoplay the video. I saw your codepen example is your all smartphone play that video?

Thanks,
Mamun

I think the video background in general should not be used for mobile devices, as it is very bad for page speed. And even if the video background working in the smartphone, it looks bad because a lot of the details are beyond the screen. In fact, we get glimpses of the abstract. So it makes no sense to look for a solution. But adding poster image option with disabling the video background, depending on the width of the screen would be nice. (IMO)

 https://codepen.io/czinsight/pen/OJPgYwW 

In Android: default browser + Mobile DuckDuckGo + Mobile Firefox - muted video clips still autoplay, video no sound only.
But I fully agree with @Pavel on small screen video under row content doesn't make sense. For small effects, I would rather use an animated gif.
--
@Casey - Yes, image instead of video on a mobile view - very good idea.

Hello,
Thanks for the responses:

Mamun:
I looked through the console and I don't see your event listeners attached to any background videos. And yes, the codepen I sent DOES play on all mobile browsers just fine, if you need me to take video of that I can... or you could try it on your smartphone... or you could try the examples that GoogleDev provided... or you could try the example provided by Mozilla in the examples provided.

Pavel:
Ok, so I understand that your preference is to not use autoplay, however, I did not hire you to design my website. Concerning page speed, you should read the press release from googlethat says that they have relaxed the rules to try and prevent people from using larger gifs (pull quote below). If you are saying this is all purposeful you should list it as a feature like this **SP page builder does not support/condone video background autoplay / playsinline.

Paul:
THANK YOU!, I am glad that you tried my example. I am truly thankful. But again, if someone would just read the documentation provided by the BROWSER developers (in my links), you would already know that your gif solution is the exact reason why they PROMOTE autoplay now, rather than gifs (see pull quote below from the Google press release)

"Disabling autoplay had the unintended effect of driving developers to alternatives such as animated GIFs, as well as <canvas> and <img> hacks. These techniques are much worse than optimized video in terms of power consumption, performance, bandwidth requirements, data cost and memory usage."

***And concerning the autoplay in general. YES, I do agree with you!
That we should, if at all possible, use an image in place of the background video. Of course, you have made that scenario not possible currently, and my client would prefer the video and is not concerned with page speed.

Al Mamun:

While I couldn't find the specific event listener you were referring to, you are indeed correct that the playsinline function is being actively removed. This helped me find a solution, and I have now found a way to enable autoplay on mobile via a simple workaround.

Might I suggest a simple toggle/option for "mute video" as I've seen in other page builders which will effectively enable/prevent autoplay at the descretion of the website developer.

-thanks