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??
