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