This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

How to prevent an old tablet from going to sleep

I created some very slow animations. I created these so people can use their old tablets as an art frame. There is a problem with the old Blackberry Playbook that I have though: it will go to sleep after 5 minutes. On the fantastic #fronteers IRC channel I asked if somebody knew a way to prevent this from happening from within the browser. There appears to be one!

Bas Hintemann came up with the clever idea to use video with the autoplay and the loop attribute. I know most tablets don’t support these attributes, but it turns out they are both supported in the Playbook. Here’s what the necessary code looks like:

<video autoplay loop src="small-file.mp4"></video>

You could add some styling to make sure the video itself is invisible. It turns out the trick doesn’t work if the video is outside of the viewport or invisible in any other way. So hiding it completely doesn’t work. This CSS worked for me. You might want to change it for your purposes:

video[autoplay][loop] {
    width: 1px;
    position:absolute;
}

I don’t want to serve this video to all visitors, I’m sure some browsers would show an alert that a video is trying to auto play. That would be terrible. So I turned it into a simple setting. It is conditionally loaded by adding ?loop to the URL. In PHP it works like this:

if(isset($_GET["loop"])) {
  echo '<video autoplay loop src="small-file.mp4" style="width:1px;position:absolute;"></video>';
}

I added a little script that removes the text in the title if this loop setting is on. I did this because on a Playbook the title is always visible and that’s distracting. The final code looks like this:

if(isset($_GET["loop"])) {
  echo '<video autoplay loop src="small-file.mp4" style="width:1px;position:absolute;"></video>';
  echo '<script>document.querySelector("title").innerHTML = "&nbsp;";</script>';
}

I’ve tested this on my Playbook and it works. It also works on iOS on my iPad. I’ve tested it on iOS and on a few browsers on Android and it doesn’t do a thing. The video is invisible, it doesn’t play and it definitely doesn’t prevent the screen from sleeping. Any suggestions to make this work on other platforms are more than welcome. I haven’t tested it on Windows Phone and Firefox OS. I’d probably need a different movie file for the latter. The movie file I use can be downloaded here.

I’m very happy with this little hack. I finally found a use case for my Playbook.