jquery mobile video tag - black rectangle

jquery mobile video tag - black rectangle

I am using jquery mobile and try to embed the video using html5 video tag.

My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.

I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it is not an encoding issue.

When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.

What's causing the problem? How can I work with video and jquery mobile?

Thank you in advance!

  1. <video width="75%" id="video1" controls="true" autoplay="true"> 
  2. <source src="videos/mov_bbb.mp4" type="video/mp4"> 
  3. <source src="videos/mov_bbb.webm" type="video/webm"> 
  4. Your browser does not support the video tag. 
  5. </video>