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

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

  • This topic has 7 replies, 3 voices, and was last updated 9 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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,

    #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/

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

    Thanks,

    Rafael

    #1180180
    Leo
    Staff
    Customer Support

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

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

    #1183109
    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,

    #1183406
    David
    Staff
    Customer Support

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

    #1184275
    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.

    #1184437
    David
    Staff
    Customer Support

    I assume thats working 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.