GIF: autoplay video when mobile device is on low power mode

[Mandrew]

Hi guys,

I created some tutorial gif for my product, but it will become a jpg (cant even click to play the video) when mobile device is on low power mode.

As turning on the low power mode is quite common and it will affect the shopping experience if the gif is stopped (seems not very professional).  I found a potential solution (link) , however I don't know how to input the code. Please help if you have any solutions.

I'm using broadcast theme and my website is https://www.snaptips.shop/

Please let me know if you have any questions. Thanks

 

[BSS-Commerce]

HI @Mandrew ,

I checked the activity on the devices and tried to enable video autoplay in low battery mode. But this is not possible, clicking to play the video is required due to operating system protection.
You can fix the error of pressing the play button but the video does not play by adding the following code at the end of the file theme.liquid , The purpose of this code is that when you click play on a video, the remaining videos will also play.

<script>
   document.addEventListener("DOMContentLoaded", function() {
    window.location.pathname.includes("/how-to-apply-press-on-nails"){
      var videos = document.querySelectorAll("video");
  
      videos.forEach(function(video) {
        video.play().then(function() {
        }).catch(function(error) {
          document.addEventListener("click", function() {
            video.play().then(function() {
            }).catch(function(error) {
              console.error( error);
            });
          });
        });
      });
    }
  });
</script>

[Mandrew]

Thank you for your reply. I tried to insert your script, however it doesn't work. Could you let me know if i insert in the right place please?

Regarding the video autoplay in low battery mode, it works in my reference link. I turn on the low battery mode and the gif in his website is still working. (https://shaktisinghcheema.com/how-to-autoplay-video-on-mobile-devices-on-low-power-mode/)

[BSS-Commerce · Accepted solution]

Hey @Mandrew ,

I checked again and I found there is a solution to make GIF work while on low battery mode. This is the new code, please delete the old code I sent you and replace this code in that position:

<script>
        Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
          get: function () {
          return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
          }
        });
        
        document.body.addEventListener("click", playVideoOnLowPower);
        document.body.addEventListener("touchstart", playVideoOnLowPower);
      
        function playVideoOnLowPower(){
          try{
          const videoElements = document.querySelectorAll("video");
          for (i = 0; i < videoElements.length; i++) {
            if (videoElements[i].playing) {
            } else {
            videoElements[i].play();
            }
          }
          }
          catch(err) {
          console.log(err);
          }
        }
    </script>

The above code will play the videos when the user interacts with the screen. Here is an image to guide you on where to add the code. Place it above the </body> tag:

Hope it helps @Mandrew 

[Mandrew]

It works!!!thanks a lot!

[CreateClo]

Hi @BSS-Commerce,

It's working, but I would like to make the video autoplay even if the user doesn't interact, that is, right after the page loads. Is it possible? Maybe by setting it to autoplay after 0.5s of the page being loaded or something like that.

[princessalice]

Amazing! Worked so well thank you!!

[CreateClo]

It's working in low-battery mode (mobile)?

[princessalice]

Oh, the autoplay on low-power-mode mobile doens't work, the user still has to tap the screen but I'm happy with that because at least they can still access the video. I think autoplay for low power mode mobile is an ios policy setting and not accessible from the browser level api? That's what I saw at least when I was googling to solve my problem