background video script for low power mode in apple safari

Hi there,

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

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

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

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

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,

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 () {

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.

I assume thats working :)