Scrollview Frozen on IOS
Scrollview Frozen on IOS
Hi All,
We're starting to develop a video mobile app for tablets and the layout is a very simple Scrollview on top of a native video player. We are using 1.0a4.1
1. standalone scrollview with our dataset on a blank page works perfectly on an ipad2
2. same scrollview with same dataset placed on a full screen video player freezes completely and looks like we placed a static image over a video player (but the underlying video and player works fine)
3. The same scrollview and video player that froze on IOS works fine on Android 3.0
if it helps, here is the code...
help? or bug?
thanks...
- <html>
<head>
<meta http-equiv="Content-Type" value="application/xhtml+xml" />
<title>Test Video Player</title>
<meta name="viewport" content="width=device-width" />
<link href="css/default_scrollview.css" rel="stylesheet" type="text/css">
<link href="css/jquery.mobile-1.0a4.1.css" rel="stylesheet" type="text/css">
<link href="scrollview/jquery.mobile.scrollview.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jitterbug_scrollview.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0a4.1.min.js" charset="utf-8"></script>
<!-- Jquery Scroll View -->
<script type="text/javascript" src="scrollview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scrollview/jquery.mobile.scrollview.js"></script>
<script type="text/javascript" src="scrollview/scrollview.js"></script>
<!-- Query All Videos -->
<?php
include("includes/conn.inc.php");
include("includes/glob.inc.php");
//query videos
$sql = "
SELECT
`prod-videos`.usdate AS `date`,
`prod-videos`.usid AS id,
'video' AS `type`,
`prod-videos`.usid,
`prod-videos`.ustitle,
`prod-videos`.usfilename,
`prod-videos`.usartists,
`prod-videos`.usecode,
`prod-videos`.usesite,
`prod-videos`.usfeatured,
artists.aid,
artists.aname
FROM
`prod-videos`
Left Join artists ON `prod-videos`.usartists = artists.aid
WHERE
`prod-videos`.uscatid REGEXP '7|2|6' AND
`prod-videos`.usactive = 'ON' AND
`prod-videos`.usapproved = 'YES' AND
`prod-videos`.usesite IN ('bitgravity-1 4x3', 'amazon cloudfront')
ORDER BY `prod-videos`.usfeatured DESC
LIMIT 15
"; //, RAND()
$videos = mysql_query($sql);
$totalVideos = mysql_num_rows($videos);
$thumbWidth = 130;
$containerWidth = $totalVideos * $thumbWidth;
?>
<style type="text/css">
#video_thumbs > .ui-scrollview-view {
width: <?php echo $containerWidth.'px'; ?>;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div class="video_contents">
<div class="contents_container">
<div data-scroll="x" id="video_thumbs">
<?php
$key = 0;
while($video = mysql_fetch_array($videos)) {
if ($key == 0) {
$poster = '../images/thumb/'. $video['usfilename'] .'.jpg';
$source = 'http://myaccount.s3.amazonaws.com/'.$video['usecode'];
}
$data['videos'][$key] = array(
'description' => array(),
'sources' => array('http://myaccount.s3.amazonaws.com/'.$video['usecode']),
'subtitle' => $video['ustitle'],
'thumb' => '../Videos/'. $video['usfilename'] .'.jpg',
'title' => $video['aname']
);
echo'
<div url="http://myaccount.amazonaws.com/'.$video['usecode'].'"
title="'. $video['aname'] .'" rel="'. $key .'" class="pxtip thumbnails_active">
<img src="../Videos/'. $video['usfilename'] .'.jpg" alt="'.$video['ustitle'].'" width="120" height="90" />
</div>
';
$key++;
}
?>
</div>
</div>
</div>
<!-- Video Player -->
<div id="jitterPlayerContainer">
<video id="jitterplayer" width="1024" height="660" controls="controls" autoplay="autoplay">
<source src="<?php echo $source; ?>" type="video/mp4" />
</video>
</div>
</div>
</body>
</html>