Question

I have a phonegap application targeting iPad that needs to embed a video on one of its pages. I’ve found forum posts and other help claiming this is possible using the video tag from HTML5. Here’s the code I’m using:

<video id="video01" width="770" height="433" controls="controls" preload="auto" poster="splash.png">
<source src="movies/myVideo.mp4" type="video/mp4" />
</video>

This code snippet works great in Safari, but when loaded via Phonegap onto the iPad shows the splash image with a crossed-over play button (like the video didn’t load right).

Perhaps is there a nuance with playing video on iOS I’m not aware of? Or is there a small formatting issue for the video itself. The video was formatted as h264 wrapped in a mp4 container.

Answer 1

Maybe the issue is in your video codec. Try setting your h.264 Level to 3.1 or lower.

I ran into a similar issue recently. My problem was in my video codec, I was rendering video in Adobe After Effects (CS5.5) and when exporting H.264 my settings were on Level: 5.1. I came across this post on video bitrates on ipad and saw that the highest setting might be 3.1. I figured “why not” and gave it a try. It worked.