I'm imagining this to be like a note left on the video game Dark Souls by a fallen developer, to hopefully be picked up by someone in the future and avoid the same headache I had.
We were busily rebuilding the front-end of an e-commerce store with a tight deadline, to be on national television the next day.
It was important to us that it worked well, especially as the previous developers had left it in a pretty sorry state. An HTML5 video was being used for the homepage hero.
Pretty standard stuff.
Our client reported that the video wouldn't play on their device, specifically iOS.
I tested within BrowserStack, which I never relish, as it can be a very frustrating experience. The video rendered as expected though.
I tested within XCode's Device Simulator and it loaded fine too.
Why wouldn't it fire up on their devices?
Were they using Chrome instead of Safari, could that be it?
Does that really make that much of a difference, isn't Chrome on iOS just Safari wearing a new coat of paint?
I tested both browsers and they loaded all the same.
Normally, at this point, I'd get hold of the problematic device and shove a USB cable up it's arse to see what's going on. But developing during a Pandemic has made that particularly tricky.
I checked the video properties to make sure it had all the relevant requirements, namely ensuring it was muted and set to play inline.
My business partner jokingly expressed concern.
"What have you done? It was working earlier!"
He checked on his iPhone, it was completely broken.
He confessed to having changed the video file. I had no idea he'd done that.
Eureka. It wasn't me, he must have upset the file somehow. We use HandBrake to compress videos down to an acceptable level. Perhaps he had used some brutal settings and now iOS didn't like the encoding.
Nope. Wasn't it.
This was driving me slowly crazy."It's not happening on my device, or on any of my tests". Doesn't usually go down very well either.
I use the LazySizes library extensively, and have noticed issues with it working sometimes on iOS. I'm quietly confident this is just something to do with my implementation rather than a bug in the library, but I've seen it happen all the same. Loads great on Androids and Desktop browsers, sometimes gets pissy on iOS.
I was using LazySizes to handle the lazy-loading of the videos. Normally I wouldn't do this on a hero video, because of course, you want this to load as a priority. I had implemented it here though as there were two different videos being used, one for smaller devices (portrait) and one for desktop (landscape).
LazySizes can handle this by only loading the visible video.
I removed the lazyloading ability on the videos.
This had to be it.
It wasn't. Same issue.
Works fine in all device simulators and remote devices, but try it out on the real thing and it just wouldn't load. Both the client and my partners device.
I'm wracking my brain at this point. I do what all the best developers do in their time of need, throw myself at the mercy of Google.
I came across suggestion after suggestion of what could be the cause. Mainly everything I'd mentioned above.
Then in one dark corner of the internet I found a comment:
"I've spent all day trying to figure this out. My client just leaves their phone in Low Power Mode all day out of choice. This was the problem for me."
I asked my business partner.
"Have you got low battery?"
"Yeah. Like 2 percent."
"Can you plug it in? Are you using Low Power Mode?"
"Yeah. I always do. Just prefer it."
"Can you turn that off too? Okay. Can you see it now?"
"... Yeah. What did you change?"
It was good to finally get to the end result, but it took much longer to get there than I had hoped. This is why it can be so difficult to estimate time against development. There are so many variables that can affect an issue.
I understand why Apple would do this. I'm sure it saves a tonne of battery. I'm sure that Google must do something similar, although this is the first time I've ever experienced it, so it completely caught me off-guard.
So, let this be a word of warning. If your autoplay videos refuse to play on iOS, double check the 'Low Power Mode' for the sake of your mental health.
Sam
Top comments (0)