Video playback with jQuery Mobile and Phonegap
Posted
by
aritchie
on Stack Overflow
See other posts from Stack Overflow
or by aritchie
Published on 2012-12-13T16:39:43Z
Indexed on
2012/12/13
17:03 UTC
Read the original article
Hit count: 177
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??
© Stack Overflow or respective owner
