Solved

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

Mandrew
Tourist
7 0 0

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.

圖片_20231121231300.jpg

 

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

Please let me know if you have any questions. Thanks

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3376 447 494

This is an 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:

view - 2023-11-23T094446.053.png

Hope it helps @Mandrew 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 8 (8)

BSS-Commerce
Shopify Expert
3376 447 494

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>

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Mandrew
Tourist
7 0 0

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?螢幕擷取畫面 2023-11-22 174341.png

 

 

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
Shopify Expert
3376 447 494

This is an 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:

view - 2023-11-23T094446.053.png

Hope it helps @Mandrew 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Mandrew
Tourist
7 0 0

It works!!!thanks a lot!

CreateClo
New Member
6 0 0

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
Tourist
4 0 0

Amazing! Worked so well thank you!!

CreateClo
New Member
6 0 0
It's working in low-battery mode (mobile)?
princessalice
Tourist
4 0 0

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