My HTML5 Video not working in ipad

Question

I am trying to load a jquery created video tag into my page with the following code:

var vidDiv = vpJQuery("#videoHolder");
var vidControl = vpJQuery("<video></video>");
vidControl.attr("width", "512");
vidControl.attr("height","288");
vidControl.attr("controls","controls");
vidControl.attr("id","vidControl");
var vidSource = vpJQuery("<source />");
vidSource.attr("src", vidUrl);
vidSource.attr("type", "video/mp4");
vidControl.append(vidSource);
vidDiv.empty();
vidDiv.append(vidControl);
vpJQuery("#vidControl > source").attr("src", vidUrl);
var vidPlayer = vpJQuery("#vidControl").get(0);
vidPlayer.load();
vidPlayer.play();

vidUrl is my mp4 path hosted by amazon. This works fine in my desktop web kit and iphone sim, but not the ipad sim! I get the play icon with the line through it on the ipad, any ideas?

i would test this without creating it through jQuery and just as a normal element first. that way you can isolate what the issue might be. — Petrogad

Kon Kon · Accepted Answer · 2011-02-17T20:09:56

Make sure the file format you supply is supported by iPad. This is a good guide: http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/

My HTML5 Video not working in ipad

2 Answers