HTML5 video player doesn't work on iPad/iPhone

Question

NOTE This turned out to be a simulator problem, not a video encoding problem, see my edit lower down...

I'm creating a web site for a local college, and they want to be able to add short videos that people can view online. I've spent quite a bit of time trying to work out how to get the videos to play on iDevices, but have failed.

I'm using Video.js (http://www.videojs.com), and have HTML that looks like this...

<video id="videoplayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="352" poster="/Content/Images/logobg.png" data-setup='{}'>
  <source src="/Content/Videos/video.m4v" type="video/mp4">
  <source src="/Content/Videos/video.webm" type="video/webm">
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

This works fine on desktop browsers, where it uses the m4v file. However, if I load the page on an iDevice, the video player says "no compatible source was found for this video", which sounds like it doesn't like either the m4v or the webm file.

I created the webm file using instructions found at http://daniemon.com/blog/how-to-convert-videos-to-webm-with-ffmpeg/. I tried creating a .mov file using the accepted answer at iPad Doesn't Render H.264 Video with HTML5, but this gave the same error.

Anyone any ideas how I can support iDevices? Please don't blind me with science, I'm a real newbie with all this video stuff, and need simple instructions!

Edit The problem I was having was when trying to view the site on a mobile simulator. When I uploaded the site to a real server, and tried it on an iPad, it worked fine. So, if anyone is having a similar problem, first use something like Handbrake to encode the videos, as it seems to do it fine, then make sure you're testing on a real mobile device, not a simulator!

Mick Mick · Accepted Answer · 2015-04-16T16:35:38

Generally using an mp4 video file will ensure playback across the widest selection of browsers/devices, including recent iOS and most Android devices.

More specifically: H.264 video, AAC audio in an mp4 container (i.e. file).

This is widely supported so you should not have too much trouble creating videos, or if necessary converting videos, to this format.

HTML5 video player doesn't work on iPad/iPhone

1 Answers