Video.js issues on iPad & iPhone (iOS) – Troubleshooting

I’ve played with video.js to embed HTML5 video a little in the last year but not in any depth. The last time I used it I came across a few hurdles. And today, I was trying to embed a video supplied by a high profile client. For the most part, it went without a hitch but I had issue with the HTML5 video playing on a first generation iPad with iOS 5.x and my iPhone 4 running iOS 6.x (and possibly more iOS devices that I was unable to test in). It was fine in all versions of IE I tested (down to 7), Chrome (mac & PC), Firefox (mac & PC), an android phone and a latest gen iPad that I was able to get my hands on.

The client sent an HD 1080p mpeg across which I converted to .mp4 using Handbrake. From previous experience, I knew that I also had to convert this to .webm format so that it would play in Firefox – I believe there are some licensing issues with Firefox using the H.264 codec in .mp4 which gives us the requirement for the .webm format. I used to convert the .mp4 into .webm.

Once I had my videos in the desired formats, I embedded the video like so:

<video id="my_video_1" class="video-js vjs-default-skin" controls autoplay preload="none" width="1050" height="588" poster="/img/posterframe.jpg"
        <source src="/video/Video.mp4" type='video/mp4'>
        <source src="/video/Video.webm" type='video/webm'>

This lead me to the above situation with it working pretty much everywhere with the exception of the old iPad and my phone.

After trawling the forums and stack overflow, I was no closer an answer so I tried everything I could think of including different encoding via handbrake, different video formats, different video players, messing with the video tag… Finally, I tried reducing the video res from 1080p to 480p and finally managed to get it working – turns out old iOS devices don’t like HD video.

Did you like this post? Why not subscribe?

2 thoughts on “Video.js issues on iPad & iPhone (iOS) – Troubleshooting

  1. Hey Fraser. Interesting solution. Came across it whilst I was trawling the web attempting to find fixes for iPad functionality on a project I’m currently working on, using a combination of bigvideo.js and standalone video.js to serve up background videos on “click”.

    What I’m left wondering is how you specified that the 480p video only played on iPad, whilst serving up the HD versions for desktop. Is this possible with Modernizr; detecting ‘touch’? If so, how would one implement such code?

Leave a Reply

Your email address will not be published. Required fields are marked *