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