[SOLVED] How does one load a media player to play video or audio files with jqtouch?

How does one load a media player to play video or audio files with jqtouch?

I am currently using jqtouch to develop my ruby on rails into an iphone app. I can't figure out how to load a media player to play audio / video files. Does anyone know?

Solution

To add a movie page to jqtouch (adapted from the jqTouch demo page):

<!doctype html>
<html>
    <head>
        <title>Video Demo</title>
        <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.css";</style>
        <style type="text/css" media="screen">@import "../../themes/jqt/theme.css";</style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8"> 
    $('#play_movie').bind('tap', function(){
        $('#movie').get(0).play();
        $(this).removeClass('active');
    });

    $('#video').bind('pageAnimationStart', function(e, info){
        $('#movie').css('display', 'none');
    }).bind('pageAnimationEnd', function(e, info){
        if (info.direction == 'in')
        {
            $('#movie').css('display', 'block');
        }
    });
    </script>
</head>
<body>
    <div id="jqt">
        <div id="home" class="current">
            <div class="toolbar">
                <h1>Video Demo</h1>
                <a class="button slideup" id="infoButton" href="#about">About</a>
            </div>
            <ul class="rounded">
                <li class="arrow"><a href="#video">Video</a></li>
            </ul>
        </div>
        <div id="video">
            <div class="toolbar">
                <h1>Video</h1>
                <a class="back" href="#">Home</a>
            </div>
            <video id="movie" src="video/fireworks.mov" poster="video/fireworks.jpg" width="320" height="426" controls></video>

            <a href="#" style="margin: 10px;" id="play_movie" class="whiteButton">Play Movie</a>
        </div>
    </div>
</body>
</html>