Inline Video Not Working On iPhones w/"Low Power Mode"

Does anyone have any solutions for this? I’m finding that inline videos are not working on iPhones if the user has the phone on “Low Power Mode”. There is a lot of talk about this problem on the internet if you just google it. Any solutions for this with Tumult Hype?

Videos that would otherwise autoplay will show controls if low power mode is on, but there isn’t really a workaround for this.

The videos work fine when it is not on “Low Power Mode”. But the moment I turn the feature on in the iPhone settings the video stops working. Regarding the code. I am a rookie at this kind of stuff so I didn’t understand your response about the code and on scene load. Is that a workaround? My apologies, can you put it to me in layman’s terms?
The last option you mentioned is essentially just turning the controls feature on for the video, correct? Or are you talking about adding an image icon of the play button which will act as a trigger to play the video?

After some more tests it looks like the video will show controls if low power mode is on, so there isn’t really a workaround for this. But you can do something with that information: do some different animation or show something in its place if having a stuck video is a dealbreaker for you.

var myvideo = document.getElementById("myvideo");

if (myvideo.paused) {
   // do something here if the video is paused like: 
   hypeDocument.startTimelineNamed('Video did not play', hypeDocument.kDirectionForward)
}

This example shows a single video set to autoplay. If it doesn’t play (which is detected by a Timeline action + JavaScript function in the Main Timeline, then an additional timeline plays).

detect-videoplayback.hype.zip (2.2 MB)

1 Like

Would a “fallback” GIF of the inactive video be possible? In other words, when the video stops playing because of “low power mode”, an autoplay GIF of the that same video activates as its replacement without the user having to do anything. Is this a possibility?

Yup, you could have your timeline show that GIF… or a Sprite Sheet :movie_camera:

Hi again,
So I followed your instructions and it works really well. Basically, I set it up so that if the user is operating in low-power mode, 3 custom icons (actually its one icon) will appear in the center of the screen just above the iOS-mandated play icon indicating that they should turn off low-power mode. However, I would like to have it so that if the user decides to tap the play icon anyways, my custom icon(s) will disappear. I uploaded a build example to google drive and included a link here showing what I'm referring to... Is there anyway you could update or fix this build to make it possible for the custom icon to disappear if the user chooses to press play anyways??? Any help would be much appreciated!
https://drive.google.com/file/d/1QS25lwiqklJPM0XT2q0aaJWTLdCNfzvN/view?usp=sharing

Thanks!

You could probably just add some code to hook onto the onplay event to run the timeline in reverse, which would hide the elements. Added to the bottom of your isvidplaying() function:

myvideo.onplay = (function () {
	hypeDocument.continueTimelineNamed('video did not play', hypeDocument.kDirectionReverse);
});

Very helpful! Thank you!

1 Like