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>

6.