Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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:
Hope it helps @Mandrew
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via [email protected]
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, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via [email protected]
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/)
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:
Hope it helps @Mandrew
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via [email protected]
It works!!!thanks a lot!
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.
Amazing! Worked so well thank you!!
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024