iOS low power mode video autoplay

Home Forums Support background video script for low power mode in apple safari

This topic has 7 replies, 3 voices, and was last updated 1 year, 10 months ago by David.

Viewing 8 posts - 1 through 8 (of 8 total)

Author
Posts
February 28, 2020 at 11:42 am #1179974
Rafael
Tech,
I installed a background video on my site.
I know that Apple Safari has a low power mode where the device will not autoplay background video.
I ran into this fix for Safari, but I have no idea how to include the java into GP.
https://shaktisinghcheema.com/how-to-autoplay-video-on-mobile-devices-on-low-power-mode/
Help.
Thanks,
February 28, 2020 at 4:30 pm #1180143
Leo
Staff
Customer Support
Hi there,

Javascript can usually be added using the wp_footer hook in hooks element:
https://docs.generatepress.com/article/hooks-element-overview/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
February 28, 2020 at 5:35 pm #1180169
Rafael
Tech,
I see.
My other problem is not knowing if I have to add script tags..
Object.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function () { return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } }); $('body').on('click touchstart', function () { const videoElement = document.getElementById('home_video'); if (videoElement.playing) { // video is already playing so do nothing } else { // video is not playing // so play video now videoElement.play(); } });
Do I just copy & paste the code or do I wrap it in .

Looks like a single script but Im not 100% sure. Perhaps check with the code author?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
March 2, 2020 at 10:02 pm #1183109
Rafael
Tech,
I emailed the author and he said this::
Just make sure you add the in the very end of the webpage, before tag.
Let me help you to understand it better:
Scripts are loaded in hierarchical manner, which means whichever script comes first in a webpage runs first.
The script needed to run the video is depending on other script(In our case, it is jQuery which should be loaded before this).
So, if you add the in the very end of the webpage,
it makes sure all the other dependent scripts are already loaded earlier in the webpage.
So which Hook do you recommend and priority??
Thanks,
March 3, 2020 at 6:13 am #1183406
David
Staff
Customer Support
Hi there,

1. Yes the code needs to be inside tags.
2. Use the WP_Footer hook you can set the Priority to 50 or higher it shouldnt really matter.
3. In your script you will need to change this:
$('body').on('click touchstart', function () {
to
jQuery('body').on('click touchstart', function () {
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
March 3, 2020 at 9:39 pm #1184275
Rafael
David,
Money.

For script use the WP_Footer hook and set the Priority to 50 or higher.
March 4, 2020 at 2:09 am #1184437
David
Staff
Customer Support
I assume thats working
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Author
Posts