[Resolved] background video script for low power mode in apple safari

[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,

[Leo]

Hi there,

Javascript can usually be added using the wp_footer hook in hooks element:
https://docs.generatepress.com/article/hooks-element-overview/

[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 <script> tags. Also is it one single script or do I insert two separate scripts??

Thanks,

Rafael

[Leo]

Try wrapping it in <script></script>.

Looks like a single script but I’m not 100% sure. Perhaps check with the code author?

[Rafael]

Tech,

I emailed the author and he said this::

“Just make sure you add the ‘<script>………</script>’ in the very end of the webpage, before </body> 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 <script>….</script> 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,

[David]

Hi there,

1. Yes the code needs to be inside <script></script> tags.
2. Use the WP_Footer hook you can set the Priority to 50 or higher – it shouldn’t really matter.
3. In your script you will need to change this:

$('body').on('click touchstart', function () {

to

jQuery('body').on('click touchstart', function () {

[Rafael]

David,

Money.

<video loop muted playsinline autoplay poster="URL/TO/poster.jpg" class="background-video" id="myVideo">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm">
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

<script>
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function () {
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
});

jQuery('body').on('click touchstart', function () {
            const videoElement = document.getElementById('myVideo');
            if (videoElement.playing) {
                // video is already playing so do nothing
            }
            else {
                // video is not playing
                // so play video now
                videoElement.play();
            }
    });

</script>

For script use the WP_Footer hook and set the Priority to 50 or higher.

[David]

I assume thats working 🙂

[Author]

Posts