I'm fairly new to mobile apps, so am trying to knock up a simple video player using Phonegap and jQuery Mobile.
The problem is, jQuery mobile appears to be blocking
the video playback for some reason.
To troubleshoot I stripped it right back to
the following HTML, but get
the same result, ie a black rectangle where
the video should be, but no video playback or
controls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<title></title>
</head>
<body>
<div>
<video
controls autoplay>
<source src="video/video1.mp4" type="video/mp4" >
</video>
</div>
</body>
</html>
If I remove
the link to jquery.mobile-1.2.0.js
the video shows up and plays, otherwise, just
the black rectangle.
I don't know jQuery mobile at all, but searching in
the js for a reference to
the video elements doesn't show up, so I've no idea what is blocking it.
The code works fine in Chrome and Firefox. There are no console messages in Xcode. I also tried hooking up to http://debug.phonegap.com/ but this gave no error messages either.
Any ideas??
