How to play video using jqtouch + html5 ?
php_...@yahoo.com
my code is not working while i install it in iphone.
however it works with mp4 file in safari browser.
On Mac OS its only play .MOV file not mp4 file.
My Code :
=======================================
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQT.Floaty</title>
<style type="text/css" media="screen">@import
"jqtouch.min.css";</style>
<style type="text/css" media="screen">@import
"theme.min.css";</style>
<script src="jquery.1.3.2.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="jqtouch.min.js" type="application/x-javascript"
charset="utf-8"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/
html5media.min.js"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
startupScreen: 'jqt_startup.png'
});
</script>
</head>
<body>
<div id="app_items">
<div class="toolbar">
<h1>Video Gallery</h1>
</div>
<ul class="app_item">
<li><a class="flip" href="#video1"><img src="videos/
1.jpg" height="100" width="100"></a></li>
<li><a class="flip" href="#video2"><img src="videos/2.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="#video3"><img src="videos/3.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="#video4"><img src="videos/4.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="#video5"><img src="videos/5.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="#video6"><img src="videos/6.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="#video7"><img src="videos/7.jpg"
height="100" width="100"></a></li>
<li><a class="flip" href="videos/1.flv" rel="external"><img
src="videos/1.jpg" height="100" width="100"></a></li>
<li><a class="flip" href="videos/2.mov" rel="external"><img
src="videos/2.jpg" height="100" width="100"></a></li>
<li><a class="flip" href="videos/4.avi" rel="external"><img
src="videos/4.jpg" height="100" width="100"></a></li>
<li><a class="flip" href="videos/7.mp4" rel="external"><img
src="videos/7.jpg" height="100" width="100"></a></li>
</ul>
</div>
<div id="video1">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>Screen Saver FLV</h1>
</div>
<div class="movie">
<video width="380" height="260" controls autobuffer autoplay>
<source src="videos/1.flv" poster="videos/1.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video2">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>Trust Me Movie</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/2.mov" poster="videos/2.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video3">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>Video Ads FLV</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/3.flv" poster="videos/3.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video4">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>AVI Testing</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/4.avi" poster="videos/4.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video5">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>Movie File</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/5.mov" poster="videos/5.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video6">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>Janifer Hudson Movie</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/6.mov" poster="videos/6.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
<div id="video7">
<div class="toolbar">
<a href="#" class="back">Back</a>
<h1>MP4 File</h1>
</div>
<div class="movie">
<video width="480" height="360" controls autobuffer autoplay>
<source src="videos/7.mp4" poster="videos/7.jpg" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>
</div>
</div>
</body>
</html>
welshman
It's looks like your video tag, which I use but just in it's simple
form.
<video scr="" poster=""></video>
that's it really and once run you should get a play button to press,
works for me
:-)
si