Stop iOS10 browser auto-locking
I had twitter open the other day and I had to put my phone down and attend to something else, the timeline happened to be on a looping gif video and I noticed when I came back that my phone was still awake and unlocked the fact that video was in view kept the phone awake and this got me thinking about the new playsinline
attribute that has been enabled for <video>
elements in iOS10 Safari.
TL;DR;
<video autoplay loop muted playsinline src="video.mp4" />
Update: This trick no longer seems to work in the latest iOS however a clever person has an alternative project called NoSleep.js that works. Similar idea but it randomly scrubs the video and seems to require an audio source to keep the screen alive.
Check out the live demo.
The demo uses a base64 encoded mp4 video from Mathias Bynens small repo which makes it around 1.2 – 1.3kb.
playsinline attribute
Finally within iOS10 on an iPhone you can now autoplay a silent video using the new playsinline
attribute and avoid the fullscreen player that we’re all used to on iPhones. Check out the webkit blog post on their new <video>
policies.
Hiding the video
In order for the phone to stay awake the video needs to be visible and within the viewport so obvious things like positioning off canvas, visibility:hidden
and opacity: 0
don’t work. However we can use the following CSS to make it invisible to the human eye but not to the browser and therefore keep the phone from auto-locking.
video {
position: absolute; // take video out of document flow
z-index: -1; // position it behind other layers
opacity: 0.01; // Lowest valid opacity value to make it invisible
width: 1px; // Reduce default video dimensions to smallest non 0 value
height: 1px;
}
Chrome iOS
Seems in the latest chrome iOS release this now works just fine!
Toggle auto-locking
If anyone wants to run with this you could easily make it start and stop the video via user interaction say you have a timer app you could remove the autoplay
attribute and just call play()
or pause()
on the video to toggle if the phone should sleep or not.
Have fun and don’t abuse this.