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.
<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.
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
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,
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.
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
Chrome seems to have a bug where it won’t actually autoplay the video and therefore will go to sleep as the video isn’t playing to keep it awake. Hit me up on twitter if you know how to fix or why it doesn’t work.
Seems in the latest chrome iOS release this now works just fine!
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
pause() on the video to toggle if the phone should sleep or not.
Have fun and don’t abuse this.