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

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

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,

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.