Triggering video loaded event on iPad?

Question

I'm working on a website that has a video background.

Firstly, I check if the browser can play videos using modernizr.

If it can't, I show a fallback image and display some text over the image.

If the browser can play videos, I add some event listeners to the video, like canPlayThrough and whatnot.

Once that event listener is triggered, javascript displays some text over the video.

The problem is, the iPad passes the first test. It can play videos. However it apparently can't autoplay them. So my video canPlayThrough event listeners are never triggered, and the text never displays on top of the video.

What are my options here to get the text to display over the video on the iPad? What alternate event do I need to look for? Do I, unfortunately, need to resort to device detection?

Answer 1

Modernizr has a test for video autoplay (it hasn't been released on the modernizr.com website - just the github repo. What it does is check to see if a bundled base64-encoded super-short video is playing, and if it is, it returns true.

Most of the time, the best thing you can do in this instance is to check for mobile browser useragent, and fall back to a static image when it is encountered.